0%

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

前提情要

筆者的系列文章: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就會在chromeconsole頁籤中可以看到addNumbers後的結果

結論

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