这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

重点内容

Typescript 基础语法讲解
Typescript 类型

泛型
类型别名 & 类型断言

Typescript 高级类型讲解

联合类型 & 交叉类型
类型守卫 & 类型保护

基础数据类型

const a: number = 1; // number
const b: string = '1'; // string
const c: null = null; // null

对象数据类型

const bytedancer:IByteDancer = {.....}

interfance IByteDancer{
    readonly jobId : number;
    hobby?: string;
    name: string;
    [key:string] : any;
}

其中interface关键字是定义类型接口。语法格式为interface IName，以I开头+名字的方式。readonly表示只读，不可以修改，?:表示可选属性，语法[key:类型]:any表示任意类型变量。

数组类型

type IArr1 = number[]
type IArr2 = Array<string|number|Record<string,number>>
type IArr3 = [number,number,string,string]

//接口表示,任意类型
interface IArr4{
-   [key:number]:any;
}

const arr1:IArr1=[2,3,3,4]
const arr2:IArr2=[1,3,'3','str',{a:1}]
const arr3:IArr3=[1,2,'3','4']

泛型

当不知道用什么类型，只有在使用的时候才知道数据类型时，此时可以考虑使用泛型。extends表示类型约束

type IGetRepeatArr = <T>(target:T)=>T[]

泛型约束：限制泛型必须符合字符串，表示如下：

type IType = <T extends string>(target:T)=>T[]

泛型参数默认类型,表示如下：

type IType<T=number>=(target:T)=>T[]

type表示类型别名，定义了别名类型
as关键字表示类型断言

Ts高级类型：联合/交叉类型

type IBookList = Array<{
  author:string;
}&({
  type:'history';
  range:string
})|{
  type:'story';
  theme:string;
}>

联合/交叉类型适合定义两种类型既有重复部分，同时又有自己独立的类型部分的类型定义。&表示交叉部分。

类型保护和类型守卫

类型守卫适合类型无重合点的定义类型守卫：定义一个函数，它返回一个类型谓词，有效范围为子作用域

interface IA{a:1,a1:2}
interface IB{b:1,b1:2}
function getIsIA (arg:IA|IB):arg is IA{
    return !!(arg aas IA).a;
}

联合类型+类型保护=自动类型判断 keyof关键字：其相当于取值对象中的所有key组成的字符串字面量

type Ikeys = keyof{a:string;b:string}
// 上面的代码等价于下面这句
type Ikeys = "a"|"b"

TypeScript 入门 | 青训营笔记