【視頻鏈接】尚硅谷TypeScript教程（李立超老師TS新課）

1. 類型

• typescript對(duì)類型進(jìn)行強(qiáng)制的管理

這里只記錄typescript特有的

1.1 | 聯(lián)合類型

let a : number | string //變量a可以是number也可以是string

// 數(shù)組元素可以是聯(lián)合類型中的任意一種
let arr: (number|string|boolean)[] = [1,2,3]arr[0] = '1'
arr[2] = true

1.2 字面量類型

• 可以限制變量的取值范圍

// c的類型只能是10，不是number
let c : 10c = 11 // 報(bào)錯(cuò)：Type  11  is not assignable to type  10 

應(yīng)用：d的值被限定在兩個(gè)字符串

let d : 'man' | 'woman'd = "man"
d = "woman"

1.3 any 任意類型

• any類型的變量給以賦值給任意變量，又增加了變量類型的不確定性，不建議使用

let b : any 
b = 10
b = "字符串"

1.4 unkown 類型

未知類型，使用前需要typeof做類型判斷

• 錯(cuò)誤示例

let e : number = 10
let f : unknown = 10e = f //報(bào)錯(cuò)：Type  unknown  is not assignable to type  number 

• 正確用法

let e : number = 10
let f : unknown = 10if (typeof f === "number"){e = f
}

1.5 as 類型斷言

假如又一個(gè)變量a，解析器不知道是什么類型，但我們確定a的類型為某個(gè)類型

• 下面代碼不會(huì)報(bào)錯(cuò)，但用法是錯(cuò)的，如果要斷言a是數(shù)字那程序員一定要確保a一定會(huì)是number

let a : unknown = 'abcd'
let b : number b = a as number
// 另一種斷言的寫法
b = <number>a

• 編譯后的js文件內(nèi)容：
  很明顯因?yàn)閿嘌?#xff0c;b的類型成為了string，會(huì)導(dǎo)致未知的錯(cuò)誤

let a = 'abcd';
let b;
b = a;

1.6 object 對(duì)象類型

• 示例中object屬性并沒有對(duì)變量做很好的限制，一般不使用

object的范圍太廣泛，示例中a可以是對(duì)象也可以是函數(shù)

let a : objecta = {name:'jack',age:18}a = function (a:number,b:number) : number{return a + b
}

1.7 { } 對(duì)象類型

• 很明顯{}和object對(duì)類型無法限制

