这是我参加⌈第四届青训营⌋笔记创作活动的第6天。
一，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？
TypeScript与javascript区别：
JS：动态类型
TypeScript：静态类型
- 可读性增强：基于语法解析TSDoc,idea增强
- 可维护性增强；再编译阶段暴露大部分错误=>多人合作的大型项目中，获得更好的稳定性和开发效率
三，基本语法
1,基础数据类型
/*字符型*/
const q:string='string';
/*数字*/
const w:number=1;
/*布尔值*/
const e:boolean=true;
/*null*/
const r:null=null;
/*undefined*/
const t:undefined=undefined;
2,对象类型
const bytedancer: IBytedancer ={
jobId:9303245,
name:'Lin',
sex:'man',
age:28,
hobby:'swimming',
}
interface IBytedancer{
readonly joId: number;
name:string;
sex:'man'|'woman'|'other';
age:number;
hobby?:string;
[key:string]:any;
}
/*报错：无法分配到jobId,因为它只读属性*/
bytedancer.jobId=12345;
/*成功：任意属性标注可以添加任意属性*/
bytedancer.plateform='data';
/*报错：缺少属性“name”，hobby可以缺省*/
const bytedancer2:IBytedancer={
jobId:89757,
sex:'women',
age:18,
}
3,函数类型
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 IMult{
(x:number,y:number):number;
}
const mult:IMult=(x,y)=>x*y;
4,数组类型
type IArr1=number[];
tyoe IArr2=Array<string|nuumber|Record<string,number>>;
type IArr3=[number,number,string,string];
interface IArr4{
[key:number]:any;
}
const ar1: IArr1=[1,2,3,4,5,6];
const ar2: IArr2=[1,2,'3','4',{a:1}];
const ar1: IArr1=[1,2,'3','4'];
const ar1: IArr1=['string',()=>null,{},[]];
5,Typescript泛型
function getRepeatArr(target){
return new Array(100).fill(target);
}
type IGetRepeatArr=(target:any)=>any[];
type IGRepeactArrR=<T>(target:T)=>T[];
/*泛型接口&多泛型*/
interfaceIX<T,U>{
key:T;
val:u;
}
/*泛型类*/
class IMan<T>{
instance:T;
}
/*泛型别名*/
type ITypeArr<T>=Array<T>;
6，字符串/数字/字面量
/*允许指定字符串/数字必须的固定值*/
/*IDomTag必须为html,body,div,span中其中之一*/
type IDomTag='html'|'body'|'div'|'span';
/*IOddNumber必须为1，3，5，7，9中的其中之一*/
type IDomTag=1|3|5|7|9;
