---
# System prepended metadata

title: TypeScript 學習心得
tags: [ts, TypeScript, CLI]

---

TypeScript 學習心得
===
###### tags: `TypeScript` `ts`


---

tsc 安裝指令輸入
```bash=
npm install -g typescript

// 測試是否安裝成功
tsc --version
```
安裝後就能用 tsc 編譯了 .ts => .js

vscode  輸入程式碼到 helloworld.ts
```typescript=
let message: string = 'Hello, World!';
console.log(message);
```
執行編譯指令
```bash=
tsc helloworld.ts
```
會產生一個 helloworld.js 裡面是 jave script
TypeScript 提供靜態編譯 可以及早找出程式問題 還提供一些進階語法 例如：
```typescript=
let message: string = 'Hello, World!';
```
給參數 message 指定為 string 類型

# 編譯報錯
```bash=
../node_modules/@types/node/globals.d.ts:72:13 - error TS2403: Subsequent variable declarations must have the same type.  Variable 'AbortSignal' must be of type '{ new (): AbortSignal; prototype: AbortSignal; abort(reason?: any): AbortSignal; timeout(milliseconds: number): AbortSignal; }', but here has type '{ new (): AbortSignal; prototype: AbortSignal; timeout(milliseconds: number): AbortSignal; }'.

72 declare var AbortSignal: {
               ~~~~~~~~~~~

  ../../../Users/David/AppData/Roaming/npm/node_modules/typescript/lib/lib.dom.d.ts:2335:13
    2335 declare var AbortSignal: {
                     ~~~~~~~~~~~
    'AbortSignal' was also declared here.


Found 1 error in ../node_modules/@types/node/globals.d.ts:72
```
解決方法，執行下面指令:
```bash=
npm i -d @types/node
```
# ts-node 是甚麼?
可以直接執行 TypeScript 指令檔
* 基本上你可以把 ts-node 看作是 node.js + tsc

ts-node 需要依賴 typescript(tsc)
一般全域安裝為:
```bash=
npm install -g typescript ts-node
```
如果已經安裝 typescript(tsc)，可以只安裝 ts-node
```bash=
npm install -g ts-node
```
如果要透過 VSCode 進行中斷偵錯
要安裝到本地專案的 node_modules 中
```bash=
npm install typescript --save-dev
npm install ts-node --save-dev
```
launch.json 設定如下:
```json=
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Current TS File",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/ts-node/dist/bin.js",
      "args": ["src/index.ts"],
      "cwd": "${workspaceRoot}"
    }
  ]
}

```

# 建立 tsconfig.json
執行下面指令，會產生 tsconfig.json 檔案
```bash=
tsc --init
```
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用

# 建立 package.json
由於 TypeScript 會編譯成 JavaScript 後來執行
所以也需要設定一下 package.json
```bash=
npm init
```
內容我已經設定好了，之後新建 JavaScript 專案可以參考使用

# 建立 tsconfig.build.json
tsconfig.build.json 是 tsconfig.json 的擴充
需要跟 tsconfig.json 同一個目錄
內容主要是編譯相關，例如: 編譯排除特定目錄等等
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用

# 建立 jest.config.js
jest 預設不需要設定
但是也不會檢查 .ts
而 ts-jest 才會檢查 .ts
## 安裝 ts-jest
```bash=
npm install -D jest ts-jest @types/jest
```
要使用 ts-jest 就必須設定 jest.config.js
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用
## 單元測試指令
```bash=
npm test
```

# 安裝 prettier
主要是提供格式化文件的另一個選擇
可以自己客製化
```bash=
npm install --save-dev --save-exact prettier
```
建立 .prettierrc.json 設定檔案與 .prettierignore 忽略檔案
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用

# 安裝 ESLint
主要是做靜態分析找出錯誤
可以自己客製化
```bash=
npm install eslint -g
```
建立 .eslintrc.js
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用

# .editorconfig
主要是要保持程式碼風格一致
內容我已經設定好了，之後新建 TypeScript 專案可以參考使用

## 參考資料
[【跟山地人学TypeScript系列教程】01课.5分钟上手TypeScript](https://www.youtube.com/watch?v=Y_fLXdgWwjM)
[5分钟上手TypeScript](https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html)
