这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
前言
- 为什么什么是TypeScript?
- TypeScript基本语法
1.为什么什么是TypeScript?
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版本发布
stateDiagram-v2
JS--> 弱类型语言
JS --> 动态类型
stateDiagram-v2
TS--> 弱类型语言
TS --> 动态类型
静态类型：
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误
JS的超群：
- 包含于兼容所有JS特性，支持共存
- 支持渐进式引入与升级
2.TypeScript基本语法
基础数据类型：
/*字符串*/ /*字符串*/
const q='string'; const q: string='string'
/*数字*/ /*数字*/
const w=1; const w: number=1;
/*布尔值*/ = /*布尔值*/
const e=true; const e: boolean=true;
/*null*/ /*null*/
const r=null; const r: null=null;
/*undefined*/ /*undefined*/
const t=undefined; const t: undefined=undefined
对象类型：
const bytedancer: IBytedancer={
jobId=930245,
name:'Lin',
sex:'man',
age:28,
hobby:'swimming',
}
interfance IBytedancer{
/* 只读属性：约束属性不可在对象初始化外赋值 */
readonly jobId: 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:'woman',
age:18,
}
函数类型：
function add(x,y){
return x+y;
}
const mult=(x,y)=>x*y;
interface IMult{
(x: number,y: number): number;
}
const mult: IMult=(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;
函数重载：
/* 对getDate函数进行重载，timestamp为可缺省参数 */
function IGetDate{
(type:'string',timestamp?:string): srting;
(type:'date',timestamp?:string): Date;
(type:'string' | 'date',timestamp?: string): Date | string;
}
/* 不能将类型（type: any,timestamp: any)=>string | Date"分配给类型"IGetDate"
不能将类型"string | Date"分配给类型"string"
，不能将类型"Date"分配给类型"string"ts(2322)*/
const getDate2: IGetDate=(type, timestamp)=>{
const date=new Date(timestamp);
return type==='string' ? date.toLocaleString() : date;
}
数组类型：
/* 类型+方括号 表示 */
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,6];
const arr2: IArr2=[1,2,'3','4',{a:1}];
const arr3: IArr3=[1,2,'3','4'];
const arr4: IArr4=['string',()=>null,{},[]];
TypeScript补充类型：
/* 空类型，表示无赋值 */
type IEmptyFunction=()=>void;
/* 任意类型，是所有类型的子类型 */
type IAnyType=any;
/* 枚举类型：支持枚举值到枚举名的正，反向映射 */
enum EnumExample{
add='+',
mult='*',
}
EnumExample['add']==='+';
EnumExample['+']==='add';
enum ECorlor{
Mon,
Tue,
Wed,
Thu,
Fri,
Sat,
Sun,
};
ECorlor['Mon']===0;
ECorlor[0]==='Mon';
/* 泛型 */
type INumArr=Array<number>;
TypeScript泛型：
function getRepeatArr(target){
return new Array(100).fill(target);
}
type IGetRepeatArr=(target: any)=>any[];
/* 不预先指定具体的类型，而在使用的时候再指定类型的一种特性 */
type IGetRepeatArrR=<T>(target: T)=>T[];
/* 泛型接口 & 多泛型 */
interface IX<T,U>{
key: T;
val: U;
}
/* 泛型类 */
class IMan<T>{
instance: T;
}
/* 泛型别名 */
type ITypeArr<T>=Array<T>;
/* 泛型约束：限制泛型必须符合字符串 */
type IGetRepeatStringArr=<T extends string>(target: T)=> T[];
const getStrArr: IGetRepeatStringArr=target=>new Array(100).fill(target);
/* 报错：类型"number"的参数不能赋给类型"string"的参数 */
getStrArr(123);
/* 泛型参数默认类型 */
type IGetRepeatArr<T=number>=(target: T)=>T[];
const getRepeatArr: IGetRepeatArr=target=>new Array(100).fill(target);
/* 报错：类型"string"的参数不能赋给类型"number"的参数 */
getRepeatArr('123');
类名别名 & 类型断言：
/* 通过type关键字定义了IObjArr的别名类型 */
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
