TypeScript 入門自學筆記（一）

2021 年 3 月 16 日
筆記
JS&TS

碼文不易，轉載請帶上本文鏈接，感謝~ //www.cnblogs.com/echoyya/p/14542005.html

TypeScript 介紹

首先介紹一下什麼是TypeScript ，與JavaScript的區別，及優缺點

什麼是TypeScript？

是添加了類型系統的 JavaScript，適用於任何規模的項目。
是一門靜態類型、弱類型的語言。
完全兼容 JavaScript，且不會修改 JavaScript 運行時的特性。
可以編譯為 JavaScript，然後運行在瀏覽器、Node.js 等任何能運行 JavaScript 的環境中。
擁有很多編譯選項，類型檢查的嚴格程度可通過配置文件決定。
可以和 JavaScript 共存，這意味着 JavaScript 項目能夠漸進式的遷移到 TypeScript。
增強了編輯器（IDE）的功能，提供了代碼補全、接口提示、跳轉到定義、代碼重構等能力。
擁有活躍的社區，大多數常用的第三方庫都提供了類型聲明，並且開源免費

JavaScript 的缺點

首先JavaScript 是一門非常靈活的編程語言：

它沒有類型約束，一個變量可能初始化時是字符串，又被賦值為數字。
由於隱式類型轉換的存在，有些變量的類型很難在運行前就確定。
基於原型的面向對象編程，使得原型上的屬性或方法可以在運行時被修改。

TypeScript 的類型系統，在很大程度上彌補了 JavaScript 的缺點。

為什麼使用 TypeScript？

一般來說，在大型項目中，後期維護成本比前期開發成本要多得多，所以團隊規範化尤為重要，包括編碼規範，方法調用規範等，而TS可以通過代碼的方式，約束團隊開發，這樣才有利於後期維護及擴展，從而達到高效的開發

兩個最重要的特性——類型系統、適用於任何規模。

優勢：強大的IDE支持，支持類型檢測，允許為變量指定類型，語法檢測，語法提示

缺點：有一定的學習成本，需要理解接口，泛型，類，枚舉類型等前端可能不是很熟悉的知識點。

接口（Interfaces）：可以用於對“對象的形狀Shape`進行描述

泛型（Generics）：在定義函數，接口或類時，不預先指定具體的類型，而是在使用時在指定類型的一種特性

類（Classes）：定義了一件事物的抽象特點，包括屬性和方法

安裝

若想使用TS進行開發，首先必須要搭建搭建TypeScript開發環境
安裝： npm install -g typescript，全局安裝，可以在任意位置執行tsc

版本：tsc -v

編譯：tsc 文件名.ts

TS 中，使用:為變量指定類型，: 前後的空格可有可無。TS 只會在編譯時對類型進行靜態檢查，如發現有錯誤，編譯時就會報錯。而在運行時，與普通的 JavaScript 文件一樣，不會對類型進行檢查。

編譯時即使報錯，還是會生成編譯結果，仍然可以使用編譯之後的文件，若想在報錯時終止 js文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

TypeScript 的特性

類型系統按照類型檢查的時機分類，可以分為動態類型和靜態類型。

類型系統

TypeScript 是靜態類型

動態類型：是指在運行時才會進行類型檢查，類型錯誤往往會導致運行時錯誤。JavaScript 是一門解釋型語言，沒有編譯階段，所以它是動態類型，以下代碼在運行時才會報錯：

// test.js
let foo = 1;
foo.split(' ');

// TypeError: foo.split is not a function  運行時會報錯（foo.split 不是一個函數）

靜態類型：是指編譯階段就能確定每個變量的類型，類型錯誤往往會導致語法錯誤。TypeScript 在運行前需要先編譯為 JavaScript，而在編譯階段就會進行類型檢查，所以 TypeScript 是靜態類型，以下代碼在編譯階段就會報錯：

// test.ts
let foo: number = 1;
foo.split(' ');

// Property 'split' does not exist on type 'number'. 編譯時報錯（數字沒有 split 方法），無法通過編譯

TypeScript 是弱類型

類型系統按照是否允許隱式類型轉換分類，可以分為強類型和弱類型。

以下代碼在 JS或 TS 中都可以正常運行，運行時數字 1 會被隱式類型轉換為字符串 ‘1’，加號 + 被識別為字符串拼接，所以打印出結果是字符串 ’11’。

console.log(1 + '1');   // 11

TS 是完全兼容 JS的，並不會修改 JS 運行時的特性，所以它們都是弱類型。雖然 TS 不限制加號兩側的類型，但是可以藉助類型系統，以及 ESLint 代碼檢查，來限制加號兩側必須同為數字或同為字符串。會在一定程度上使得 TypeScript 向強類型更近一步了——當然，這種限制是可選的。

這樣的類型系統體現了 TypeScript 的核心設計理念：在完整保留 JavaScript 運行時行為的基礎上，通過引入靜態類型系統來提高代碼的可維護性，減少可能出現的 bug。

原始數據類型基本使用

布爾值、數值、字符串、null、undefined，為變量指定類型，且變量值需與類型一致

let flag: boolean = false
let num: number = 15
let str: string = 'abc'
var a: null = null
var b: undefined = undefined

// 編譯通過

使用構造函數創造的對象不是原始數據類型，事實上 new XXX() 返回的是一個 XXX對象：

let flag:boolean=new Boolean(false)  // Type 'Boolean' is not assignable to type 'boolean'.
let num: number = new Number(15)     // Type 'Number' is not assignable to type 'number'.
let str: string = new String('abc')  // Type 'String' is not assignable to type 'string'.

// 編譯通過

但是可以直接調用 XXX 也可以返回一個 xxx 類型：

  let flag: boolean = Boolean(false)
  let num : number  = Number(15)
  let str : string  = String('abc')
  
  // 編譯通過

數值

使用 number 定義數值類型：

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;  // ES6 中的二進制表示法
let octalLiteral: number = 0o744;    // ES6 中的八進制表示法
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

編譯結果：

var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10; // ES6 中的二進制表示法
var octalLiteral = 484; // ES6 中的八進制表示法
var notANumber = NaN;
var infinityNumber = Infinity;

ES6 中二進制和八進制數值表示法：分別用前綴0b|0B和0o|0O表示。會被編譯為十進制數字。

字符串

使用string定義字符串類型：

let myName: string = 'Echoyya';
let str: string = `Hello, my name is ${myName}.`; // 模板字符串

編譯結果：

var myName = 'Echoyya';
var str = "Hello, my name is " + myName + "."; // 模板字符串

ES6 中模板字符串：增強版的字符串，用反引號（`） 標識 ${expr} 用來在模板字符串中嵌入表達式。

