TypeScript 学习笔记

1. 认识 TypeScript

1. 发展史

TypeScript 是 JavaScript 的⼀个超集，⽀持 ECMAScript 6 标准（ES6 教程）。

TypeScript 由微软开发的⾃由和开源的编程语⾔。

TypeScript 设计⽬标是开发⼤型应⽤，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运⾏在任何 浏览器上

中⽂官⽹：https://ts.nodejs.cn/

2013 年，微软的 Visual Studio 2013 开始内置⽀持 TypeScript 语⾔。

2014 年，TypeScript 1.0 版本发布。同年，代码仓库搬到了 GitHub。

2016 年，TypeScript 2.0 版本发布，引⼊了很多重⼤的语法功能。

2018 年，TypeScript 3.0 版本发布。

2020 年，TypeScript 4.0 版本发布。

2023 年，TypeScript 5.0 版本发布。

1. JavaScript 是动态类型、弱类型语⾔

动态类型是指在运⾏时才会进⾏类型检查，这种语⾔的类型错误往往会导致运⾏时错误。JavaScript 是⼀⻔ 解释型语⾔，没有编译阶段，所以它是动态类型，以下这段代码在运⾏时才会报错：

2. TypeScript 是静态类型

静态类型是指编译阶段就能确定每个变量的类型，这种语⾔的类型错误往往会导致语法错误。TypeScript 在 运⾏前需要先编译为 JavaScript，⽽在编译阶段就会进⾏类型检查，所以 TypeScript 是静态类型

3. 安装

npm install -g typescript 

JavaScript 的运⾏环境（浏览器和 Node.js）不认识 TypeScript 代码。所以，TypeScript 项⽬要想运⾏，必须先转 为 JavaScript 代码，这个代码转换的过程就叫做“编译”，TypeScript 官⽅提供的编译器叫做 tsc，可以将 TypeScript 脚本编译成 JavaScript 脚本

安装完成后，检查⼀下是否安装成功

$ tsc -v
Version 5.1.6 

2. 使⽤TS

通常我们使⽤ .ts 作为 TypeScript 代码⽂件的扩展名。

然后执⾏以下命令将 TypeScript 转换为 JavaScript 代码：

tsc app.ts
//
tsc app.ts -w //不需要每次重复执行编译命令 

执⾏过程如下

3. 原始数据类型

1.原始数据类型：boolean number string undefined null symbol

2.对象类型：对象（object）、数组（Array）、元组（Tuple）、枚举（enum）、函数（function）

3.其他类型： any、never unknown void 值类型

typescript 要求在变量声明的时候要声明值的类型，如下

let 变量名: 类型 = 数据

原始数据类型的声明⽅式案例

//string
let a:string="hello"
let b:string
var c:string="aa"
const d:string="bb"
//number
let n:number=123
//boolean
let boo:boolean=true
//undefined
let u:undefined=undefined
//null
let nu:null=null
//symbol
let s:symbol=Symbol() 

4. 其他类型

1. any 类型

2. unknown 类型

要想正常使⽤unknown，必须保证操作是合法的

let a:unknown=5;
if(typeof(a)=="number") {
    console.log(a*2)
} else if(typeof(a)=="string") {
    a.substring(1)
} 

3. never 类型

never 表示永远不会有返回值的类型，⽐如抛出异常，或者死循环，那么该函数永远执⾏不完，不可能有返回 值

4. 值类型

TypeScript 规定，单个值也是⼀种类型，称为“值类型”。

let a:123=123
let b:"hello"="hello" 

5. 关于 tsconfig.json⽂件

tsconfig.json ⽂件是 TypeScript 项⽬的配置⽂件。通过 tsconfig.json ⽂件，我们可以指定编译器的选项以 ⾃定义 TypeScript 编译的⾏为。

放在项⽬的根⽬录

tsconfig.json⽂件主要供 tsc 编译器使⽤

通过运⾏ 下⾯指令⽣成 tsconfig.json⽂件

tsc --init 

以下是常⻅配置：

compilerOptions（编译器选项）是 tsconfig.json 中最常见的配置项：

6. 数组和元组

1. 数组

ts 中规定，数组中所有成员的类型必须相同，数量可以不确定

数组的声明语法：

let arr:类型[] = []

或者

let arr: Array<类型> = [] // 这种写法本质上属于泛型

使⽤案例

//声明直接赋值
let arr:string[]=["a","b"] 

//先声明再赋值 

let arr2:number[] 

let arr3:boolean[] 

arr2=[1,2,3] 

//后续添加的元素也必须符合数组的类型 
arr.push("8") 

//⼆维数组 
let arr4:string[][]=[["a","b"],["e","f"]] 

//对象数组 