let a : {}a = {name:'jack',age:18}a = function (a:number,b:number) : number{return a + b

• {} 正確用法

let a : {name: string, age: number}a = {name: 'jack', age: 18}

1.8 ？ 對(duì)象中的可選屬性

• 帶有?的屬性可有可無

let a : {name: string, age?: number}a = {name: 'jack', age: 18}a = {name: 'jack'}

1.9 對(duì)象中的任意屬性

• [b:string]:any 表示屬性名是字符串，值是任意類型
• [b:string]:string 表示屬性名是字符串，值也是字符串

// a對(duì)象中只要有name：string屬性，其他都無所謂
let a : {name: string, [b:string]:any}a = {name: 'jack', age: 18, sex: true}a = {name: 'jack'}

// 報(bào)錯(cuò)，因?yàn)閕d屬性的值是number類型，所以b屬性必須要包含number屬性
let e : {id: number, [b:string]:  string }

// 修改為：
let e : {id: number, [b:string]:  string | number}

1.10 & 同時(shí)滿足條件

let a : {id: number} & {name:string }a = {id: 1, name: "a"}

• 不能用于 []

1.11 function 函數(shù)的類型限制

• 對(duì)函數(shù)的類型限制就是限制參數(shù)的類型和返回值的類型

let b : (a: number, b: string) => booleanb = function (a: number, b: string):boolean{return true
}function c (a: number, b: string) : boolean{return true
}

1.12 void 空值

• void用于函數(shù)的返回值類型，沒有return語句或者返回undefined

function fun(): void{return undefined
}

1.13 nerver 沒有返回值

• 不能return，一般用于拋出異常

function fun(): never{throw new Error('報(bào)錯(cuò)')
}

1.14 Array 數(shù)組

• 第一種方式

let a : string[]a = ['a', 'b']

• 第二種方式

let b : Array<String>b = ['a', 'b']

• 數(shù)組元素是對(duì)象

let c : Array<{[a:string]:number}>c = [{a:1}, {b:2}]

• 元素是對(duì)象并且對(duì)象中屬性的值不是同一種類型

let d : Array<{id: number, [b:string]:string | number}>d = [{id:1,name:'jack'}]

1.15 emun 枚舉

• 屬性的值在確定的范圍以內(nèi)，建議使用emun類型

enum Gender{MALE = 1,FEMALE = 2,OTHER = 3
}
let a : {id:number,name:string,gender:Gender}a = {id:1,name:"zhangsan",gender:Gender.FEMALE
}if(a.gender == Gender.FEMALE){console.log("女")
}

1.16 type 類型別名

• a就是string類型的別名，在后續(xù)的代碼中用a可以代替string使用

type a = string;let b : ab = "hello"

• 和字面量類型配合使用，可以用于限制變量的值，感覺和枚舉有相似的地方

type c = 1 | 2 | 3let d : c // d的類型就是 1 | 2 | 3d = 1

2. 類

2.1 類的屬性和方法

class Person{// 自動(dòng)推斷類型name = 'jack'// 指定類型age:number = 18// 只讀類型readonly gender = '男'// 靜態(tài)屬性static nationality = 'China'// 靜態(tài)只讀屬性static readonly eye: boolean = true// 方法sayHello(){console.log('hello');}// 靜態(tài)方法static sayNationality(){console.log(Person.nationality);}
}// Person類的實(shí)例對(duì)象
const person = new Person()
// 通過實(shí)例對(duì)象訪問類中的屬性
console.log(person.name)
// 修改實(shí)例對(duì)象的屬性
person.name = 'tom'
console.log(person.name)
// 靜態(tài)屬性只能通過類名直接訪問，實(shí)例對(duì)象無法訪問
console.log(Person.nationality);
// 通過實(shí)例對(duì)象調(diào)用類中的方法
person.sayHello()
// 靜態(tài)方法需要類直接調(diào)用
Person.sayNationality()

2.2 構(gòu)造函數(shù)

類中的this指向?qū)嵗龑?duì)象

class dog{name; age// 構(gòu)造函數(shù)constructor( name: string, age: number) {this.name = namethis.age = age}eat(){console.log(this.name+'在吃飯');}
}
// 實(shí)例化dog類，myDog是實(shí)例對(duì)象
const myDog = new dog('小黑',3)
const yourDog = new dog('小白',4)myDog.eat()
console.log(yourDog.name + yourDog.age+'歲了');// 小黑在吃飯
// 小白4歲了

• 構(gòu)造函數(shù)沒有傳值的，屬性必須有初始值

    class StringLength{len:number = -1constructor() {}}

2.3 繼承和super

• super：調(diào)用父類中的方法或者構(gòu)造函數(shù)

class Animal{nameconstructor(name:string) {this.name = name}say(){console.log("動(dòng)物在叫");}
}
// extends:繼承的關(guān)鍵字
class Dog extends Animal{ageconstructor(name:string,age: number) {// 調(diào)用父類的構(gòu)造函數(shù),將屬性值傳入父類super(name);// 子類新增的屬性this.age = age}// 重寫父類中的方法say(){super.say()console.log("汪汪汪");}// 子類新增的方法run(){console.log(this.name + '在奔跑');}}const myDog = new Dog('小黑',3);myDog.run()
myDog.say()// 小黑在奔跑
// 動(dòng)物在叫
// 汪汪汪

2.4 abstract ：抽象類

1. 抽象類中可以有自己的屬性和方法
2. 抽象類不能被實(shí)例化
3. 抽象類中定義的抽象方法，子類必須實(shí)現(xiàn)

