TS 学习笔记

一.基本数据类型

1.JS基础类型

string 字符类型，number 数值类型，boolean 布尔类型，undefined ，null，array 数组类型，symbol 唯一值，object 对象

2.TS新增类型

tuple 元组,enum 枚举,any 任意类型,never ,void,联合类型 ：自定义类型,接口,字面量类型

3.基本类型的使用方法

let age: number = 15 //number类型 let myname: string = '我' //string类型 let isLoading: boolean = false //boolean类型 let numberArr: number[] = [1,2,3] // 数组类型的两种方式 let stringArr: Array<string> = ['a','b','c'] let strAndnumarr:(number|string)[] = [1,'2','3',4] //联合类型 // 不添加小括号代表 number 或者 string[] let strOrnumarr:number|string[] = ['2','3'] strOrnumarr = 123

4.类型别名（自定义类型）

使用场景：当同一种类型被多次调用或使用时，可以通过类型别名简化该类型的使用

type CustomArray = (number|string)[] let arr1:CustomArray = [1,'2','3',4] let arr2:CustomArray = [1,'2','3',4]

5.函数的参数返回值类型

function add(num1:number,num2:number):number{ return num1+num2 } const add = (num1:number,num2:number):number =>{ return num1+num2 } //同时指定参数和返回值类型 const add:(num1:number,num2:number)=>number = (num1,num2)=>{ return num1+num2 }

6.void

function add(num1:number,num2:number):void{ console.log(num1+num2) }

7.可选参数

function mySlice(start?:number,end?:number):void{ console.log('起始'+start,'结束：'+end) }

8.对象类型

let person:{ name:string; age:number; sayHi():void } = { name:'jake', age:12, sayHi(){} } //箭头函数 let person:{ name:string; age:number; sayHi:()=>void } = { name:'jake', age:12, sayHi(){} }

9.对象可选属性

function myAxios(config:{url:string;method?:string}){ console.log(config) }

10.接口

接口和类名别名对比：

相同点：都可以给对象指定类型

不同点：接口，只能为对象指定类型；类型别名，不仅可以给对象指定类型，实际上可以给任意类型指定别名

interface Iperson { name:string; age:number; sayHi():void } let person:Iperson= { name:'jake', age:12, sayHi(){} } let person1:Iperson = { name:'jake', age:12, sayHi(){} }

11.接口继承

interface Iperson2D {x:number;y:number;} interface Iperson3D extends Iperson2D {z:number}

12.元组

元组是一种特殊的数组，在明确数组特定索引的类型，和数组包含多少个元素时使用

let position:[number,number] = [31.226,32.222]

13.类型推论

在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型

发生类型推论的场景

1.声明变量初始化的时候

2.决定函数返回值点时候

//声明变量并立即初始化值，此时可以省略类型注解 let a = 18; //注意：如果声明变量但没有立即初始化值，此时还需要手动添加类型注解 let b:number function add1(num1:number,num2:number){ return num1+num2 }

14.类型断言

使用as 关键字实现类型断言

const alink = document.getElementById('link') as HTMLAnchorElement

15.字面量类型

let 定义的变量 它的值可以说任意类型的 变量值可以自由变化

const 它的值不能变化 所以它的类型只能是 变量值自身

使用场景：用来表示一组明确的可选值列表

使用模式：字面量类型与联合类型一起使用

let as = 'asd' const asd = 'asd' function changeDirection(directionn:'up'|'down'|'left'|'right'){ console.log(directionn) }

16.枚举

枚举是一个从零自增的数值，默认从零开始， 我们将这种枚举成员值为数字的称为数字枚举

enum Directionn {Up,Down,Left,Right} function changeDirection(directionn:Directionn){ console.log(directionn) }

枚举成员值为字符串的称为字符串枚举

enum Directionn {Up='up',Down='down',Left='left',Right='right'} function changeDirection(directionn:Directionn){ console.log(directionn) }

17.any类型

当值的类型为any类型时，可以对值进行任意操作，且不会有代码提示

隐式类型具有any类型情况：

1.声明变量不提供默认类型也不提供初始值

2.函数参数不加类型

let c:any = {x:1}

二.TS高级类型

