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

什么是TypeScript

TypeScript发展历史

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

为什么要使用TypeScript？

TypeScript可以概括为亮点：1、静态类型；2、js的超集

静态类型

可读性增强:基于语法解析TSDoc，ide增强
可维护性增强:在编译阶段暴露大部分错误

多人合作的大型项目中,获得更好的稳定性和开发效率

JS的超集

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

TS语法

基础数据类型

string、number、boolean、null、undefined

const 变量名:类型名 = 数据
如：const q : string = 'string';

对象类型

const 对象名:类名{ 参数:数据 } 例：

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

函数类型

function add(x: number, y: number): number {return x + y;}

const mult: (x:number, y: number) =>{number = 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.toLocaleString() : date;
>
}
const x = getDate( 'date');// x: Date
const y = getDate( 'string' , '2018-01-10');//y: string

数组类型

TS的数组其实就是一个特殊的Object，我们可以用下图几种方法来定义数组

TypeScript补充类型

TypeScript泛型

以下是三种定义泛型的方法

function getRepeatArr(target){
return new Array(100).fill(target);
type IGetRepeatArr = (target: any) >any[l;
/年不预先指定具体的类型，而在使用的时候再指定类一种特性
type IGetRepeatArrR =<T>( target: T)> T[];
/*年泛型约束:限制泛型必须符合字符串*/
type IGetRepeatStringArr = cT extends string>(target: T)→ T0;const getStrArr: IGetRepeatStringArr = target =>
new Array( 100).fill(target);

/*本报错:类型"number""的参数不能赋给类型"string"的参数*/
getStrArr(123);
/*埤泛型参数默认类型*/
type IGetRepeatArr<T =number> = (target: T)=> T[;const getRepeatArr: IGetRepeatArr = target =>n
Array(100).fill(target);
/*报错:类型"string"的参数不能赋给类型"number"的参数*/
getRepeatArr( '123');

类型别名

/*术通过type关键字定义了I0bjArr的别名类型*/
type IObjArr = Array<{
key: string;
[objKey: string] : any;
function keyBy<T extends IObjArr>(objArr: Array<T>){
/*未指定类型时,result类型为得*/
const result = objArr.reduce((res, val,key
>{
res [key] = val;
return res;
},{});
/*通过as关键字,断言result类型为正确类型*/
return result as Record<string,T>;

字符串/数字/字面量

IDomTag必须为html、body、div、span中的其一

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

IOddNumber必须为1、3、5、7、9中的其一

type IOddNumber = 1 | 3 | 5 | 7 | 9;

高级类型

联合/交叉类型

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

TypeScript入门 | 青训营笔记