Eugene's Blog
0%

[Typescript101]Typescript教學系列:設定Typescript專案

發表於 更新於 分類於 閱讀次數：
2.2k 4 分鐘

前情提要

筆者的系列文章:Typescript101，上一篇介紹文中提到的簡單地hello.ts檔案，透過tsc指令將其編譯成javascript檔案，算滿簡單易懂的，這次則建立typescript專案，真正在撰寫應用程式時透過這種方式居多，不妨跟著筆者實作看看吧。

內容

建立應用程式資料夾

第一步驟先建立應用程式資料夾

1
2
mkdir ts01
cd ts01

透過tsc指令初始化專案

接著透過tsc指令初始化專案

1
2
3
4
5
6
7
8
9
10
11
12
tsc --init
# 回應結果
Created a new tsconfig.json with:
                                                                                                                     TS
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true

You can learn more at https://aka.ms/tsconfig.json

就用Visual Studio Code開啟typescript專案吧

1
code .

新增一個module01.ts檔案

接著該專案資料夾中，只會有一個tsconfig.json，接著就建立一個新的module01.ts檔案

1
touch module01.ts

接著填寫其內容，筆者這邊使用Microsoft Learn中的教學範例

1
2
3
4
function addNumbers(x, y) {
  return x + y;
}
console.log(addNumbers(3, 6));

基本上這個檔案透過IDE內建的Typescript檢查其類型

變更tsconfig.json設定並編譯

筆者這邊就照著教學變更其設定，主要變更設定為

  • target: 設定為 ES2015，預設為 ES2016
  • outDir: 設定為 build

變更tsconfig.json檔案後，必須於command line中下tsc，使重設專案選項

透過tsc指令，以及tsconfig.json的編譯設定，編譯module01.ts吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 專案已經有tsconfig.json了，只要下tsc指令即可編譯專案資料夾中的所有ts檔案
# ，並且放置outDir指定的build資料夾中
tsc
# 編譯結果
module01.ts:1:21 - error TS7006: Parameter 'x' implicitly has an 'any' type.

1 function addNumbers(x, y) {
                      ~

module01.ts:1:24 - error TS7006: Parameter 'y' implicitly has an 'any' type.

1 function addNumbers(x, y) {
                         ~

Found 2 errors in the same file, starting at: module01.ts:1

就照著這個錯誤提示，我們就修正它吧

1
2
3
4
function addNumbers(x: number, y: number) {
  return x + y;
}
console.log(addNumbers(3, 6));

編譯成功後會在build資料夾中出現其module01.js檔案

撰寫Html頁面，載入編譯後的js檔案

首先先建立module01.html

1
touch module01.html

編寫內容並載入module01.js檔案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test JavaScript</title>
</head>

<body>
    <h1>Test JavaScript</h1>
    <p id="date"></p>
    <p>This page calls the script module01.js and is used for testing.</p>
    <script src="./build/module01.js"></script>
</body>

</html>

開啟module01.html就會在chrome的console頁籤中可以看到addNumbers後的結果

結論

藉由這個範例，在html+javascript網頁系統中使用Typescript開發，多麼美好的一件事情，下一篇就介紹其Typescript的型別系統了，這篇就到這邊了，下次見。

相關文章