    // abstract:定義抽象類和抽象類中的抽象方法abstract class Animal{nameconstructor(name: string) {this.name = name}// 抽象方法：必須定義在抽象類中，并且沒有方法體，子類必須實(shí)現(xiàn)父類中的抽象方法abstract say():voiddogOld(age:number){console.log(this.name+age+'歲了');}}class Dog extends Animal{ageconstructor(name:string,age:number) {super(name);this.age = age}say(){console.log(this.name+'汪汪汪的叫');super.dogOld(this.age)}}const dog = new Dog("小黑",3)dog.say()

2.5 interface ： 抽象類

1. 用于類型限制

interface myInterData{name: stringage: numbergender?: boolean
}const myData : myInterData = {name : '小黑',age : 3
}

2. 用于類

interface classInterface{name : stringsay():void
}
// 接口的實(shí)現(xiàn)類必須實(shí)現(xiàn)接口中的所有屬性和方法
class Dog implements classInterface{name: string;constructor(name: string) {this.name = name}say(): void {console.log(this.name+'汪汪汪的叫');}
}

2.6 屬性的訪問權(quán)限

1. 在不寫訪問權(quán)限時(shí)，默認(rèn)訪問權(quán)限時(shí)public

// 屬性默認(rèn)訪問權(quán)限是：public 可以在任意的地方修改訪問
class A {public name:stringconstructor(name:string) {this.name = name}
}const a = new A('小黑')
a.name = '小白';

2. privata：私有的，只能在類的內(nèi)部訪問
   • 要使用get和set的語法糖，屬性名前面加_

// 屬性的訪問權(quán)限修改為privata，只有在當(dāng)前類的內(nèi)部才能訪問class B{private _name:stringconstructor(name:string) {this._name = name}// 在類的內(nèi)部寫一個(gè)獲取name屬性的方法getName():string{return this._name}// 下面的寫法是上面寫法的語法糖get name():string{return this._name}set name(value:string){this._name = value}}const b = new B('小白')console.log(b.getName()); // 調(diào)用的是  getName()b.name = '小黑'  // 調(diào)用的是 set nameconsole.log(b.name); // 調(diào)用的是 get name()

3. 構(gòu)造函數(shù)的語法糖（不能使用set和get的語法糖）
   • 只能自己定義getter和setter方法

    class C{constructor(private name:string) {}getName():string{return this.name}setName(value:string){this.name = value}        }

2.7 泛型

• 在定義函數(shù)或者類時(shí)遇到類型不明確的可以使用泛型
• 泛型寫在函數(shù)名或者類名的后面使用尖括號(hào)<T,K>

1. 類型推斷，指定泛型的類型

    function fun1<T>(a:T):T{return a}fun1<string>("abc") // 指定泛型的類型fun1(10) // 不指定泛型時(shí)什么類型，TS從參數(shù)推斷類型    

2. 繼承的泛型
   此例中特殊的是length這個(gè)屬性，正好字符串有這個(gè)屬性，一般傳入的就是子類

    interface GetLength {length : number}// 泛型K繼承了接口 GetLength，a參數(shù)只能傳入 GetLength 的子類 或者有l(wèi)ength屬性的類型function  fun<K extends GetLength>(a: K):number{return a.length}console.log(fun('hello'));

3. Ts中特有的

