这是我参与「第四届青训营 」笔记创作活动的第2天。本文主要对TypeScript进行讲解。

TypeScript 见解

1. TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。
2. TypeScript 由微软开发的自由和开源的编程语言。
3. TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

TypeScript 与JavaScript

静态类型

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

JS的超集

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

增加的功能

TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

基本语法

基础数据类型

JavaScript

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

TypeScript

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

对象类型

• 只读属性：约束属性不可在对象初始化外赋值
• 可选属性：定义该属性可以不存在
• 任意属性：约束所有对象属性都必须是该属性的子类型

const bytedancer: IBytedancer = {
    jobId: 9303245,
    name: 'Lin',
    sex: 'man',
    age: 28,
    hobby: 'swimming',
}

interface IBytedancer{
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    hobby?: string;
    [key: string]: any;
}

函数类型

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

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

函数重载

数组类型

• [类型 + 方括号]表示
• 泛型表示
• 元祖表示
• 接口表示

Typescript补充类型

• 空类型，表示无赋值
• 任意类型，是所有类型的子类型
• 枚举类型，支持枚举值到枚举名的正、反向映射

Typescript泛型

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

type IGetRepeatArrR = <T>(target: T) => T[];

类型别名 & 类型断言

通过type关键词定义了IObjArr的别名类型

type IObjArr = Array<{
    key: string;
    [objKey: string]: any;
}>

通过as关键字，断言result类型为正确类型

function keyBy<T extends IObjArr>(objArr: Array<T>){
    /*未指定类型时，result类型为 {} */
    const result = objArr.reduce((res, val, key) => {
        res[key] = val;
        return res;
},{});

字符串/数字 字面量

允许指定字符串/数字必须的固定值

高级类型

联合/交叉类型

类型保护与类型守卫

函数返回值类型