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

重点内容：

Typescript 见解
Typescript 基本语法
Typescript 高级类型

详细知识点：

一、什么是Typescript

JavaScript VS TypeScript

JS：动态类型，弱类型语言
TS：静态类型，弱类型语言
动态类型（dynamically typed systems）：在运行期间才去做数据类型检查的语言
静态类型（statically typed systems）：与动态语言相对应的，运行时结构不可变的语言就是静态语言
动态类型与静态类型区别：编译是发生在执行时还是执行前

弱类型语言：数据类型可以被忽略，一个变量可以赋不同数据类型的值。一旦给一个整型变量a赋一个字符串值，那么a就变成字符类型
强类型语言：一旦一个变量被指定了某个数据类型，如果不经过强制类型转换，那么它就永远是这个数据类型。你不能把一个整形变量当成一个字符串来处理。

为什么选择TypeScript？

静态类型：

可读性增强：基于语法解析TSDoc，ide增强
可维护性增强：在编译阶段暴露大部分错误（eg: 语法拼写错误，类型匹配错误） => 多人合作的大项目中，获得更好的稳定性和开发效率

JS的超集：

包含与兼容所有的JS特性，支持共存
支持渐进式引入与升级

二、基本语法

基础数据类型

类型定义格式：
变量变量名：类型名 = 值;

练习：创建Class

const person: IPerson = {
    nationalID: 123456,
    firstName: 'Else'; 
    lastName: 'Something';
    sex: 'other';
    job?: 'student';
}

interface IPerson {
    /* 只读属性：约束属性不可再对象初始化外赋值 */
    readonly nationalID: number;
    firstName:string; 
    lastName:string;
    /* 允许指定字符串 */
    sex: 'man' | 'woman' | 'other';
    /* 可选属性：定义该属性可以不存在 */
    job?: string;
    /* 任意属性：约束所有对象属性都必须是该属性的子类型 */
    [key: string]: any;
}

函数类型

函数两种表达方式：

/* 函数声明 */
function sum(x, y) {
    return x + y;
}
/* 函数表达式 */
const mult = (x, y) => x * y;

类型声明：

直接在函数上进行类型补充
（补充参数的类型）

function sum(x: number, y: number): number {
    return x + y;
}

给函数变量赋值一个类型声明

const mult: (x: number, y:number) => number = (x, y) => x * y;

OR 用Interface：

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, 4, 5, 6];
const arr2: IArr2 = [1, 2, '3', '4', { a: 1 }];
const arr3: IArr3 = [1 ,2, '3', '4'];
const arr4: IArr4 = ['string', () => null, {}, []];

补充类型

空类型，表示无赋值：

type IEmptyFunction = () => void;

任意类型，是所有类型的子类型：

type IAnyType = any;

枚举类型：支持枚举值到枚举名的正、反映射：

enum EnumExample {
    add = '+',
    mult = '*',
}
EnumExample['add'] === '+';
EnumExample['+'] === 'add';

枚举类型: 映射索引：

enum ECorlor {Mon, Tue, Wed, Thu, Fri, Sat, Sun };
ECorlor['Mon'] === 0;
ECorlor[0] === 'Mon';
}

泛型

泛型：指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray<string>(3, 'x'); // ['x', 'x', 'x']

泛型约束：在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法

三、高级类型

联合/交叉类型

interface IHistoryBook{
    author: string;
    type: string;
    range: string;
}
interface IStoryBook{
    author: string;
    type: string;
    theme: string;
}
type IBookList = Array<IHistoryBook | IStoryBook>

缺点：类型声明繁琐，存在较多重复
改进：

联合类型（Union Types）：IA | IB 表示一个值可以是几种类型之一
交叉类型（Intersection Types）：IA & IB 将多个类型合并为一个类型。可以把现有的多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性。

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

参考：

什么是强类型、弱类型、动态类型、静态类型语言
 www.tslang.cn/docs/home.h…

TypeScript 入门 ｜ 青训营笔记