空值及（與Null 和 Undefined的區別）

JavaScript 沒有空值（Void）的概念，在 TS中，用 void 表示沒有任何返回值的函數：

function alertName(): void {
    alert('My name is Tom');
}

然而聲明一個 void 類型的變量沒什麼用，因為只能將其賦值為 undefined 和 null：

let unusable: void = undefined;

Null 和 Undefined

let u: undefined = undefined;
let n: null = null;

區別：undefined 和 null 是所有類型的子類型。也就是說 undefined 類型的變量，可以賦值給所有類型的變量,包括 void 類型：

let num: number = undefined;

let u: undefined;
let str: string = u;
let vo: void= u;

// 編譯通過

而 void 類型的變量不能賦值給其他類型的變量，只能賦值給 void 類型：

let u: void;
let num: number = u;  // Type 'void' is not assignable to type 'number'.
let vo: void = u;     // 編譯通過

任意值

任意值（Any）用來表示允許賦值為任意類型。一個普通類型，在賦值過程中是不被允許改變類型的，any 類型，允許被賦值為任意類型。

let str: string = 'abc';
str = 123;
 
// Type 'number' is not assignable to type 'string'.
  
// -----------------------------------------------------------------
  
let str: any = 'abc';
str = 123;
  
// 編譯通過

任意值可以訪問任意屬性和方法：

let anyThing: any = 'hello';
   
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');
   
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
   
// 編譯通過

未聲明類型的變量：如果變量在聲明時，未指定類型，那麼會被識別為任意值類型：

let something;
something = 'seven';
something = 7;

// 等價於
   
let something: any;
something = 'seven';
something = 7;

類型推論

若未明確指定類型，那麼 TS 會依照類型推論（Type Inference）規則推斷出一個類型。
以下代碼雖然沒有指定類型，但編譯時會報錯：

let data = 'seven';
data = 7;

// Type 'number' is not assignable to type 'string'.

事實上，它等價於：

let data: string = 'seven';
data = 7;

// Type 'number' is not assignable to type 'string'.

TS會在未明確指定類型時推測出一個類型，這就是類型推論。如果定義時未賦值，不管之後是否賦值，都會被推斷成 any 類型：

let data;
data = 'seven';
data = 7;

// 編譯通過

聯合類型

聯合類型（Union Types）表示取值可以為多種類型中的一種，使用 | 分隔每個類型。

let data: string | number;   // 允許 data 可以是 string 或 number 類型，但不能是其他類型
data = 'seven';
data = 7;

data = true;

//  Type 'boolean' is not assignable to type 'string | number'.

訪問聯合類型的屬性或方法：當不確定一個聯合類型的變量到底是哪個類型時，只能訪問此聯合類型中所有類型共有的屬性或方法：

function getLength(something: string | number): number {
    return something.length;
}

// length 不是 string 和 number 的共有屬性，所以會報錯
// Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.

訪問 string 和 number 的共有屬性：

function getString(something: string | number): string {
    return something.toString();
}

聯合類型的變量在被賦值的時候，會根據類型推論的規則推斷出一個類型：

let data: string | number;
data = 'seven';
console.log(data.length); // 5
data = 7;
console.log(data.length); // 編譯時報錯

// Property 'length' does not exist on type 'number'.

line2：data 被推斷為 string，訪問length 屬性不會報錯。

line4：data 被推斷為 number，訪問length 屬性報錯。

