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

TypeScript的发展与基础语法

为什么是TypeScript?

JS是动态类型的弱类型语言

TS是静态类型的弱类型语言

TS是JS的超集：包含于兼容所有JS特性，可以共存

弱类型

弱类型语言会实行隐式转换

动态类型

在代码执行的时候做类型检验和匹配

静态类型

创建数据时需要显式指明该数据的类型

可读性强
可维护性强
利于多人开发

基础语法

基础数据类型

JS会自动匹配数据类型

对象类型

函数类型

在参数后加（：类型）

用interface来定义一个函数

函数重载

数组类型

type IArr1 = number[];
type IArr2 = Array<string | number Record<string, number>>;
type IArr3 = [number, number, string, string];
interface IArr4{
    [key: number]: any;
}

TypeScript泛型

interface IX<T, U> {
    key: T;
    val: U;
}

class IMan<T> {
    instance: T;
}

类型别名

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

高级类型

联合/交叉类型

联合类型：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 as IA).a;
}

function log2(arg: IA | IB){
    if(getIsIA(arg)){
        console.log(arg.a1)
    }else {
        console.log(arg.b1);
    }
}

merge函数类型

函数返回值类型

function delayCall(func){
    return new Promise(resolve => {
        setTimeout( () => {
            const result = func();
            resolve(result);
        },1000);
    })
}

type IDelayCall = <T extends () => any>(func: T) => ReturnType<T>;

type IReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

工程应用

浏览器web

webpack

配置webpack loader相关配置
配置tsconfig.js文件
运行webpack启动/打包
loader处理ts文件时，会进行编译与类型检查

Node.js

使用tsc编译

安装node与npm
配置tsconfig.js文件
使用npm安装tsc
使用tsc运行编译得到的js文件

总结

对于一个TypeScript的小白来说，这次课程里TypeScript基础语法中的泛型和类型别名以及高级类型中的联合/交叉类型，类型保护与类型守卫等都是难度较高的。不过这也给我指明了一个方向，让我知道要往哪些方向进行进一步的学习。

TypeScript入门 | 青训营笔记