这是我参与「第四届青训营」笔记创作活动的的第12天，今天的课程是「TypeScript入门」，老师主要讲解了 TypeScript发展历史、 TypeScript基本语法、 TypeScript高级类型、 TypeScript工程应用等内容。

TypeScript

TypeScript发展历史

2012-10：微软发布了TypeScript第一个版本（0.8）
2014-10：Angular发布了基于TypeScript的2.0版本
2015-04：微软发布了Visual Studio Code
2016-05：@types/react发布，TypeScript可开发React
2020-09：Vue发布了3.0版本，官方支持TypeScript
2021-11：v4.5版本发布

为什么选择TypeScript

JavaScript：动态类型、弱类型语言
TypeScript：静态类型、弱类型语言

动态类型的一个特征是代码到了执行阶段才去确定类型的匹配，而静态类型会提前进行匹配，例如python、java等。

TypeScript和JavaScript主要区别就在于动态类型和静态类型。

静态类型
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误
  =>多人合作的大型项目中，获得更好的稳定性和开发效率
JS的超集
- 包含与兼容所有JS特性，支持共存
- 支持渐进式引入与升级

基本语法

基础数据类型

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:1234567,
    name:'Chen',
    sex:'woman',
    age:22,
    hobby:'swimming',
}

interface IBytedancer{
    /*只读属性：约束属性不可在对象初始化外赋值*/
    readonly jobId:number;
    name:string;
    sex:'man'|'woman'|'other';
    age:number;
    /*可选属性：定义该属性可以不存在*/
    hobby?:string;
    /*任意属性：约束所有对象属性都必须是该属性的子类型*/
    [key:string]:any;
}

函数类型

添加类型声明前：

function add(x,y){
    return x + y;
}
const mult = (x,y) => x * y;

添加类型声明后：

function add(x:number,y:number):number{
    return x + y;
}
const mult:(x:number,y:number) => number = (x,y) => x * y;

通过interface来定义类型：

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

函数重载

对getDate函数进行重载，其中timestamp为可缺省参数：

function getDate(type:'string',timestamp?:string):string;
function getDate(type:'date',timestamp?:string):Date;
function getDate(type:'string' | 'date',timestamp?:string):Date | string{
    const date = new Date(timestamp);
    return type === 'string' ? date.toLocalString():date;
}

const x = getDate('date');//x:Date
const y = getDate('string','2018-01-10');//y:string

数组类型

/*类型+方括号 表示*/
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,{},[]];

TypeScript补充类型

/*空类型，表示无赋值*/
type IEmptyFunction = () => void;
/*任意类型，是所有类型的子类型*/
type IAnyType = any;
/*枚举类型：支持枚举值到枚举名的正、反向映射*/
enum EnumExample{
    add = '+',
    mult = '*',
}
/*
EnumExample['add'] === '+';
EnumExample['+'] === 'add';
*/
/*泛型*/
type INumArr = Array<number>;

高级类型

联合/交叉类型

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

类型保护与类型守卫

类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域。
联合类型+类型保护=自动类型推断

工程应用

TypeScript工程应用-Web

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

TypeScript工程应用-Node

使用TSC编译
1、安装Node与npm
2、配置tsconfig.js
3、使用npm安装tsc
4、使用tsc运行编译得到js文件

TypeScript入门 ｜ 青训营笔记