對象的類型——接口

在 TS中，使用接口（Interfaces）來定義對象的類型。可用於對類的一部分行為進行抽象以外，也常用於對對象的形狀（Shape）進行描述。

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

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

定義一個接口 Person(接口一般首字母大寫)，定義一個變量 tom 類型是 Person。這樣就約束了 tom 的形狀必須和接口 Person 一致。

確定屬性

確定屬性：賦值時，定義的變量的形狀必須與接口形狀保持一致。變量的屬性比接口少或多屬性都是不允許的：

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

let p1: Person = {  // 缺少 age 屬性
    name: 'Tom'
};

// Type '{ name: string; }' is not assignable to type 'Person'.
// Property 'age' is missing in type '{ name: string; }'.


// -----------------------------------------------------------------


let p2 Person = {  // 多餘 gender 屬性
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可選屬性

可選屬性：是指該屬性可以不存在。有時不需要完全匹配一個接口時，可以用可選屬性，但此時仍然不允許添加未定義的屬性

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

let p1: Person = {  // 編譯通過
    name: 'Tom'
};

let p2: Person = {  // 編譯通過
    name: 'Tom',
    age: 25
};

let p3: Person = {  // 報錯（同上）
    name: 'Tom',
    age: 25,
    gender: 'male'
};

任意屬性

任意屬性：允許一個接口有任意的屬性

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

let p1: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定義了任意屬性的屬性名取 string 類型的值。屬性值為任意值

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

例一：任意屬性的類型是 string，但是可選屬性 age 的值卻是 number，number 不是 string 的子屬性，所以會報錯。

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

let p1: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
 
// Property 'age' of type 'number' is not assignable to string index type 'string
// Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Property 'age' is incompatible with index signature.
// Type 'number' is not assignable to type 'string'

例二：一個接口中只能定義一個任意屬性。如果接口中有多個類型的屬性，可以在任意屬性中使用聯合類型：

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let p1: Person = { // 編譯通過
    name: 'Tom',
    age: 25,
    gender: 'male',
    year:2021
};

只讀屬性

對象中的一些字段只能在創建時被賦值，可以使用 **readonly **定義只讀屬性：

例一：使用 readonly 定義的屬性 id 初始化後，又被重新賦值，所以會報錯。

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

let p1: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

p1.id = 9527;

// Cannot assign to 'id' because it is a read-only property.

例二：只讀的約束存在於第一次給對象賦值的時候，而不是第一次給只讀屬性賦值時：

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

let p2: Person = {  // 第一次給對象賦值
    name: 'Tom',
    gender: 'male'
};

p2.id = 89757;

// Property 'id' is missing in type '{ name: string; gender: string; }' but required in type 'Person'  對 p2 賦值時，沒有給 id 賦值

// Cannot assign to 'id' because it is a read-only property.  id 是只讀屬性

數組的類型

在 TS 中，有多種定義數組類型的方式。

類型 + 方括號表示法

最簡單的方法是使用類型 + 方括號來表示數組：

let arr: number[] = [1, 1, 2];    // 數組元素中不允許出現其他的類型

let arr1: number[] = [1, '1', 2]; // 報錯：Type 'string' is not assignable to type 'number'.

數組的一些方法的參數也會根據數組在定義時約定的類型進行限制：

let arr2: number[] = [1, 1, 2, 3, 5];

arr2.push('8'); 

//報錯：Argument of type '"8"' is not assignable to parameter of type 'number'.

數組泛型

使用數組泛型（Array Generic） Array<elemType> 來表示數組：

let arr3: Array<number> = [1, 1, 2, 3, 5];

泛型涉及內容較多，後期有時間會在整理一篇文章，敬請關注！

用接口表示數組

之前介紹了使用接口表示對象的類型，同樣接口也可以用來描述數組：

interface NumberArray {
    [index: number]: number;
}
let arr: NumberArray = [1, 1, 2, 3, 5];

NumberArray 表示：索引的類型是數字，值的類型也是數字，這樣便可以表示一個數字類型的數組，雖然接口也可以描述數組，但是一般不會這麼做，因為這種方式較複雜。有一例外，就是常用來表示類數組。

類數組

類數組（Array-like Object）不是數組類型，比如 arguments，實際上是一個類數組，不能用普通數組的方式來描述，而應該用接口：

function sum() {
    let args: number[] = arguments;
}

// 報錯：Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

接口描述類數組：除了約束索引的類型是數字，值的類型也必須是數字之外，也約束了它還有 length 和 callee 兩個屬性。

function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

而事實上常用的類數組都有自己的接口定義，如 IArguments, NodeList, HTMLCollection 等：

function sum() {
    let args: IArguments = arguments;
}

//其中 IArguments 是 TypeScript 中定義好了的類型，它實際上就是：
interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

any 在數組中的應用

一個比較常見的做法是，用 any 表示數組中允許出現任意類型：

let list: any[] = ['Echoyya', 25, { website: '//www.cnblogs.com/echoyya/' }, false];

後續筆記敬請期待~~~

Tags: JS&TS