let arr:{name:string,age:number}[]=[{name:"aa",age:18},{name:"bb",age:17}] 

//函数数组 

let arr: (()=>number)[]=[function(){return 123},function(){return 443}] 

//定义包含多个数据类型的数组 

let arr:(string|number|(()=>void))[]=["hh",123] 

2. 元组

元组可以包含不同类型的元素，每个元素具有预定义的位置。需要为每⼀个元素规定类型

let arr: [类型1, 类型2] = [数据1, 数据2]

let arr:[string, number, boolean] = ["A", 123, true]
//先声明再赋值
let arr2:[boolean, string]

arr2[0] = true;
arr2[1] = "123"

//如果后续通过任何方法向数组添加数据，也可以，后添加的数据是前面每个数据的<span style="color: #FF9800;">**联合类型**</span>
arr2.push("123") 

7. 对象

对于对象来说，我们应该限定对象中每个属性的类型，⽽不是限定对象这个整体的类型

基本语法

let obj: {name:string, age:number} = {name:"小明", age:18} 

案例

let a:{age:number,name:string}={name:"张三",age:18}
//先声明再赋值
let a2:{salary:number,address:string}
a2={salary:3500,address:"北京"}
//添加属性
a2.salary=4500 

1. 可选属性

属性名后⾯加问号，代表该属性可有可⽆，⼀个对象中可以有任意多个可选属性

let a:{name:string,age?:number}
a={name:"hello"} //正常执行，因为age可以不给 

2. 任意属性

如果我只希望⼀个对象必须具有 a 属性，其他的属性有没有随意

let a: {name:string,[propName:string]:any}
//propName代表属性名，肯定是字符串，propName只是形参，可以换成别的名字 任意属性只有一个没有多个，它代表了其他的所有属性
//任意属性的类型一定是其他类型（包含可选属性）的父类
a = {name:"张三",age:18,salary:3500} 

练习

let obj: {
    name:string,
    like:string[],
    pet:{name:string,age:number},
    [propName:string]:any
}

obj = {
    name:"张三",
    like:["唱歌","睡觉","打游戏"],
    pet:{name:"旺财",age:2},
    girlfriend:{name:"刘亦菲",
    age:18}
}

let obj: {
    run:(height:number)=>void
}

obj = {
    run:function(height:number){
    console.log("i can run")
    }
} 

3. 只读属性

在对象属性的前⾯加上 readonly，代表该属性只能访问，不能修改，⼀个对象可以有任意多个只读属性

let obj: {readonly name:string,age:number}
obj = {name:"小红",age:18}
obj.age = 20; // 正确
obj.name="哈哈" // 错误，因为是只读的 

4. 关于内置对象

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div'); 

8. 函数

1. 基本使⽤

函数的类型声明，需要在声明函数时，给出参数的类型和返回值的类型。

function fn(m:number,n:string):string{
    return n+m
} 

如果没有返回值，就是 void 类型

function fn(m:number, n:string):void {
    console.log(m+n)
} 

通过变量赋值的形式声明函数

let fn=function(m:number,n:string):void{console.log(m+n)}
//换成箭头函数的写法
let fn=(m:number,n:string):void=>{console.log(m+n)} 

单独定义函数类型

let 变量名:(参数1: 类型, )=>返回值类型
let fn3:(a:number)=>number

// fn3=()=>{
    // console.log(123)
    // }
fn3=function(a:number):number{
    return 123
} 

事实上，上⾯的代码只对等号右侧的匿名函数进⾏了类型定义，⽽等号左边的 fn，是通过赋值操作进 ⾏类型推论⽽推断出来的。如果需要我们⼿动给 fn 添加类型，则应该是这样：

let fn:(m:number,n:string)=>void=(m:number,n:string):void=>{console.log(m+n)} 

2. 可选参数

如果某个参数是可选的，那么要在参数后⾯加问号

⼀个函数可以有多个可选参数

需要注意的是，可选参数必须接在必需参数后⾯。换句话说，可选参数后⾯不允许再出现必需参数了：

function fn(m:number, n?:string):void {
    console.log(m+n)
}
fn(8) 

3. 参数省略

函数的实际参数个数，可以少于类型指定的参数个数，但是不能多于，即 TypeScript 允许省略参数。

let fn:(a:number, b:number) => number;
fn = (a:number) => a; // 正确
fn = (a:number, b:number, c:number) => a; // 错误 

这是因为 JavaScript 函数在声明时往往有多余的参数，实际使⽤时可以只传⼊⼀部分参数。

⽐如，数组的 forEach()⽅法的参数是⼀个函数，该函数默认有三个参数(item, index, array) => void，实际上 往往只使⽤第⼀个参数(item) => void。

