TypeScript 安裝

更新於 發佈於 閱讀時間約 3 分鐘

# 安裝

npm install -g typescript

# 編譯

使用框架如 NextJS 時,框架會自動執行 TS 編譯

tsc hello.ts

# Hello TypeScript

  • 範例:
    function sayHello(person: string) {
    return 'Hello, ' + person;
    }

    let user = 'Tom';
    console.log(sayHello(user));
  • 上述例子中,使用 : 指定 person type 為 string
  • 運行會自動產生編譯好的文件 hello.js
    tsc hello.ts
  • 編譯好的
    function sayHello(person) {
    return 'Hello, ' + person;
    }
    var user = 'Tom';
    console.log(sayHello(user));
  • 編譯完成的文件,就是純粹 JS,因為 TS 只會在編譯過程中檢查,運行中不會檢查
  • 如果要執行中檢查,還是要手動檢查
    function sayHello(person: string) {
    if (typeof person === 'string') {
    return 'Hello, ' + person;
    } else {
    throw new Error('person is not a string');
    }
    }

    let user = 'Tom';
    console.log(sayHello(user));
  • 編譯錯誤預設依然會產生 JS 檔案,例如以下錯誤的範例
    function sayHello(person: string) {
    return 'Hello, ' + person;
    }

    let user = [0, 1, 2];
    console.log(sayHello(user));
  • 依然會產出
    function sayHello(person) {
    return 'Hello, ' + person;
    }
    var user = [0, 1, 2];
    console.log(sayHello(user));
  • 若想要編譯錯誤時不產出,可在 tsconfig.json 中定義 noEmitOnError

# 參考

留言
avatar-img
留言分享你的想法!
avatar-img
Learn or Die
0會員
16內容數
分享程式技術
Learn or Die的其他內容
2025/05/14
在 Next.js 中有四種方法可以在 routes 之間導航: 使用 <Link> component 使用 useRouter hook(用於 Client Components) 使用 redirect 函數(用於 Server Components) 使用原生的 History AP
Thumbnail
2025/05/14
在 Next.js 中有四種方法可以在 routes 之間導航: 使用 <Link> component 使用 useRouter hook(用於 Client Components) 使用 redirect 函數(用於 Server Components) 使用原生的 History AP
Thumbnail
2025/05/05
# Community Starter Kit Support in laravel new 12.2 Laravel new command,新增支援 community starter kit,支援的清單可 參考 laravel new --using statamic/statamic m
2025/05/05
# Community Starter Kit Support in laravel new 12.2 Laravel new command,新增支援 community starter kit,支援的清單可 參考 laravel new --using statamic/statamic m
2025/04/30
# 建立 Routes Next.js 使用基於檔案系統的路由器,資料夾用來定義 routes。 每個資料夾代表一個 route segment,對應到一個 URL segment。 要建立 nested routes,可以將資料夾彼此巢狀。 使用特殊的 page.js 檔案來讓 rou
Thumbnail
2025/04/30
# 建立 Routes Next.js 使用基於檔案系統的路由器,資料夾用來定義 routes。 每個資料夾代表一個 route segment,對應到一個 URL segment。 要建立 nested routes,可以將資料夾彼此巢狀。 使用特殊的 page.js 檔案來讓 rou
Thumbnail
看更多
你可能也想看
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
2025 vocus 推出最受矚目的活動之一——《開箱你的美好生活》,我們跟著創作者一起「開箱」各種故事、景點、餐廳、超值好物⋯⋯甚至那些讓人會心一笑的生活小廢物;這次活動不僅送出了許多獎勵,也反映了「內容有價」——創作不只是分享、紀錄,也能用各種不同形式變現、帶來實際收入。
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
嗨!歡迎來到 vocus vocus 方格子是台灣最大的內容創作與知識變現平台,並且計畫持續拓展東南亞等等國際市場。我們致力於打造讓創作者能夠自由發表、累積影響力並獲得實質收益的創作生態圈!「創作至上」是我們的核心價值,我們致力於透過平台功能與服務,賦予創作者更多的可能。 vocus 平台匯聚了
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
在 TypeScript 中,套件是模組化代碼的集合,可以提高代碼的可重用性和可維護性。常見的套件包括各種庫和框架,如 lodash、express 等。以下是有關引用套件、自定義套件和常見套件的詳細介紹。
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹TypeScript中的函數,包括其基本結構、如何呼叫函數、函數的參數以及函數的返回值等相關概念。通過本章節,讀者可以學習到如何在TypeScript中使用不同的方式來定義函數,如函數聲明、函數表達式、箭頭函數和匿名函數等。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節旨在介紹 TypeScript 的基本資料型別,包括內建型別、型別轉換、自訂型別、元組、集合、陣列、和字典型別。透過理解和使用這些型別,可以提高代碼的可讀性和可維護性。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節將引導你如何建立一個TypeScript開發環境,這包括安裝Node.js、npm和TypeScript,建立一個TypeScript項目,設置編輯器,以及編寫和編譯TypeScript代碼。在完成這些步驟之後,你將能夠編寫、編譯和運行TypeScript代碼。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
本章節旨在介紹TypeScript的基本語法,包括一般結構、程式進入點、註解以及變數的定義和賦值。這些知識將幫助讀者瞭解TypeScript的基本架構,並且可以開始使用TypeScript進行開發。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
TypeScript是一種由Microsoft開發和維護的開源編程語言。它是JavaScript的超集,主要擴展了JavaScript的語法,增加了靜態類型檢查和其他特性,使得開發大型應用程序更為方便和可靠。
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
Express 是一個流行的 web 框架,使用 JavsScript 實現,執行在 node 環境上,主要用來寫後端應用。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
Thumbnail
上一篇文章分享了 TypeScript 的定義、前端角色定位,如果你不是很確定「TypeScript 是什麼?」、「TypeScript 作為 JavaScript 的超集,在網頁開發扮演怎麼樣的角色?」這兩個問題的答案,建議可以回到上一篇先了解一下。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News