# TypeScript

## restart TS server
https://blog.csdn.net/YopenLang/article/details/127120638

https://www.youtube.com/watch?v=GinkGJZBHIY&list=WL&index=88&ab_channel=%E5%B8%83%E9%AD%AF%E6%96%AF%E5%89%8D%E7%AB%AF
布魯斯前端建議說不用特別寫一個變數的type，那因為正常如果寫

let boo:boolean =true

boo = 1 // 就會報錯

那如果我寫以下報錯嗎？會，ts會在第一次賦值時，自動將變數判別型別。

let boo = true

boo =1 //一樣會報錯

以下類型宣告有著相同作用：
const list:number[]
const list:Array<number>

### 泛型

將類型先宣告成變數可用以下，之後再做賦值，先宣告一個類型的變量T，因為我希望傳入的值與返回的值是同一種類型(就不用都寫any，反而有寫等於沒寫)，可以說function identity的型別就是泛型：

    function identity<T>(arg: T): T {
    return arg;
}

泛型參考：
https://www.tslang.cn/docs/handbook/generics.html

一個蠻好的寫法：


type interface 差別

### Extends & implements

extends有幾個點要注意
interface和class都可以說使用extend去繼承，但是interface可以多重繼承，class不行，class要使用多重繼承，要使用implements和Mixins

implement通常用在實踐抽象的interface，並且在implement的過程，就會具體化？

### TypeScript/Javascript的特殊運算符

https://segmentfault.com/a/1190000023943952

### ?. 運算符(js也有)

可選鏈(Optional Chaining)，可以寫 a?.b?.c，要這麼使用的原因是例如，假設a有的狀況下是object有的狀況又不會有值得話，程式會直接跳error，但若我們希望程式不要停掉，就告訴我undefined就好，就可以這樣使用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

### ?? 空值合併運算符

跟```||```有點像，差別是```??```是當值為null 或undefined的時候返回另一邊，```||```是會判斷直是否為falsy值

### ! 非空斷言操作符

ts中可以幫助排除null和 undefined的變數
[參考資料](https://juejin.cn/post/6844904149897723917)

### unknown VS any
unknown 不能直接用
any可以直接用

## 開始使用typescript(ts-config)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "ES2018", // compile 後要支援到的 ECMAScript 版本
    "module": "commonjs", // compile 後程式碼會用 commonjs 來處理模組的匯出匯入
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false, // 是否允許匯入 js 檔，會影響到 include 時解析的副檔名是否包含（.js 和 .jsx）
    "declaration": true,
    ”noEmitOnError“: true,

    // 如果沒設定會套用預設值（TS 自動判斷）
    // 有「機會」導致 src 的資料夾也一起被 build 到 dist 資料夾中
    // 例如 TS 自動把 rootDir 判斷為 { "rootDir": "." }
    "rootDir": "src",

    // 預設 tsc 會直接把編譯好的 js 檔放在與 ts 檔相同的路徑，但這樣檔案會很散亂，因此全部放到 dist
    "outDir": "dist",

    /* Strict Type-Checking Options */
    "strict": true,

    /* Additional Checks */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true, // 確保 switch case 都會有 break 或 return

    /* Module Resolution Options */
    "baseUrl": "./", // 匯入模組時，路徑可以使用從 baseUrl 開始，而不需要 ./../ 這種寫法
    "paths": {
      "@": ["src"] // 將 @ map 到 src
    },
    "esModuleInterop": false,

    /* Source Map Options */
    "sourceMap": true,

    /* Advanced Options */
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true // 確保檔案的大小寫一致，避免某些作業系統對大小寫不敏感
  },
  "include": ["src/**/*.ts"], // compiler 要做用在哪些檔案上

參考：https://pjchender.dev/typescript/tsconfig-and-tsc/

*ts compiler也可以自由的編譯成想要的js版本(es5前是用require es6後用import)

`tsc --init`

`tsc --noEmit`

noEmitOnError:true

js模塊 https://www.freecodecamp.org/news/modules-in-javascript/