資料庫軟考：計算機硬體系統的組成、CPU的組成、進位制轉換、儲存器與匯流排、輸入輸出控制

阿新 • • 發佈：2022-04-17

參考：

0 定義

Typed JavaScript at Any Scale
添加了型別系統的 JavaScript，適用於任何規模的專案。

特點：
型別系統、適用於任何規模。

2020-08：TypeScript 釋出了 4.0 版本。
2020-09：Vue 釋出了 3.0 版本，官方支援 TypeScript。

1 Typesript 優缺點、與JS對比

1.0 優點

程式碼的可讀性和可維護性（會提醒值的型別）
在編譯階段就發現大部分錯誤，避免了很多線上bug
增強了編輯器和 IDE 的功能，包括程式碼補全、介面提示、跳轉到定義、重構等
TypeScript 還可以和 JavaScript 共存

1.1 缺點

有一定的學習成本，需要理解介面（Interfaces）、泛型（Generics）、類（Classes）、列舉型別（Enums）等
一些JavaScript庫需要相容，提供宣告檔案，像vue2，底層對ts的相容就不是很好。
ts編譯是需要時間的，這就意味著專案大了以後，開發環境啟動和生產環境打包的速度就成了考驗

1.2 與JS對比

都是弱型別
TypeScript 是靜態型別

	TS	JS
強弱型別（是否允許隱式型別轉換）	弱型別	弱型別
靜態/動態型別	靜態	動態

TypeScript支援所有原始資料型別，ES6不支援
變數作用域：
TypeScript有3個作用域：全域性作用域、類作用域、區域性作用域。
ES6有2個作用域：全域性作用域、區域性作用域。
TypeScript是一種免費的開源程式語言，由Microsoft開發和維護。ES6是ECMAScript（ES）的一個版本，它是ECMA 國際標準化的指令碼語言規範。
箭頭函式：在typescript中=>不僅可以是箭頭函式，還可以是函式型別定義

type Operator = (x: number, y: number) => number;

2 Typescript 基礎使用

2.0 為引數提供型別描述

// InputType描述了一個包含show方法的型別
type InputType = {
  show: ()=>void;
};
showInput(input: InputType);
//說明input這個引數，在showInput函式裡會呼叫show這個方法。如果傳個字串進去的話，是會報錯的，因為沒有show這個方法。

2.1 值型別

在TypeScript中，所有的值都具有強制型別。值的型別化是TypeScript區別於JavaScript最顯著的特徵
（JavaScript的型別資訊是在編譯階段由編譯器判定）

型別	語法形式
數字型別	number
布林型別	boolean
字串型別	string
符號型別	symbol
Void型別	void
Null型別	null
Undefined型別	undefined
Never型別	never
任意型別	any
陣列型別	T[]
元組型別	[T0, T1, ...]
列舉型別	enum T { ... }
函式型別	(p1: T1, p2: T2, ...) => T
類型別	T
構造器型別	new (p1: T1, p2: T2, ...) => R
物件型別	{ ... } 或 interface T { ... }
聯合型別	`T1
交叉型別	T1 & T2 & ...

2.2 聯合型別

聯合型別（Union Types）表示取值可以為多種型別中的一種。
用|分隔不同型別

2.3 介面 Interfaces

使用介面（Interfaces）來定義物件的型別。
在面嚮物件語言中，介面是對行為的抽象，具體如何行動需要由類（classes）去實現（implement）。

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

//定義了一個介面 Person，接著定義了一個變數 tom，它的型別是 Person。

定義的變數比介面少了一些屬性是不允許的

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

2.3.0 可選屬性

如果不需要完全匹配一個形狀，那麼可以用可選屬性：
(但仍然不允許新增未定義的屬性)

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

2.3.1 任意屬性

PS:一旦定義了任意屬性，那麼確定屬性和可選屬性的型別都必須是它的型別的子集：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}
// age戶型

2.3.2 只讀屬性：只允許建立時賦值

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

2.4 陣列

幾種宣告陣列的方式

型別 + 方括號： number[]
陣列泛型：let fibonacci: Array = [1, 1, 2, 3, 5];
（陣列泛型：https://ts.xcatliu.com/advanced/generics.html）
用介面表示陣列（不過一般不會這麼做）
類陣列：arguments，其實不是陣列型別
用 any 表示陣列中允許出現任意型別：
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];

2.5 函式

不允許輸入多餘/缺少的引數
用介面定義函式的形狀
可選引數：可選引數後面不允許再出現必需引數了

2.6 類型別名

感覺是有利於程式碼可讀性

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}