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

什么是TypeScript?

TypeScript 是由微软开发的一款开源的编程语言，TypeScript 是 Javascript 的超集，遵循最新的 ES6、ES5 规范，TypeScript 扩展了 JavaScript 的语法。TypeScript 更像后端 Java、C#这样的面向对象语言，可以让 JavaScript 开发大型企业项目。谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法，最新的 Vue 、React 也可以集成 TypeScript。Nodejs 框架中的 Nestjs、midway 中用的就是 TypeScript 语法，它支持与JS共存，它是静态类型的，它的可读性更强，可维护性更强，在多人合作的大型项目中，它有更好的稳定性和更能提高开发效率。

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？

JS（动态类型）

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

TS（静态类型）

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

基本语法

基础数据类型

字符串： 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: 12345,
    name: 'liming',
    sex: '男',
    age: 45,
    hobby: 'swimming',
}

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

bytedancer.jobId = 123321; //报错：无法分配到“jobId”, 因为它是只读属性
bytedancer.plateform = 'data'; //成功：任意属性标注下可以添加任意属性
const bytedancer2: IBytedancer = {
    jobId: 12345,
    name: 'liming',
    sex: '男',
} //报错:缺少属性"name"，hobby可缺省
复制代码

函数类型

const mult: (x: number, y: number) => number = (x, y) => x*y;
复制代码

函数重载

function getDate(type: 'string', timestamp?: string): string;
interface IGetDate {
    (type: 'string', timestamp?: string): string;
    (type: 'date', timestamp?: string): Date;
    (type: 'string'|'date', timestamp?: string): Date|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];
const arr1: IArr2 = [1,2,'3','4', {a:1}];
const arr1: IArr1 = [1,2,'3','4'];
const arr1: IArr1 = ['string', () => null, {}, []];
复制代码

Typescript补充类型

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

type INumArr = Array<number>; //泛型
复制代码

字符串/数字 字面量

type IDomTag = 'html' | 'body' | 'div' | 'span'; //IDomTag必须为html, body, div, span中的其一
type IOddNumber = 1 | 2 |3 | 4; //IOddNumber必须为1,2,3,4中的其一
复制代码

TypeScript的工程应用

Web

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

Node

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