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

课程要点

基础语法讲解
- 基础类型
- 泛型
- 类型别名&类型断言
高级数据类型
- 联合/交叉类型
- 类型保护与类型守卫
- extends

基础语法讲解

基础类型

基础数据类型

对象类型

const bytedancer:IByteDancer = {.....}
interfance IByteDancer{
    readonly jobId : number;
    name: string;
    sex: 'man' | 'women' | 'other';
    age: number;
    hobby?: string;
    [key:string] : any;
}

定义前面加上readonly表示只读属性，不可在对象初始化外赋值。

?:表示可选属性，可以不存在，存在则必须是其后面定义的类型。

[key: string]:any任意属性，约束所有对象都必须是该属性的子类型。

函数类型

interface IMult{
    (x:number,y:number):number;
}
const mult:IMult = (x,y)=>x*y

数组类型

/* [类型+方括号]表示 */
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=[1，2，3];
const arr2:IArr2=[1,2,'3','4',{a:1}];
const arr3:IArr3=[1,2,'3','4'];
const arr4:IArr4=['string',()=>null,{},[]];

第一种表示方法类似于普通数组定义，第二种泛型表示定义了数组额内数据的类型，第三种定义了数组每一位上数据的类型。

泛型

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

不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

泛型约束

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

限制泛型的类型，如上述代码中限制泛型必须符合字符串。

泛型参数默认类型

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

上述代码中用=规定泛型的默认类型为number。

类型别名&类型断言

type IObjArr = Array<{
    ket: string;
    [objKey: string]: any;
}>
function keyBy<T extends IObjArr>(objArr: Array<T>) {
    const result = objArr.reduce((res, val, key) => {
        res[key] = val;
        return res;
    }, {});
    return result as Record<string, T>;
}

在上述代码中，通过type关键字定义了IObjArr的别名类型，在函数keyBy的返回值中，通过as关键字断言result类型为正确类型。

高级数据类型

联合/交叉类型

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

联合类型：IA|IB；联合类型表示一个值可以是几种类型之一。

交叉类型：IA&IB；表示多种类型叠加到一起成为一种类型。

类型保护与类型守卫

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;
}

定义一个函数getIsIA，它的返回值是一个类型谓词，生效范围为子作用域。

extends

extends可以用于类型约束，当extends跟随泛型出现时，表示类型推断，其表达可类比三元表达式，如T===判断类型?类型A:类型B。

TypeScript 入门 | 青训营笔记