TypeScript小记

1. 安装 TypeScript

1.  安装 TypeScript : npm install -g typescript
2.  用 `tsc --init` 初始化配置
3.  编辑 `tsconfig.json` 配置 TypeScript 选项

2. Typescript 的原始类型

• void: 表示没有任何类型，当一个函数没有返回值时，你通常会见到其返回值类型是 void

• undefined与null:默认情况下 null 和 undefined 是所有类型的子类型， 就是说你可以把 null 和 undefined 赋值给 number 类型的变量 在正式项目中一般都是开启 --strictNullChecks 检测的，即 null 和 undefined 只 能赋值给 any 和它们各自(一个例外是 undefined 是也可以分配给void)，可以规避非常 多的问题

• symbol: 使用 Symbol 的时候，必须添加 es6 的编译辅助库

• bigint: 使用 BigInt 可以安全地存储和操作大整数，即使这个数已经超出了JavaScript构造函 数 Number 能够表示的安全整数范围，在使用 BigInt 时候，必须添加 ESNext 的编译辅 助库 3.其它常见类型

  1.unknown和any区别 unknown与any不同之处在于,虽然它们都可以是任何类型, 但是当unknow被确定为某个类型之前, 它不能进行任何操作如被实列化、getter、 函数执行等等,因此unknow更加安全 2.never 表示永远不存在的值的类型，是任何类型的子类型， 可以赋值给任何类型， 使用场景比如抛出异常的函数永远不会有返回值 3.数组 泛型：const arr:Array = [1,2,3] 元素类型后面加[]如 const arr:number[] = [1,2,4] 4.元组 表示一个已知元素数量和类型的数组 元组中包含的元素，必须与声明的类型一致，而且不能多、不能少， 甚至顺序不能不符 let x:[string,number] x=['1',2] 4.枚举类型

  数字枚举：声明一个枚举类型是,虽然没有给它们赋值,但是它们的值其实是默认的数字类型, 而且默认从0开始依次累加，如果把第一个值赋值后，会根据第一个值进行累加

enum Direction {
Up = 10, 
Down,
Left,
Right
} 
// 10 11 12 13
console.log(Direction.Up, Direction.Down, Direction.Left, Direction.Right); 

字符串枚举

enum Direction { 
Up = 'Up',
Down = 'Down', 
Left = 'Left', 
Right = 'Right'
}
// Right Up
console.log(Direction['Right'], Direction.Up); 

分开声明的枚举会被合并

5.接口（interface）

接口作用为你的代码或第三方代码定义契约（鸭式辨型）

// 用接口描述函数类型
interface hell{
 (words:string):string
}

interface User{
 name:string,
 age?:number,// 可选类型
 readonly isMale:boolean, //只读类型
 say:(words:string)=>string, // 函数
 [propName:string]:any // 字符串索引签名
 
}

// 继承接口
interface VIPUser extends User,SuperUser{
 broadcast:()=>void
}

6.类

抽象类: 作为派生类的基类使用，不会被实列化，抽象类可以包含成员的实现细节

访问限定符

• public:可以被外部访问
• private: 成员可以被类内部访问(不包括实列化的)
• protected: 可以被类内部和类的子类访问

abstract class Car{
  abstract brand():string;
  // public 修饰成员可以被外部访问
  protected move():void{
     cosle.log('handSome')
  }
}

// 继承抽象类
calss BMW extends Car {
  // 实现抽象方法
  barnd(){
    return 'BMW'
  }
  init(){
    this.move()
  }
  public wheel:string;
}

class作为接口 用一个calss起到了接口和设置初始值的作用

// props的类型 
export default class Props { 
public children: Array<React.ReactElement<any>> | React.ReactElement<any> | never[] = []
public height: number = 160 
public animation: string = 'easeInOutQuad' 
public afterChange: () => {} 
public beforeChange: () => {}
public selesctedColor: string public showDots: boolean = true
}

export default class Carousel extends React.Component<Props, State> {}

public static defaultProps = new Props()

当我们需要传入 `props` 类型的时候直接将 `Props` 作为接口传入，此时 `Props` 的作用就是接口，而当需要我们设置`defaultProps`初始值的时候直接实列化

7.函数

定义函数类型并不需要刻意定义

const add = (a: number, b: number) => a + b

显示定义

const add:(a:number,b:number)=>number = (a:number,b:number) => a+b

// 参数可以选(?)，默认赋值，剩余参数(如下面所示由number组成的数组)

const handle:(a?number,b=10,...rest:number[] ) => a+b

函数重载

interface Direction {
top: number, 
bottom?: number, 
left?: number, 
right?: number
} 
// 明确传参个数，在多人开发有用
function assigned(all: number): Direction
function assigned(topAndBottom: number, leftAndRight: number): Direction 
function assigned(top: number, right: number, bottom: number, left: number): Direction

function assigned (a: number, b?: number, c?: number, d?: number) {
if (b === undefined && c === undefined && d === undefined) {
b = c = d = a 
} else if (c === undefined && d === undefined) {
c = a d = b 
} 
return { 
top: a, 
right: b,
bottom: c, 
left: d 
 } 
}

7.泛型

静态编写的时候并不确定传入参数是什么类型，只有当运行时传入参数才确定， 需要一个变量代表类型而不是值,叫做泛型

// 函数名称后面声明泛型变量 `<T>`，它用于捕获开发者传入的参数类型
// （比如说string），然后我们就可以使用T(也就是string)做参数类型和返回值类型了
function test<T>(para:T):T{
   return para
 }
 
 // 多个泛型变量
 funtion test2<T,U>(tuple:[T,U]):[U,T]{
    return [tuple[1],tuple[0]]
 }
 
 // 泛型变量T当作类型的一部分  const arr:Array<number> = [1,2,3]
 funtion test3<T>(arg:Array<T>){
    console.log((arg as Array<any>).length) // ok
 }
 
 // 泛型接口
 interface ReturnHandle<T>{
   (para:T):T
 }
 
 // 泛型接口使用
 const test:ReturnHandle<string> = (para) => para
 
 // 泛型类
 class Stack<T>{
    private arr:T[] = []
    public push(item:T){
      this.arr.push(item)
    }
 }

泛型约束 使用 的方式约束泛型

// 约束泛型为string或者number
type Para = number | string
 class Stack<T extends Para>{
    private arr:T[] = []
    public push(item:T){
      this.arr.push(item)
    }
 }
 
 //存在索引类型的 使用泛型表示传入的对象类型， object默认情况是{}
 function getValue<T extends object,U extends keyof T>(obj:T,key:U){
   return obj[key]
 }