什么是TypeScript

• js的超集,兼容js的所有语法
• 静态类型语言,变量类型在编译之前决定

从js过渡到ts

变量声明

const data:string = 'string'

通过在变量后加:数据类型的形式,声明变量的类型

对象声明

• 使用interface接口定义对象类型

interface IPerson{
    // 只读属性,只允许在对象初始化的时候赋值
    readonly id:number,
    name: string,
    age: number,
    // 可选值
    sex: 'male' | 'female',
    // 可选属性
    hobby?:string,
    // 任意属性,约束所有对象属性,因此可以除声明类型的属性外,可以添加任意类型属性
    [key:string]:any
}

约定俗称用大写I开头,表示类型定义,用于与普通对象与类区分

声明对象

 const person:IPerson = {
     id:1,
     ...
 }

函数声明

1. 函数内声明

function add(x:number,y:number):number{
}

可以为函数的每个参数添加类型,在函数()之后添加函数的返回类型

2. 函数外声明

利用interface接口声明

interface IAdd{
    (x:number,y:number):number
}

定义函数的时候直接在函数名后声明

const add:IAdd = (x,y)=>{}

函数重载

声明:

function add(arg1: string, arg2: string): string
function add(arg1: number, arg2: number): number

实现:

function add(arg1: string | number, arg2: string | number) {
   // 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
   if(typeof arg1 === 'string' && typeof arg2 === 'string') {
       return arg1 + arg2;
  } else if(typeof arg1 === 'number' && typeof arg2 === 'number') {
       return arg1 + arg2;
  }
}

数组类型

类型声明

// 类型+方括号
type IArr1 = number[]
// 泛型表示,Recode能将一个类型的所有属性值映射到另一个上
// Record<string,number>表示key为字符串,value为数字的键值对
type IArr2 = Array<string | number | Record<string,number>>
// 元组表示,该类型仅能[数字,数字,字符,字符]的形式
type IArr3 = [number,number,string,string]
// 接口表示
interface IArr4{
    [key:number]:any
}

补充类型

1. type类型别名 : 为一个类型取一个别名

type userName = string; // 基本类型
type userId = string | number; // 联合类型
// 声明空类型
type IEmpty = () => void

可以使用别名定义类型

type Person = {
    id: userId; // 可以使用定义类型
    name: userName;
    age: number;
    gender: string;
    isWebDev: boolean;
};

• type 和 interface 的区别

  1. type可以定义基本类型别名, 但是interface无法定义
  2. type可以声明联合类型
  3. type可以声明 元组类型
  4. 如果你多次声明一个同名的interface，TypeScript 会将它们合并到一个声明中，并将它们视为一个interface。这称为声明合并,而type无法多次声明

2. 枚举类型 enum

支持枚举值到枚举名的正反向映射

enum EnumExample{
    add = '+',
    mult = '*'
}

EnumExample['add'] === '+'
EnumExample['+'] === 'add'

3. 泛型

不预先指定具体类型,而在使用的时候再指定类型

//函数泛型
type IFunc = <T>(target:T) => T[]
//多泛型接口
interface IX<T,U>{
    key:T
    val:U
}
//泛型类
class IMan<T>{
    key:T
    val:U
}
//泛型别名
type ITypeArr<T> = Array<T>

• 泛型约束

显示泛型必须满足约束类型

<T extends string>

• 默认类型

<T = string>

类型断言

TypeScript 允许你覆盖它的推断，并且能以你任何你想要的方式分析它

1. 尖括号

形式：<类型>变量名

let length: number = (<string>value).length;

2. as 形式：变量名 as 类型

let length: number = (value as string).length;

高级类型

联合/交叉类型

类型保护与类型守卫

泛型

利用泛型,实现函数第一个参数为第二个参数的子集

• Partial<>将类型定义的所有属性都修改为可选

函数返回值类型

• ReturnType<T>用于提取函数的返回值类型