因此，TypeScript 允许函数传⼊的参数不⾜。

4. rest 参数

rest 参数表示函数剩余的所有参数，它可以是数组（剩余参数类型相同），也可能是元组（剩余参数类型不同）。

// rest 参数为数组
function joinNumbers(...nums:number[]) {
    // ...
}
// rest 参数为元组
function f(...args:[boolean, number]) {
    // ...
} 

9. 联合类型

联合类型（Union Types）表示取值可以为多种类型中的⼀种。

//<span style="color: #FF9800;">**联合类型**</span>使用 | 分隔每个类型。
var val:string|number |string[] | ()=>number
val = 12 //ok
val = "hello" //ok 

所以我们之前定义存储不同数据数组的时候，也可以使⽤联合类型

const arr: (number | string)[ ] = [1, "string", 2]; 

特殊的，如果访问联合类型的属性或⽅法：

当 TypeScript 不确定⼀个联合类型的变量到底是哪个类型的时候

我们只能访问此联合类型的所有类型⾥共有的属性或⽅法：

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

// index.ts(2,22): error TS2339: 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 a:string|number|string[]| {name:string,age:number} | ( )=>string);
a="hello";
a=123;
a=["a","b","c"]
a={name:"张三",age:18}
a=function(){
return "hello"
} 

10. 类型别名

在 TypeScript 中，类型别名是给现有类型取⼀个新的名字。它可以⽤于提⾼代码的可读性和可维护性，以及 减少重复的类型定义。

最基本的使⽤⽅式

type MyString = string;
let a:MyString="hello" 

//type 关键字可以为原始值、联合类型、元组以及任何我们定义的类型起⼀个别名

type Add = (x: number, y: number) => number;
let add: Add = (arg1: string, arg2: string): string => arg1 + arg2; // error 不能
将类型“(arg1: string, arg2: string) => string”分配给类型“Add”
type Directions = 'up' | 'Down' | 'Left' | 'Right'
let toWhere : Directions = 'Down' 

对象数组使⽤类型别名

const objArr: { name: string, age: Number }[] = [
{ name: "小明", age: 18 },
{ name: "小红", age: 28 },
];
//上面的案例使用<span style="color: #FF9800;">**类型别名**</span>简写
type Person = { name: string, age: Number };
const arr:Person[] = [
{ name: "小明", age: 18 },
{ name: "小红", age: 28 },
]; 

结合之前联合类型的写法

type A={name:string}
type B=number
type C=A|B|"哈哈"|string
let str:C=8 

11. 类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出⼀个类型。

以下代码虽然没有指定类型，但是会在编译的时候报错：

let a=1;
a="hello" //error: Type 'string' is not assignable to type 'number'. 

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型⽽完全不被类型检查：

let a;
a="hello"; //正确
a=7; //正确 

函数的参数的类型推论