    interface GetLength {length : number}// 泛型K繼承了接口 GetLength，a參數(shù)只能傳入 GetLength 的子類 或者有l(wèi)ength屬性的類型function  fun<K extends GetLength>(a: K):number{return a.length}// 在TS中特有的，接口可以作為類型限制使用const b: GetLength = { length:10 }console.log(fun(b));  // 10

通過命令行編譯ts文件

tsc 文件名.ts

• 設(shè)置tsconfig.json文件后，只需要執(zhí)行tsc命令就可以編譯ts文件，tsc -w命令可以在ts文件修改后自動(dòng)編譯ts文件

{"compilerOptions": {"module": "es2015","target": "es2015",// 使用嚴(yán)格的ts語法檢查"strict": true,// 編譯后的js文件存放目錄"outDir": "./dist"},// tsc命令執(zhí)行時(shí)要編譯的文件"include": ["./src/**/*"],
}

• 將編譯后的.js文件引入到.html文件的<script>標(biāo)簽中

<script src="文件路徑/文件名.js"></script>

尚硅谷官方資料

第一章 快速入門

0、TypeScript簡(jiǎn)介

1. TypeScript是JavaScript的超集。
2. 它對(duì)JS進(jìn)行了擴(kuò)展，向JS中引入了類型的概念，并添加了許多新的特性。
3. TS代碼需要通過編譯器編譯為JS，然后再交由JS解析器執(zhí)行。
4. TS完全兼容JS，換言之，任何的JS代碼都可以直接當(dāng)成JS使用。
5. 相較于JS而言，TS擁有了靜態(tài)類型，更加嚴(yán)格的語法，更強(qiáng)大的功能；TS可以在代碼執(zhí)行前就完成代碼的檢查，減小了運(yùn)行時(shí)異常的出現(xiàn)的幾率；TS代碼可以編譯為任意版本的JS代碼，可有效解決不同JS運(yùn)行環(huán)境的兼容問題；同樣的功能，TS的代碼量要大于JS，但由于TS的代碼結(jié)構(gòu)更加清晰，變量類型更加明確，在后期代碼的維護(hù)中TS卻遠(yuǎn)遠(yuǎn)勝于JS。

1、TypeScript 開發(fā)環(huán)境搭建

1. 下載Node.js

   • 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
   • 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

2. 安裝Node.js

3. 使用npm全局安裝typescript

   • 進(jìn)入命令行
   • 輸入：npm i -g typescript

4. 創(chuàng)建一個(gè)ts文件

5. 使用tsc對(duì)ts文件進(jìn)行編譯

   • 進(jìn)入命令行

   • 進(jìn)入ts文件所在目錄

   • 執(zhí)行命令：tsc xxx.ts

2、基本類型

• 類型聲明

  • 類型聲明是TS非常重要的一個(gè)特點(diǎn)

  • 通過類型聲明可以指定TS中變量（參數(shù)、形參）的類型

  • 指定類型后，當(dāng)為變量賦值時(shí)，TS編譯器會(huì)自動(dòng)檢查值是否符合類型聲明，符合則賦值，否則報(bào)錯(cuò)

  • 簡(jiǎn)而言之，類型聲明給變量設(shè)置了類型，使得變量只能存儲(chǔ)某種類型的值

  • 語法：

      let 變量: 類型;let 變量: 類型 = 值;function fn(參數(shù): 類型, 參數(shù): 類型): 類型{...}
    

• 自動(dòng)類型判斷

  • TS擁有自動(dòng)的類型判斷機(jī)制
  • 當(dāng)對(duì)變量的聲明和賦值是同時(shí)進(jìn)行的，TS編譯器會(huì)自動(dòng)判斷變量的類型
  • 所以如果你的變量的聲明和賦值時(shí)同時(shí)進(jìn)行的，可以省略掉類型聲明

• 類型：

  類型	例子	描述
  number	1, -33, 2.5	任意數(shù)字
  string	‘hi’, “hi”, `hi`	任意字符串
  boolean	true、false	布爾值true或false
  字面量	其本身	限制變量的值就是該字面量的值
  any	*	任意類型
  unknown	*	類型安全的any
  void	空值（undefined）	沒有值（或undefined）
  never	沒有值	不能是任何值
  object	{name:‘孫悟空’}	任意的JS對(duì)象
  array	[1,2,3]	任意JS數(shù)組
  tuple	[4,5]	元素，TS新增類型，固定長度數(shù)組
  enum	enum{A, B}	枚舉，TS中新增類型

• number

  • let decimal: number = 6;
    let hex: number = 0xf00d;
    let binary: number = 0b1010;
    let octal: number = 0o744;
    let big: bigint = 100n;
    

• boolean

    let isDone: boolean = false;

• string

  • let color: string = "blue";
    color = 'red';let fullName: string = `Bob Bobbington`;
    let age: number = 37;
    let sentence: string = `Hello, my name is ${fullName}.I'll be ${age + 1} years old next month.`;
    

• 字面量

  • 也可以使用字面量去指定變量的類型，通過字面量可以確定變量的取值范圍

  • let color: 'red' | 'blue' | 'black';
    let num: 1 | 2 | 3 | 4 | 5;
    

• any

  • let d: any = 4;
    d = 'hello';
    d = true;
    

• unknown

  • let notSure: unknown = 4;
    notSure = 'hello';
    

• void

  • let unusable: void = undefined;
    

• never

  • function error(message: string): never {throw new Error(message);
    }
    

• object（沒啥用）

  • let obj: object = {};
    

• array

  • let list: number[] = [1, 2, 3];
    let list: Array<number> = [1, 2, 3];
    

• tuple

    let x: [string, number];x = ["hello", 10]; 
  

• enum

   enum Color {Red,Green,Blue,}let c: Color = Color.Green;enum Color {Red = 1,Green,Blue,}let c: Color = Color.Green;enum Color {Red = 1,Green = 2,Blue = 4,}let c: Color = Color.Green;
  

• 類型斷言

  • 有些情況下，變量的類型對(duì)于我們來說是很明確，但是TS編譯器卻并不清楚，此時(shí)，可以通過類型斷言來告訴編譯器變量的類型，斷言有兩種形式：

    • 第一種

      • let someValue: unknown = "this is a string";
        let strLength: number = (someValue as string).length;
        

    • 第二種

      • let someValue: unknown = "this is a string";
        let strLength: number = (<string>someValue).length;
        

第二章：面向?qū)ο?/h2>

面向?qū)ο笫浅绦蛑幸粋€(gè)非常重要的思想，它被很多同學(xué)理解成了一個(gè)比較難，比較深?yuàn)W的問題，其實(shí)不然。面向?qū)ο蠛芎?jiǎn)單，簡(jiǎn)而言之就是程序之中所有的操作都需要通過對(duì)象來完成。

