TypeScript入门篇 ｜ 青训营笔记

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

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

• JavaScript

  动态类型，弱类型语言

• TypeScript

  静态类型，弱类型语言

  优势：

  • 可读性增强，基于语法解析TSDoc，ide能力得到增强

  • 可维护性增强：在编译阶段暴露大部分错误

  • 是JS的超集

    包含于兼容所有JS特性，可以共存

    支持渐进式引入与升级

基本语法

1.基础数据类型

传统JavaScript(TypeScript可以直接使用)

//字符串
const q = 'string';
//数字
const w = 1;
//布尔值
const e = true;
//null;
const r = null;
//undefined
const t = undefined;

用TypeScript改进

 //字符串
const q : 'string';
//数字
const w : 1;
//布尔值
const e : true;
//null
const r : null;
//undefined
const t : undefined;

2.对象类型

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

3.函数类型

 function add(x,y){ 
     return x+y; 
 } 
 const mult = (x,y) => x * y;

上方的add函数和mult函数，给其添加类型声明：

 //直接为函数补上参数类型和返回值类型
 function add(x: number,y: number): number{ 
     return x+y; 
 } 
 
 //定义一个函数类型，并且把类型赋给变量
 const mult : (x:number,y:number) => number=(x,y) => x*y;
 
 //通过interface定义类型 
 interface IMult{
     (x: number,y: number): number; 
 } 
 const mult: IMult = (x,y) =>x*y;

4.函数重载

 //对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'); 
const y = getDate('string', '2022-8-5'); 


//简化代码，通过interface实现以上函数重载 
interface IGetDate{ 
    (type: 'string',timestamp?: string): string; 
    (type: 'date',timestamp?: string): Date; 
    (type: 'string'|'date',timestamp?: string): Date | string; 
} 
//报错：不能将类型“（type:any,timestamp:any）=>string|Date”分配给类型"IGetDate"。不能将类型"string|Date"分配给类型"string"。不能将类型"Date"分配给类型"string"。 
//类型匹配不上，为了让类型通过，需要让IGetDate的范围大于函数，只需将type:'string'改为any即可 
const getDate2: IGetDate = (type, timestamp)=>{ 
    const date = new Date(timestamp); 
    return type === 'string'?date.toLocaleString() : date; 
}

5.数组类型

//类型+方括号表示 
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,{},[]];

6.TypeScript补充类型

//空类型，表示无赋值 
type IEmptyFunction = ()=>void; 
//任意类型，是所有类型的子类型 
type IAnyType =any; 
//枚举类型，支持枚举值到枚举名的正反向映射 
enum EnumExample{ 
    add = "+", 
    mult = "*" 
} 
EnumExample['add'] === '+'; 
EnumExample['+'] === 'add'; 

enum EColor{Mon,Tue,Wed,Thu,Fri,Sat,Sun}; 
EColor['Mon']===0; 
EColor[0]==='Mon'; 
//泛型 
type INumArr = Array<number>;

7.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[]; 
//报错，number类型的参数不能赋给string类型的参数 
const getStrArr: IGetRepeatStringArr = target=>new Array(100).fill(target); 

//泛型参数默认类型 
type IGetRepeatArr<T = number>=(target: T) =>T[]; 
//没有传类型，默认number 
const getRepeatArr: IGetRepeatArr = target =>new Array(100).fill(target) 
//报错，string类型的参数不能赋给number类型的参数 
getRepeatArr('123');

8.类型别名&类型断言

//通过type关键字定义了IObjArr的别名类型 
type IObjArr = Arrat<{ 
    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>; 
}

9.字符串/数字 字面量

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

//tag必须为html，body，div，span其中一个 
type tag = 'html'|'body'|'div'|'span'; 
//num必须为1,3,5,7,9其中一个 
type num = 1|3|5|7|9;