# Essential TypeScript

## CH1&2

## News
- We are pleased to learn that dhh remove TS on Turbo 8
- https://github.com/hotwired/turbo/pull/971/files
- https://github.com/hotwired/turbo/pull/972

## History
- Version 5.2.2
- TypeScript 0.8(2012) 靜態類型檢查、介面、類別、泛型和模組
- TypeScript 1.0(2014)
- (Typescript(ES6(ES5))) 超集合

## Init
- Install node, npm(yarn), typescript
- `npm install -g typescript@latest`
- `npm init --save`

// pagkage.json
{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

- Install VScode extension:

- Add a `tsconfig.json`
- tsc --init

{
  "compilerOptions": {
    "target": "ES2020",
    "outDir": "./dist",
    "rootDir": "./src",
  }
}

## TypeScript vs JavaScript

### 增進生產力
- 型別type
- TypeScript - Structuraly Type
- JavaScript - Duck Type

type Profile = {
    first_name: string;
    last_name: string;
}

- 介面interface
- 可以合併(相較於type)

interface Profile {
    first_name: string;
    last_name: string;
}

- 泛型generic type
- 命名規則
- T 指type or template
- U/V
- Label/Value/Input

class Container<T> {
    private value: T;

    constructor(value: T) {
        this.value = value;
    }

    getValue(): T {
        return this.value;
    }
}

let container1 = new Container<number>(42);
let container2 = new Container<string>("Hello, TypeScript");

- 類別class
- public/private/protected
- interface
- generic

class Student implements Profile {
    first_name: string;
    last_name: string;
    constructor() {};
}

- .ts -> (tsc) -> .js

### 產能提升的陷阱
- 我們又回到了Java/C++/C#的世界 !?

- 學習曲線： 如果你和團隊成員之前沒有使用 TypeScript，學習 TypeScript 的型別系統和工具鏈可能需要一些時間。初學者可能會感到困惑，需要時間來適應新的概念和語法。

- 型別定義複雜性： 在複雜的應用程式中，型別定義可能會變得非常複雜，尤其是當涉及到高度巢狀的資料結構、複雜的泛型和聯合型別時。維護這些型別定義可能會變得困難。

- 型別註釋冗長： 在大型專案中，需要對大量的變數、函數和物件進行型別註釋，這可能會導致程式碼變得冗長。在某些情況下，過度的型別註釋可能會增加程式碼的複雜性。

- 型別安全性與彈性的平衡： TypeScript 的型別系統可以強化型別安全性，但有時也可能過於限制彈性。在一些情況下，需要做出權衡，以便在保持型別安全性的同時實現所需的功能。

- 第三方庫的型別支援： 不是所有的第三方 JavaScript 庫都有完善的 TypeScript 型別定義。在使用這些庫時，你可能需要自己撰寫或尋找社群維護的型別定義檔案，這可能會花費一些額外的工作。

- 編譯時間增加： 在使用 TypeScript 的專案中，編譯時間可能會比純 JavaScript 專案更長，特別是在大型專案中。這可能會影響開發工作流程的速度。

- 團隊協作挑戰： 如果你的團隊中的一些成員不熟悉 TypeScript，可能需要花時間培訓他們或確保他們能夠有效地協作。維護一致的型別註釋和程式碼風格規範也可能是一個挑戰。

### 相容於舊版本的JavaScript
- 能編譯出任何版本
- 無需更改現有 JavaScript 代碼： 你可以將現有的 JavaScript 代碼（包括 ES5 和 ES3）直接用作 TypeScript 代碼，而無需對其進行任何更改。TypeScript 會將 JavaScript 代碼視為有效的。

- 逐漸引入類型： TypeScript 允許你在不同的變數、函數和物件上添加類型註釋，這樣你可以逐漸引入類型檢查，而不必一次性更改整個程式碼庫。這種漸進式的過渡方式使得將 TypeScript 引入現有 JavaScript 項目變得更容易。

- 選擇性的類型： TypeScript 的類型註釋是選擇性的，這意味著你可以只為那些你認為需要類型檢查的部分添加類型註釋，而對於其他部分保持不變。

- JavaScript 函數的引入： TypeScript 允許你使用 JavaScript 函數庫，而無需添加類型註釋。你可以通過使用類型定義文件（.d.ts）來告訴 TypeScript 有關這些庫的類型信息。

- ES6+ 功能支持： TypeScript 支持 ES6、ES7 等新版本 JavaScript 的功能，這些功能包括箭頭函數()=>{}、模板字符串`${}`、解構賦值`...`等。