这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
what TypeScript？
直到2020-09，三大框架（Vue，Angular，React）都支持TypeScript
why TypeScript？
1、TS(静态类型的弱类型语言)与JS(动态类型的弱类型语言)的区别
-
动态类型语言：动态类型语言是指在运行期间才去做数据类型检查的语言，也就是说，在用动态类型的语言编程时，永远也不用给任何变量指定数据类型（变量使用之前不需要类型声明），该语言会在你第一次赋值给变量时，在内部将数据类型记录下来。
-
静态类型语言：静态类型语言与动态类型语言刚好相反，它的数据类型是在编译其间检查的，也就是说在写程序时要声明所有变量的数据类型。
-
弱类型语言：某一个变量被定义类型，该变量可以根据环境变化自动进行转换，不需要经过显性强制转换。（类似‘a’+1）。
2、静态类型的优势
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率
3、TS是JS的一个超集
- 包含兼容所有JS特性，支持共存
- 支持渐进式引入与升级
- TypeScript有"类"
- TypeScript有"模块"
- js没有重载概念，ts有可以重载
- ts对比js基础类型上，增加了 void/元组等等
How TypeScript？
基础数据类型：
左（js），右（ts）
const q='string';==>const q: string='string';const w=1;==>const w: number=1;const e=true;==>const e: boolean=true;const r=null;==>const r:null=null;const t=undefined==>const t:undefined=undefined;
对象类型：
定义对象类型名称时会在名词前加"I"表示该对象是一个类型
eg：const bytedancer:IBytedancer = {}
定义类型使用interface
函数类型：
函数也支持使用interface定义类型
函数重载：
function getDate(type:'string',timestamp?: string):string;
timestamp为可缺省函数，在变量后加一个“？”则为可缺省函数
数组类型:
type IArr1=number[];类型+方括号表示type IArr2=Array<string|number|Record<string,number>>;泛式表示type IArr3=[number,number,string,string];元祖表示- 接口表示
interface IArr4{
[key:number]:any;
}
Typescript泛式
在不定义类型时类型不确定，用target指代
泛型约束:使用extends
type IGetRepeatStringArr = 限制泛型必须
符合字符串
泛型参数默认类型 type IGetRepeatArr<T = number> =(target:T) 默认了数据类型为number类型
字符串/数字 字面量
-
允许指定字符串/数字必须的固定值
-
IDomTag必须为html、body、div、span中的其一
type IDomTag = 'html' | 'body' | 'div' | 'span';
- IDomNumber必须为1、3、5、7、9中其一
type IDomNumber = 1|3|5|7|9
