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

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版本发布

Js和Ts区别

JS：动态类型的弱类型语言 TS：静态类型的弱类型语言

弱类型语言的特征：类型转换。当我们运行一个字符串和数字相加的时候，会自动进行隐式类型转换。而在强类型语言中是没办法相加的。

静态类型

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

JS的超集

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

基本数据类型

JS：

const q = 'string';
/*字符串*/
const w = 1;
/*数字*/
const e = true;
/*布尔值*/
const r = null;
/*null*/
const t = undefined;
/*未定义*/
复制代码

TS：

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

对象类型

const bytedancer: IBytedancer = {
jobID: 9303245,
name: 'Lin',
gender: 'man',
age: 20,
}
/*对象实例*/

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

泛型

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

泛型接口&多泛型

  interface IX<T, U> {
      key: T;
      val: U;
  }
  
复制代码

泛型类

  class IMan<T> {
      instance: T;
  }
  
复制代码

泛型别名

  type ITypeArr<T> = Array<T>
  
复制代码

泛型约束：限制泛型必须符合字符串
泛型参数默认类型

字符串/数字字面量

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

高级类型

联合/交叉类型

类型保护与类型守卫

工程应用

Webpack

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

使用TSC编译

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

TypeScript入门|青训营笔记