function fn(x,y){ //x y被推断为any console.log(x+y) } 

12. typeof 和 keyof 运算符

1. typeof

JavaScript ⾥⾯， typeof 运算符只可能返回⼋种结果，⽽且都是字符串。

typeof undefined; // "undefined"
typeof true; // "boolean"
typeof 1337; // "number"
typeof "foo"; // "string"
typeof {}; // "object"
typeof parseInt; // "function"
typeof Symbol(); // "symbol"
typeof 127n // "bigint" 

TypeScript 将 typeof 运算符移植到了类型运算，它的操作数依然是⼀个值，但是返回的不是字符串，⽽是该值的 TypeScript 类型。

const a = { x: 0 };
type T0 = typeof a; // { x: number }
type T1 = typeof a.x; // number 

ts 中的 typeof 是 根据已有的值 来获取值的类型 来简化代码的书写

const myVariable = 42;
type MyVariableType = typeof myVariable; // MyVariableType 的值为 "number" 

2. keyof

keyof 运算符接受⼀个对象类型作为参数，返回该对象的所有键名组成的联合类型。

keyof 类型别名

keyof {} 

练习

type Person={name:string,age:number}
type MyType=keyof Person //name|age
//type MyType=keyof {name:string,age:number} //name|age
let a:MyType="name" 

13. 映射类型

映射类型：基于旧类型创建新类型（对象类型），减少重复，提升开发效率。

映射类型只能在类型别名中使⽤，不能在接⼝中使⽤。

in 后⾯跟的是联合类型，也可以是通过 keyof⽣成的联合类型

//基本使用
type My="a" | "b" | "c"
type MyType={{key in My:number} // {a:number,b:number,c:number}
//配合keyof使用
type Props={a:number,b:string,c:boolean}
type MyType={{key in keyof Props}:Props[key]} // {a:number,b:string,c:boolean}
//此时的key不是关键字，可以随便命名
let obj:MyType={a:123,b:"2",c:true} 

配合可选属性使⽤

type My="a" | "b" | "c"
type MyType={{key in My} // {a?:number, b?:number, c?:number}
let obj:MyType={a:123} 

配合只读属性使⽤

type My="a" | "b" | "c"
type MyType={readonly [key in My]:number} // {readonly a:number, readonly b:number, readonly c:number}
let obj:MyType={a:123,b:2,c:88}
obj.a=888 // 报错 

14. 接⼝

1. 基本使⽤

在 TypeScript 中，我们使⽤接⼝（Interfaces）来定义对象的类型。

我们之前定义对象类型都是 形如{name

但是如果我的别的对象也是这种结构，我们不⾄于每个对象都重新声明⼀遍这个类型吧，所以就需要⽤到接⼝

接⼝其实就是相当于定义⼀个模板，以后声明的对象都得根据这个模板要求来

interface Person{
    name:string,
    age:number,
    salary:number
}
let obj:Person={name:"张三",age:18,salary:3500} 

接⼝中同样⽀持只读属性，可选属性,任意属性

interface Person{
    name:string,
    age:number,
    readonly salary:number,
    like:string[],
    run?:()=>void,
    [propName:string]:string|number|string[]||( ()=>void)
} 

2. 接⼝的继承

如果你需要创建⼀个新的接⼝，⽽这个新的接⼝中的部分内容我已经在已存在的接⼝中定义过了，那么可以直接继 承，⽆需重复定义

语法：

interface 接口名 extends 另一个接口名 

只要存在接⼝的继承，那么我们实现接⼝的对象必须同时实现该接⼝以及他所继承的接⼝的所有属性

interface Person{
    name:string,
    age:number,
    address:string
}

interface Girl extends Person{
    height:number,
    hobby:string[]
}

interface Boy extends Person{
    salary:number,
    car:string
}

let xf:Girl={
    name:"小芳",
    age:18,
    address:"北京",
    height:170,
    hobby:["逛街","买买买"]
} 

⼀个接⼝可以被多个接⼝继承，同样，⼀个接⼝也可以继承多个接⼝，多个接⼝⽤逗号隔开

继承多个接⼝，必须同时实现继承每⼀个接⼝定义的属性

interface Person{
    name:string,
    age:number,
    address:string
}
interface Pro{
phone:string,
coat:string
}

interface Girl extends Person,Pro{
    height:number,
    hobby:string[]
}

interface Boy extends Person{
    salary:number,
    car:string
}

let xf:Girl={
    name:"小芳",
    age:18,
    address:"北京",
    height:170,
    hobby:["逛街","买买买"],
    phone:"华为",
    coat:"安踏"
} 

多层继承

interface Person{
    name:string,
    age:number,
    address:string
}

interface Girl extends Person{
    height:number,
    hobby:string[]
}

interface Xh extends Girl{
    hair:string
}

let xh:Xh={hair:"红色",height:170,hobby ["买买买"],name:"小红",age:18,address:"北京"} 

3. 接⼝同名会合并

名字相同的接⼝不会冲突，⽽是会合并为⼀个

interface Person{
    name:string,
    age:number,
    address:string
}

interface Person{
    salary:number
}

let xm:Person={name:"小明",age:17,address:"beijing",salary:3500} 

4. 接⼝中使⽤联合类型

interface Person{
    name:string,
    age:number,
    address:string
    hobby:string[] | ( ()=>void)
} 

5. 接⼝也可以⽤于定义数组

但是不推荐，定义数组还是优先使⽤我们之前讲的⽅式

interface MyArr{
    [index:number]:string
}
let arr:MyArr = ["@", "3"] 

6. 接⼝也可以定义函数

interface MyArr{
    (a:number):number
}
let fn:MyArr=function(a:number){return 123} 

7. 接⼝和类型别名的区别

interface 与 type 的区别有下⾯几点：

interface Point {
x: number;
y: number;
}

// 正确
type PointCopy1 = {
[Key in keyof Point]: Point[Key];
};

// 报错
interface PointCopy2 {
[Key in keyof Point]: Point[Key];
}; 

15. 交叉类型

交叉类型（Intersection Types）⽤于组合多个类型，⽣成⼀个包含所有类型特性的新类型。可以 理解为将多个类型合并为⼀个更⼤的类型，新类型拥有所有原始类型的成员。使⽤ & 符号表示交 叉类型。

type Person={name:string,age:number}
type Emp={salary:number,address:string}
type C=Person&Emp&{height:number}
let obj:C={name:"张三",age:18,salary:3500,address:"beijing",height:180} 

type C=string&number 

16. 类型断⾔

1. 基本⽤法

类型断⾔就是我明确的知道我这个数据肯定是字符串，告诉编译器你不⽤检测他了。

语法：

值 as 类型
//或者
<类型>值
/*
在 tsx 语法（React 的 jsx 语法的 ts 版）中必须使用前者，即 值 as 类型。
形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode，在 ts 中除了表示<span style="color: #FF9800;">**类型断言**</span>之外，也可能是表示一个<span style="color: #FF9800;">**泛型**</span> 
故建议大家在使用<span style="color: #FF9800;">**类型断言**</span>时，统一使用 值 as 类型 这样的语法
*/ 

2. .将⼀个联合类型断⾔为其中⼀个类型

当 TypeScript 不确定⼀个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型 中共有的属性或⽅法

// type C=string|number
function fn(m:string|number){
    (m as string).substring(1)
}
fn(100)//错误 

interface Boy{
    name:string,
    make:( )=>number 

}
interface Girl{
    name:string,
    cost: ()=>void
}
function fn(obj:Boy|Girl){
    (obj as Boy).make()
} 

案例

let student = {} as {name: string}
student.name = "张三" 

3. 将任何⼀个类型断⾔为 any

let num:number=1;
console.log((num as any).length) 

4. 将 any 断⾔为任意类型

let a:any=5;
console.log((a as number).length) // 报错 

5. 将⽗类断⾔为⼦类

class Students{
    make() {
    console.log("make")
    }
}
class Xm extends Students{
    run() {
    console.log("run")
    }
}
let a=new Students();
(a as Xm).run() //编译通过，运⾏报错

6. ⾮空断⾔

type MyFn=() => number
function fn(m:MyFn | undefined){
    let num = m!()
    let num2 = m() // 错误写法
} 

7. 双重断⾔ (不推荐使⽤)

interface Girl{
    name:string,
    cost: () => void
}

interface Boy{
    name:string,
    make: () => void
}

function fn(obj:Girl){
    obj as any as Boy  // ⚠️ 双重断言，不推荐使⽤！
} 

17. enum 枚举类型

1. 基本使⽤

枚举（enum）类型⽤于定义⼀些有名字的数字常量。当⼀个元素有固定的⼏个值可选时，可以使⽤Enum 来 改善代码的可读性和可维护性

字符串存在数据库会⽐较⼤

我们常常会有这样的场景，⽐如与后端开发约定订单的状态开始是 0，未结账是 1，运输中是 2，运输完 成是 3，已收货是 4。这样的纯数字会使得代码缺乏可读性。枚举就⽤于这样的场景。枚举可以让我们定 义⼀些名字有意义的常量。使⽤枚举可以清晰地表达我们的意图。TypeScript⽀持基于数字枚举和字符 串的枚举。

枚举类型默认第⼀项的值是 0，依次类推，每个+1

enum OrderStatus{
Start = 1,
Unpaid,
Shipping,
Shipped,
Complete,
}
//取值语法 OrderStatus.Start 

当只写 Start = 1 时，后⾯的枚举变量就是递增的

如果不写=1,那么默认初始值为 0，依次递增

枚举类型解决了哪些问题

2. ⼿动赋值

enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true 

上⾯的例⼦中，未⼿动赋值的枚举项会接着上⼀个枚举项递增。

如果未⼿动赋值的枚举项与⼿动赋值的重复了，TypeScript 是不会察觉到这⼀点的：

enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};
console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true 

⼿动赋值的实际使⽤场景，适合于⼀些对于数字有特殊要求的

enum Status {
    Success = 200,
    NotFound = 404,
    Error = 500
} 

3. 使⽤计算值

数字枚举在定义值的时候，可以使⽤计算值和常量。但是要注意，如果某个字段使⽤了计算值或常 量，那么该字段后⾯紧接着的字段必须设置初始值，这⾥不能使⽤默认的递增值了，

const getValue = () => {
    return 0;
};
enum ErrorIndex {
    a = getValue(),
    b, // error 枚举成员必须具有初始化的值
    c
}
enum RightIndex {
    a = getValue(),
    b = 1,
    c
}
const Start = 1;
enum Index {
    a = Start,
    b, // error 枚举成员必须具有初始化的值
    c
} 

4. 反向映射

我们定义⼀个枚举值的时候，可以通过 Enum[‘key’]或者 Enum.key 的形式获取到对应的值

value。TypeScript 还⽀持反向映射，但是反向映射只⽀持数字枚举，我们后⾯要讲的字符串枚举是不⽀持的

enum Status {
    Success = 200,
    NotFound = 404,
    Error = 500
}
console.log(Status["Success"]); // 200
console.log(Status[200]); // 'Success'
console.log(Status[Status["Success"]]); // 'Success' 

5. 字符串枚举

字符串枚举值要求每个字段的值都必须是字符串字⾯量，或者是该枚举值中另⼀个字符串枚举成员

enum Message {
    Error = "Sorry, error",
    Success = "Hoho, success"
}
console.log(Message.Error); // 'Sorry, error' 

案例

//订单
enum OrederStatus{
    Detail="/api/detail",
    List="/api/data/list",
    Owner="/user/owner",
} 

6. 异构枚举 （不推荐）

简单来说异构枚举就是枚举值中成员值既有数字类型⼜有字符串类型，如下

:

enum Result {
    Faild = 0,
    Success = "Success"
} 

18. 泛型

泛型 Generics）是指在定义函数、接⼝或类的时候，不预先指定具体的类型，⽽在使⽤的时候再指定 类型的⼀种特性

简单来说泛型 实就是类型参数

在定义的时候定义形参(类型变量) ，使⽤的时候传⼊实参(实际的类型)

1. 函数中使⽤泛型

function identity<T>(arg: T): T {
return arg;
}
identity<Number>(100)
//或者identity(100) 在 TypeScript 中，在调用<span style="color: #FF9800;">**泛型**</span> 数时，如果没有显式地指定<span style="color: #FF9800;">**泛型**</span> 型参数，
//编译器会进行类型推断。根据传入的实际参数类型，编译器可以推断出<span style="color: #FF9800;">**泛型**</span> 型参数的类型，使得函数调用仍然是正确的 

//多个类型参数
function identity<T,U>(arg: T,arg2 : U): T {
return arg;
}
identity<Number,String>(4,"hello") 

类型的推断不⼀定都是正确的，要谨慎使⽤，下⾯即是案例

function fn2<T>(arr1:T[], arr2:T[]):T[] {
    return arr1.concat(arr2)
}
fn2([1,2],["a","b"])//错误
fn2<number|string>([1,2],["a","b"])//正确 

2. 接⼝中使⽤泛型

interface Person<N> {
    name: string;
    age: N;
}
const xiong: Person<string> = {
    name: "xiong",
    age: "18"
    // age: 18 // 报错
}; 

3. 类中使⽤泛型

class Person<T> {
    name:T,
    age:number
    constructor(name:T,age:number) {
    this.name = name
    this.age = age
    }
}
const xiong = new Person<string>("xiong",18)
console.log(xiong.name,xiong.age) // xiong 18 

泛型 了能使⽤基本类型 string number boolean 等，同时也可以是接⼝，数组等

案例

function fn<T>(a:T):T{
    return a
}

interface Person{
    name:string,
    age:number
}

type C="a" | "b" | "c"

fn<(()=>void)>( ()=>{console.log(1)})
fn<Person>( {name:"小明",age:18 })
fn<C>("b")
fn<string[ ]>(["a","b"]) 

泛型 可以⽤来定义数组

let arr2: Array<number> = [2, 3, 4] // Array 是一个内置接口，接受一个 T 类型

interface Array<T> {
    /**
    * Returns the value of the first element 

4. 类型别名中使⽤泛型

type C<T>={value:T}
let obj:C<string>={value:"hello"} 

5. 多个类型参数

function fn<T,U>(arr:T[],f:(arg:T)=>U):U[ ] {
    return arr.map(f)
}

fn<string,number>(["1","2","3"], (item)=>parseInt(item)) 

6. 类型参数默认值

function fn<T=string>(m:T){
    return m
}
fn(123)//正确 因为类型推断覆盖掉了默认类型 

类型参数默认值多⽤于 class 中

class Person<T=string> {
    list:T[] = [];
    add(t:T) {
    this.list.push(t)
    }
}
let xm=new Person()
xm.add("4")//正确
xm.add(4)//错误 

7. 泛型约束

在函数内部使⽤泛型 量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或⽅法：

⼤类型 extends 更具体的类型 any extends number ⼤类型必须要包含后⾯更具体的类型

function loggingIdentity<T>(arg: T): T {
console.log(arg.length);
return arg;
}
// index.ts(2,19): error TS2339: Property 'length' does not exist on type 'T'. 

案例

interface Person{
    name:string,
    age:number
}

function fn<T extends Person>(person:T){
}

fn<{name:string,age:number,salary:number>({name:"张三",age:18,salary:3500}) 

let obj={a:1,b:2,c:3}
function fn<T extends keyof U ,U>(a:T,b:U){
}
fn("a",obj) 

8. 关于泛型 嵌套

形如 <A> 的嵌套写法表示在 TypeScript 中使⽤泛型 ⾏多层嵌套。

interface Box<T> {
    item:T
}

interface Person<T> {
    name:T
}

let obj:Box<Person<string>>={
    item: {
    name:"hello"
    }
}

/////本质就是带<span style="color: #FF9800;">**泛型**</span> 类型整体看成一个类型
interface Box<T> {
    item:T
}

interface Person<T> {
    name:T
}

let obj:Box<Box<string>>={
    item: {
    item:"hello"
    }
} 

class Parent {
    constructor(x) {
    this.x = x;
    this.sayHello = function () {
    console.log("sayHello")
    }
    }
    getX() {
    console.log("javax==>", this.x)
    }
} 

//ts中class类构造函数里用到的所有属性，必须提前定义类型
class Person{
    //实例属性
    name:string="张三";//可以在定义的时候直接赋初始值
    age:number
    constructor(name,age){
    this.name=name;
    this.age=age
    }
    //类属性(静态属性) 只能通过类名访问和修改，对象实例访问不到
    static count:number=100
    //只读属性
    readonly sex:string="boy"
    eat(){
    console.log("我在吃饭")
    }
    //静态方法
    static sleep(){
    console.log("我睡觉呢")
    }
} 

class Animal{
    name:string;
    age:number
    constructor(name,age){
    this.name=name;
    this.age=age
}
eat(){
    console.log("我在吃饭")
}
sleep(){
    console.log("我在睡觉")
}
class Dog extends Animal{
    gender:string
    constructor(name,age,gender){
    super(name,age)
    this.gender=gender
    }
    //方法的重写
    eat(){
    console.log("我在吃骨头")
    }
}

let wc=new Dog("旺财",2,"boy")
wc.eat() 

class Animal{
    name:string; //默认就是public 没有使用限制
    protected age:number //只能在当前类和子类中用
    constructor(name,age){
    this.name=name;
    this.age=age
    }
    private eat(){ //只能在当前类中用
    console.log("我在吃饭")
    }
    sleep(){
    console.log("我在睡觉")
    } 

class Dog extends Animal{
    constructor(){
    super("a", 8)
    super.age
    }
} 

abstract class Animal{
    abstract eat()
    abstract fn()
    sleep() {
    console.log(1)
    }
}

abstract class Cat extends Animal {

    abstract class Mimi {

} 

interface Person{
    id:number,
    name:string,
    play:( )=>void
}
interface Person1{
    gender:boolean
}

class XiaoMing implements Person,Person1{
    id:number
    name:string
    play:( )=>void
    gender:boolean
    age:number
    constructor(a:number,b:string,c:( )=>void){
    this.id=a;
    this.name=b;
    this.play
    }
} 

export {}; 

export let a=1;
export const b=function(){
    console.log(1)
}
let c="hello"
export default c 

import c, { a,b } from "./a";
console.log(a,b,c) 

export {接口名, type名} 

interface Person2{
    name:string,
    age:number
}
type obj={gender:boolean,like:string[]}
export type {obj,Person2} //方式1
export {obj,Person2}//方式2
export {type obj,type Person2}///方式3 

import type { obj, Person2, Person } from "./a";//方式1
import { obj, Person2, Person } from "./a";//方式2
import {type obj, type Person2, type Person } from "./a";//方式1 

export default interface Person{
    name:string,
    age:number
}

export interface Person{
    name:string,
    age:number
}

//以上两种写法都是对的 

export type{Person} from "./a"
export * from "./b" //重导出所有 

namespace Utils{
    export function fn(){ //如果不加export,只能在该命名空间内使用
    console.log(1)
    }
    export var a=1
}
//使用命名空间内的函数/变量
Utils.fn() 

namespace My{
    export namespace Girlfriend{
    export function angry(){
    console.log("爱生气")
    }
    }

    export interface Person {name:string}
}

let c:My.Person={} 

declare function fn(x:number,y:number):number
declare let a:number 

declare class Person{
    name:string
}

interface Man{
    make: () => void,
    gender:boolean
}

declare let xm:Man 

typeRoots设置类型模块所在的目录，默认是node_modules/@types 

{
    "compilerOptions": {
    "typeRoots": ["/typings", "/vendor/types"]
    }
} 

{
    ...
    "include": [
    "src/**/*"
    ]
}
// src/**/* 表示包含 src 目录下的所有文件和子目录中的所有文件，无论文件的扩展名是什么，都应该纳入 TypeScript 编译的范围 

/// <reference path="my-declaration-file.d.ts" /> 

$ npm install @types/jquery --save-dev 

import { A } from "./index";

declare module "./index" {
    interface A{
    y:number
    }
}

let count: A = { x: 5, y: 2 } 

declare module 'my-plugin-*' {
    interface PluginOptions {
    enabled: boolean;
    priority: number;
    }

    function initialize(options: PluginOptions): void;
    export = initialize;
} 

/// <reference path="some-library.d.ts" />
import * as someLibrary from 'some-library'; 

/// <reference types="node" />
import * as fs from 'fs'; 

{
    "include": ["**/*"], 
    "exclude": ["**/*.spec.ts"]
} 

{
    "extends": "../tsconfig.base.json"
} 

{
    "extends": "@tsconfig/node12/tsconfig.json"
} 

{
    "files": ["a.ts", "b.ts"]
} 

{
    "include": ["src/**/*", "tests/**/*"]
} 

{
    "references": [
    { "path": "../pkg1" },
    { "path": "../pkg2/tsconfig.json" }
]
} 

{
    "compilerOptions": {
    "composite": true
    }
} 

{
    "compilerOptions": {
    "allowJs": true
    }
} 

{
    "compilerOptions": {
    "baseUrl": "./"
    }
} 

import { helloWorld } from "hello/world"; 

{
    "compilerOptions": {
    "checkJs": true
    }
} 

{
    "compilerOptions": {
    "declaration": true
    }
} 

{
    "compilerOptions": {
    "declaration": true,
    "declarationDir": "./types"
    }
} 

{
    "compilerOptions": {
    "declaration": true,
    "declarationMap": true
    }
} 

import * as moment from 'moment'
moment(); // 报错 

import moment from 'moment'
moment(); // 不报错 

// 打开 exactOptionalPropertyTypes
interface MyObj {
    foo?: 'A' | 'B';
}
let obj:MyObj = { foo: 'A' };
obj.foo = undefined; // 报错 

{
    "compilerOptions": {
    "jsx": "preserve"
    }
} 

{
    "compilerOptions": {
    "lib": ["dom", "es2021"]
    }
} 

{
    "compilerOptions": {
    "listEmittedFiles": true
    }
} 

{
    "compilerOptions": {
    "listFiles": true
    }
} 

{
    "compilerOptions": {
    "sourceMap": true,
    "mapRoot": "https://my-website.com/debug/sourcemaps/"
    }
} 

{
    "compilerOptions": {
    "module": "commonjs"
    }
} 

{
    "compilerOptions": {
    "moduleSuffixes": [".ios", ".native", ""]
    }
} 

{
    "compilerOptions": {
    "baseUrl": "./",
    "paths": {
    "b": ["bar/b"]
    }
    }
} 

{
    "compilerOptions": {
    "baseUrl": "./",
    "paths": {
    "@bar/*": ["bar/*"]
    }
    }
} 

{
    "compilerOptions": {
    "preserveConstEnums": true
    }
} 

{
    "compilerOptions": {
    "rootDirs": ["bar", "foo"]
    }
} 

{
    "compilerOptions": {
    "sourceMap": true,
    "sourceRoot": "https://my-website.com/debug/source/" 
    }
} 

{
    "compilerOptions": {
    "strict": true
    }
} 

{
    "compilerOptions": {
    "strict": true,
    "alwaysStrict": false
    }
} 

function fn(x: string) {
    return parseInt(x);
}

// strictBindCallApply:false
const n = fn.call(undefined, false);
// 以上不报错 

function fn(x:string) {
    console.log('Hello, ' + x.toLowerCase());
}

type StringOrNumberFunc = (ns:string|number) => void;

// 打开 strictFunctionTypes，下面代码会报错
let func:StringOrNumberFunc = fn; 

let value:string;
// strictNullChecks:false
// 下面语句不报错
value = null; 

function doSomething(x:string|null) {
    if (x === null) {
    // do nothing
    } else {
    console.log("Hello, " + x.toUpperCase());
    }
} 

// strictPropertyInitialization: true
class User {
    // 报错，属性 username 没有初始化
    username: string;
} 

// 解决方法一
class User {
    username = '张三';
}

// 解决方法二
class User {
    username:string|undefined;
}

// 解决方法三
class User {
    username:string;

    constructor(username:string) {
    this.username = username;
    }
}

// 或者
class User {
    constructor(public username:string) {}

}

// 解决方法四：赋值断言
class User {
    username!:string;

    constructor(username:string) {
    this.initialize(username);
    }

    private initialize(username:string) {
    this.username = username;
    }
} 

{
    "compilerOptions": {
    "traceResolution": true
    }
} 

{
    "compilerOptions": {
    "typeRoots": ["./typings", "./vendor/types"]
    }
} 

{
    "compilerOptions": {
    "types": ["node", "jest", "express"]
    }
} 

try {
    someExternalFunction();
} catch (err) {
    err; // 类型 any
} 

try {
    someExternalFunction();
} catch (err) {
    if (err instanceof Error) {
    console.log(err.message);
    }
}