• 舉例來說：
  • 操作瀏覽器要使用window對(duì)象
  • 操作網(wǎng)頁要使用document對(duì)象
  • 操作控制臺(tái)要使用console對(duì)象

一切操作都要通過對(duì)象，也就是所謂的面向?qū)ο?#xff0c;那么對(duì)象到底是什么呢？這就要先說到程序是什么，計(jì)算機(jī)程序的本質(zhì)就是對(duì)現(xiàn)實(shí)事物的抽象，抽象的反義詞是具體，比如：照片是對(duì)一個(gè)具體的人的抽象，汽車模型是對(duì)具體汽車的抽象等等。程序也是對(duì)事物的抽象，在程序中我們可以表示一個(gè)人、一條狗、一把槍、一顆子彈等等所有的事物。一個(gè)事物到了程序中就變成了一個(gè)對(duì)象。

在程序中所有的對(duì)象都被分成了兩個(gè)部分?jǐn)?shù)據(jù)和功能，以人為例，人的姓名、性別、年齡、身高、體重等屬于數(shù)據(jù)，人可以說話、走路、吃飯、睡覺這些屬于人的功能。數(shù)據(jù)在對(duì)象中被成為屬性，而功能就被稱為方法。所以簡(jiǎn)而言之，在程序中一切皆是對(duì)象。

1、類（class）

要想面向?qū)ο?#xff0c;操作對(duì)象，首先便要擁有對(duì)象，那么下一個(gè)問題就是如何創(chuàng)建對(duì)象。要?jiǎng)?chuàng)建對(duì)象，必須要先定義類，所謂的類可以理解為對(duì)象的模型，程序中可以根據(jù)類創(chuàng)建指定類型的對(duì)象，舉例來說：可以通過Person類來創(chuàng)建人的對(duì)象，通過Dog類創(chuàng)建狗的對(duì)象，通過Car類來創(chuàng)建汽車的對(duì)象，不同的類可以用來創(chuàng)建不同的對(duì)象。

• 定義類：

  • class 類名 {屬性名: 類型;constructor(參數(shù): 類型){this.屬性名 = 參數(shù);}方法名(){....}}
    

• 示例：

  • class Person{name: string;age: number;constructor(name: string, age: number){this.name = name;this.age = age;}sayHello(){console.log(`大家好，我是${this.name}`);}
    }
    

• 使用類：

  • const p = new Person('孫悟空', 18);
    p.sayHello();
    

2、面向?qū)ο蟮奶攸c(diǎn)

