这是我参与「第四届青训营」笔记创作活动的的第3天

TypeScript入门

基础数据类型

字符串 const q: string = 'string';
数字 const w: number = 1;
布尔值 const e: boolean = true;
null const r: null = null;
undefined const t: undefined = undefined;

对象类型

对象类型会在前面带一个大写I来区别普通的对象，通过interface定义

const bytedancer: IBytedancer = {
    jobId: 999,
    name: 'Jia',
    sex: 'woman',
    age: 22,
    hobby: 'swimming',
}
//定义对象类型
interface IByteancer {
    //只读属性：约束属性不可在对象初始化外赋值(readonly)
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    //可选属性：定义该属性可以不存在
    hobby?: string;
    //容易属性：约束所有对象属性都必须是该属性的子类型
    [key: string]: any;
}

函数类型

类型声明例子：

//1.直接在类型上补充
function add(x: number, y: number): number {
    return x + y;
}
//2.通过定义一个函数类型赋给一个变量，函数类型声明。
const mult: (x: number, y: number) => number = (x, y) => x * y;
//3.通过interface
interface IMult{
    (x: number, y: number): number;
}
const mult: IMult = (x, y) => x * y;

函数重载

对函数进行重载，timestamp为可缺省参数

步骤：

1.定义一个匿名函数，函数自变量，把函数自变量赋值给另一个变量，同时约定变量的类型 2.匿名函数赋值给一个变量，发生类型匹配。

数组类型

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

类型别名&类型断言

1. 类型别名 通过type关键字定义了IObjArr的别名类型

2. 类型断言 未指定类型时，result类型为{}对象，通过as关键字，断言result类型为正确类型。

字符串/数字字面量

允许指定字符串/数字必须的固定值。 IDomTag必须为html、body、div、span中的一种。

type IDomTag = 'html' | 'body' | 'div' | 'span';

IOddNumber必须为1、3、5、7、9中的一位 type IOddNumber = 1 | 3 | 5 | 7 | 9;

联合/交叉类型

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

交叉类型：IA & IB；多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

类型保护与类型守卫

类型保护：访问联合类型时，处于程序安全，仅能访问联合类型中的交集部分。

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

实现函数reverse，可将数组或字符串进行反转，有2中类型保护，typof类型保护和instance类型保护。

联合类型+类型保护=自动类型判断

高级类型

实现merge函数类型，要求sourceObj必须为targetObj的子集。

类型实现繁琐：若obj类型较为复杂，则声明source和target便需要大量重复2遍。

容易出错：若target增加/减少key，则需要source联动去除。

索引类型：关键字keyof，相当于取值对象中的所有key组成的字符串字面量。

关键字in：相当于取值字符串字面量中的一种可能，配合泛型，即表示每个key。

关键字？：通过设定对象可选选项，即可自动推到出子集类型。

函数返回值类型

关键字extends：跟随泛型出现时，表示类型推断，其表达可类比三元表达式。

关键字infer：出现在类型推荐中，表示定义类型变量，可用于代指类型。

TypeScript入门 | 青训营笔记