TypeScript入门｜ 青训营笔记

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

TypeScript是一门静态类型的弱类型语言

静态类型

• 可读性增强：基于语法解析TSdoc，ide增强
• 可维护性增强：在编译阶段暴露大部分错误
• 在多人合作的大型项目中，获得更好的稳定性与开发效率

JS超集

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

基本语法

• 基本数据类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi", hi	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

const q: string='string'; //q的类型为字符串

• 自定义对象类型

interface IBytedancer{
    readonly job:number;
    name:string;
    sex:'man'|'woman'|'other';
    age:number;
    hobby?:string;
    [key:string]:any;
}

interface用来自定义数据类型这里用关键词interface定义了一个对象，其中？表示次属性为可选属性，[key:string]:any;添加的任意属性key都必须是字符串值可以为任意。

• 函数类型

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; //通过自定义类型给函数指定 来限制函数参数

• 数组类型

type IArr1=number[];
type IArr2=Array<string|number|Record<string,number>>
type IArr3=[number,number,string,string]
interface IArr4{
    [key:number]:any;
}

用type关键字来给类型取别名，通过这个可以定义更加复杂的类型，Record用于属性映射。一些TS中高级类型介绍

• 类型补充

function getRepeatArr(target){
    return new Array(100).fill(target);
}
type IGetRepeatArr=(target:any)=>any[];
type IGetRepeatArr2=<T>(target:T)=>T[];

<T>括号内表示泛型，即不预先指定具体的类型，而在使用的时候再指定类型的同一特性。

interface IX<T,U>{
    key:T;
    val:U;
}
class IMan<T>{
    instance:T;
}
type ITypeArr<T>=Array<T>

extends关键词用于对于泛型T的限制

type IObjArr=Array<{
    key:string;
    [objkey:string]:any;
}>
function keyBy<T extends IObjArr>(objArr:Array<T>){              //把Array转换为Object
    const   result=objArr.reduce((res,val,key)=>{
        res[key]=val;
        return res
    },{});
    return result as Record<string, T>
}   

通过关键字as断言result的类型为正确类型。