• 封裝

  • 對(duì)象實(shí)質(zhì)上就是屬性和方法的容器，它的主要作用就是存儲(chǔ)屬性和方法，這就是所謂的封裝

  • 默認(rèn)情況下，對(duì)象的屬性是可以任意的修改的，為了確保數(shù)據(jù)的安全性，在TS中可以對(duì)屬性的權(quán)限進(jìn)行設(shè)置

  • 只讀屬性（readonly）：

    • 如果在聲明屬性時(shí)添加一個(gè)readonly，則屬性便成了只讀屬性無法修改

  • TS中屬性具有三種修飾符：

    • public（默認(rèn)值），可以在類、子類和對(duì)象中修改
    • protected ，可以在類、子類中修改
    • private ，可以在類中修改

  • 示例：

    • public

      • class Person{public name: string; // 寫或什么都不寫都是publicpublic age: number;constructor(name: string, age: number){this.name = name; // 可以在類中修改this.age = age;}sayHello(){console.log(`大家好，我是${this.name}`);}
        }class Employee extends Person{constructor(name: string, age: number){super(name, age);this.name = name; //子類中可以修改}
        }const p = new Person('孫悟空', 18);
        p.name = '豬八戒';// 可以通過對(duì)象修改
        

    • protected

      • class Person{protected name: string;protected age: number;constructor(name: string, age: number){this.name = name; // 可以修改this.age = age;}sayHello(){console.log(`大家好，我是${this.name}`);}
        }class Employee extends Person{constructor(name: string, age: number){super(name, age);this.name = name; //子類中可以修改}
        }const p = new Person('孫悟空', 18);
        p.name = '豬八戒';// 不能修改
        

    • private

      • class Person{private name: string;private age: number;constructor(name: string, age: number){this.name = name; // 可以修改this.age = age;}sayHello(){console.log(`大家好，我是${this.name}`);}
        }class Employee extends Person{constructor(name: string, age: number){super(name, age);this.name = name; //子類中不能修改}
        }const p = new Person('孫悟空', 18);
        p.name = '豬八戒';// 不能修改
        

  • 屬性存取器

    • 對(duì)于一些不希望被任意修改的屬性，可以將其設(shè)置為private

    • 直接將其設(shè)置為private將導(dǎo)致無法再通過對(duì)象修改其中的屬性

    • 我們可以在類中定義一組讀取、設(shè)置屬性的方法，這種對(duì)屬性讀取或設(shè)置的屬性被稱為屬性的存取器

    • 讀取屬性的方法叫做setter方法，設(shè)置屬性的方法叫做getter方法

    • 示例：

      • class Person{private _name: string;constructor(name: string){this._name = name;}get name(){return this._name;}set name(name: string){this._name = name;}}const p1 = new Person('孫悟空');
        console.log(p1.name); // 通過getter讀取name屬性
        p1.name = '豬八戒'; // 通過setter修改name屬性
        

  • 靜態(tài)屬性

    • 靜態(tài)屬性（方法），也稱為類屬性。使用靜態(tài)屬性無需創(chuàng)建實(shí)例，通過類即可直接使用

    • 靜態(tài)屬性（方法）使用static開頭

    • 示例：

      • class Tools{static PI = 3.1415926;static sum(num1: number, num2: number){return num1 + num2}
        }console.log(Tools.PI);
        console.log(Tools.sum(123, 456));
        

  • this

    • 在類中，使用this表示當(dāng)前對(duì)象

• 繼承

  • 繼承時(shí)面向?qū)ο笾械挠忠粋€(gè)特性

  • 通過繼承可以將其他類中的屬性和方法引入到當(dāng)前類中

    • 示例：

      • class Animal{name: string;age: number;constructor(name: string, age: number){this.name = name;this.age = age;}
        }class Dog extends Animal{bark(){console.log(`${this.name}在汪汪叫！`);}
        }const dog = new Dog('旺財(cái)', 4);
        dog.bark();
        

  • 通過繼承可以在不修改類的情況下完成對(duì)類的擴(kuò)展

  • 重寫

    • 發(fā)生繼承時(shí)，如果子類中的方法會(huì)替換掉父類中的同名方法，這就稱為方法的重寫

    • 示例：

      • class Animal{name: string;age: number;constructor(name: string, age: number){this.name = name;this.age = age;}run(){console.log(`父類中的run方法！`);}
        }class Dog extends Animal{bark(){console.log(`${this.name}在汪汪叫！`);}run(){console.log(`子類中的run方法，會(huì)重寫父類中的run方法！`);}
        }const dog = new Dog('旺財(cái)', 4);
        dog.bark();
        

      • 在子類中可以使用super來完成對(duì)父類的引用

  • 抽象類（abstract class）

    • 抽象類是專門用來被其他類所繼承的類，它只能被其他類所繼承不能用來創(chuàng)建實(shí)例

    • abstract class Animal{abstract run(): void;bark(){console.log('動(dòng)物在叫~');}
      }class Dog extends Animals{run(){console.log('狗在跑~');}
      }
      

    • 使用abstract開頭的方法叫做抽象方法，抽象方法沒有方法體只能定義在抽象類中，繼承抽象類時(shí)抽象方法必須要實(shí)現(xiàn)

3、接口（Interface）

接口的作用類似于抽象類，不同點(diǎn)在于接口中的所有方法和屬性都是沒有實(shí)值的，換句話說接口中的所有方法都是抽象方法。接口主要負(fù)責(zé)定義一個(gè)類的結(jié)構(gòu)，接口可以去限制一個(gè)對(duì)象的接口，對(duì)象只有包含接口中定義的所有屬性和方法時(shí)才能匹配接口。同時(shí)，可以讓一個(gè)類去實(shí)現(xiàn)接口，實(shí)現(xiàn)接口時(shí)類中要保護(hù)接口中的所有屬性。

• 示例（檢查對(duì)象類型）：

  • interface Person{name: string;sayHello():void;
    }function fn(per: Person){per.sayHello();
    }fn({name:'孫悟空', sayHello() {console.log(`Hello, 我是 ${this.name}`)}});

• 示例（實(shí)現(xiàn)）

  • interface Person{name: string;sayHello():void;
    }class Student implements Person{constructor(public name: string) {}sayHello() {console.log('大家好，我是'+this.name);}
    }
    

4、泛型（Generic）

定義一個(gè)函數(shù)或類時(shí)，有些情況下無法確定其中要使用的具體類型（返回值、參數(shù)、屬性的類型不能確定），此時(shí)泛型便能夠發(fā)揮作用。

• 舉個(gè)例子：

  • function test(arg: any): any{return arg;
    }
    

  • 上例中，test函數(shù)有一個(gè)參數(shù)類型不確定，但是能確定的時(shí)其返回值的類型和參數(shù)的類型是相同的，由于類型不確定所以參數(shù)和返回值均使用了any，但是很明顯這樣做是不合適的，首先使用any會(huì)關(guān)閉TS的類型檢查，其次這樣設(shè)置也不能體現(xiàn)出參數(shù)和返回值是相同的類型

  • 使用泛型：

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

  • 這里的<T>就是泛型，T是我們給這個(gè)類型起的名字（不一定非叫T），設(shè)置泛型后即可在函數(shù)中使用T來表示該類型。所以泛型其實(shí)很好理解，就表示某個(gè)類型。

  • 那么如何使用上邊的函數(shù)呢？

    • 方式一（直接使用）：

      • test(10)
        

      • 使用時(shí)可以直接傳遞參數(shù)使用，類型會(huì)由TS自動(dòng)推斷出來，但有時(shí)編譯器無法自動(dòng)推斷時(shí)還需要使用下面的方式

    • 方式二（指定類型）：

      • test<number>(10)
        

      • 也可以在函數(shù)后手動(dòng)指定泛型

  • 可以同時(shí)指定多個(gè)泛型，泛型間使用逗號(hào)隔開：

    • function test<T, K>(a: T, b: K): K{return b;
      }test<number, string>(10, "hello");
      

    • 使用泛型時(shí)，完全可以將泛型當(dāng)成是一個(gè)普通的類去使用

  • 類中同樣可以使用泛型：

    • class MyClass<T>{prop: T;constructor(prop: T){this.prop = prop;}
      }
      

  • 除此之外，也可以對(duì)泛型的范圍進(jìn)行約束

    • interface MyInter{length: number;
      }function test<T extends MyInter>(arg: T): number{return arg.length;
      }
      

    • 使用T extends MyInter表示泛型T必須是MyInter的子類，不一定非要使用接口類和抽象類同樣適用。