1.class类

1.构造方法

class Person { age:number name:string constructor(age:number,name:string){ this.age = age this.name = name } } let p = new Person(122,'王')

2.实例化方法

// 类的实例化方法 class Point { x = 10 y = 10 scale(n:number):void{ this.x *= n this.y *= n } } let f = new Point() f.scale(10)

3.类继承

// 类的继承 两种方式 1.extends 2.interface (接口) class Cat{ name = '旺财' Catspace(){ console.log('喵喵') } } class Dog extends Cat{ Dogspace(){ console.log('汪汪') } } let spac = new Dog() spac.Catspace spac.name // 接口实现 interface Singale{ sing():void } class Persons implements Singale{ sing(){ console.log('123123') } }

4.类成员的可见性

可见性修饰符：

public (公有的) ：实例化对象子类都是可见的

protected(受保护的) ：仅对其声明的所在类和子类中（非实例对象）可见

private(私有的) ：仅声明的所在类可见

class Cat{ name = '旺财' public Catspace(){ console.log('喵喵') } protected Catgo(){ console.log('走') this.Cateat() } private Cateat(){ console.log('吃') } } class Dog extends Cat{ Dogspace(){ console.log('汪汪') this.Catgo() } } let spac = new Dog() spac.Catspace

5.只读修饰符

readonly:表示只读，用来防止在构造函数之外对属性进行赋值,只能修饰属性不能修饰方法

class personS { readonly name: string = '啊是多少' constructor(name:string){ this.name = name } }

2.类型兼容

类型兼容系统两种： 1 Structural Type System(结构化类型系统) 2 Nominal Type System(标明类型系统)

Ts采用的是结构化类型系统 也叫做duck typing(鸭子类型) 类型检查关注的是值所具有的状态.也就是说,在结构类型系统中 如果是两个对象具有相同的形状,则认为他们属于同一类型

除了class外TS的其他类型也存在相互兼容的情况 包括: 接口兼容性,函数兼容性等

接口之间的兼容性 类似与class 并且 class和interface 之间也可以兼容

class Point{x:number;y:number} class Point2D{x:number;y:number} const p:Point=new Point2D() 解释: Point和Point2D 是两个名称不同的类 变量p的类型被现实标注为Point类型 但是 它的值 却是Point2D的实例 并且没有类型错误 因为TS是结构化类型系统 只检查Point和Point2D的结构是否相同(相同 都具有x和y两个属性,属性类型也相同). 但是 如果在 Nominal Type System中 (例如 C# Java等) 他们是不同的类 类型无法兼容

3.交叉类型

交叉类型(&):功能类似于接口继承(extends) 用于组合多个类型为同一个类型(常用于对象类型).

interface Person {name:string} interface Contact {phone:string} type PersonDetail=Person&Contact let obj:PersonDetail={ name:'rose', phone:'13133111133' } 解释: 使用交叉类型后 新的类型PersonDetail就同时具备了 Person和Contact的所有属性类型. 相当于: type PersonDetail={name:string;phone:string} 交叉类型和接口类型的对比 交叉类型(&)和接口继承(extends)的对比: 相同点:都可以实现对象类型的组合 不同点:两种方式实现类型组合时,对于同名属性之间 处理类型冲突的方式不同 接口继承: interface A{ fn:(value:number)=>string} interface B extends A{ fn:(value:string)=>string} //报错 类型不兼容 interface A {fn:(value:number)=>string} interface B {fn:(value:string)=>string} type C=A&B 说明:以上代码.接口继承会报错(类型不兼容);交叉类型没有错误 可以简单的理解为: fn:(value:string|number)=>string

4.泛型和keyof

泛型是可以在保护类型安全前提下,让函数与多种类型一起工作 从而实现复用 常用于 函数 接口 calss 中

泛型在保证类型安全(不丢失类型信息)的同时,可以让函数等与多种不同的类型一起工作,灵活可复用

TS泛型指的是在TypeScript中使用泛型，也就是将一些类型作为参数传递给某些函数或类。使用泛型可以让我们编写更加通用和灵活的代码，同时可以提高代码的可读性和可维护性。

5.索引签名类型和索引查询类型

6.映射类型