typescript

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

js 与 ts的区别

js 动态语言弱类型语言

ts 静态类型弱类型语言

可读性增强:基于语法解析TSDoc，ide增强·可维护性增强:在编译阶段暴露大部分错误多人合作的大型项目中，获得更好的稳定性和开发效率包含于兼容所有Js特性，支持共存，支持渐进式引入与升级

定义类型变量：类型

通过：来规定类型

const e： string = 'string';

对象类型

通过大写的 “I”开头表示是一个类型

readonly只读属性

...?:string可选属性

任意属性 [key:类型]：any类型

[key: string]: any;

对函数类型声明

function add(x, y){
	return x + y;
}
const mult = (x, y) => x * y; //定义mult为一个的匿名函数

//2修改成为类型函数
function add(x: number, y: number): number {
    return x + y;
}
const mult = (x: number, y: number) => number = (x , y) => x * y;//好抽象

//1通过接口修改函数
interface IMult{
    (x: number, y: number): number;
}

const mult = IMult = (x, y) => x * y;

函数重载

function getDate(type: 'string',timestamp?: string): string;
//通过接口让 getDate函数进行重载
//写了 三个重载的表达式
interface IGetDate{
    (type: 'string', timestamp?: string): string;
    (type: 'date', timestamp?: string): Date;
    (type: 'string' | 'date', timestamp?:string): Date | string;// | 类型分隔符 表示取值可以为多种类型中的一种
}
/*
1、匿名函数 在ts 中默认是 any类型

2、不能将类型"(type: any,timestamp: any) => string | Date"分配给类型IGetDate".不能将类型"string | Date"分配给类型“string"。
3、不能将类型"Date"分配给类型“string”。ts(2322)
*/
const getDate2: IGetDate = (type, timestamp) => {
    const date = new Date(timestamp);
    return type === 'string'? date.toLocaleString() : date;
}

| 联合类型

用于类型之中的或逻辑运算。联合类型：表示类型取值可以为多种类型中的一种

type AgeType = string ｜ number;

const age: AgeType = '18';
const age: AgeType = 18;
复制代码

使用联合类型时，我们须尽量让值的当前类型和实际类型相匹配，类型保护 可以帮助我们实现相应功能

数组类型

//普通表示
type IArr1 = number[];
//泛型表示
type IArr2 = Array<string | number | Record<string, number>>; //Record是高级类型
//元祖表示
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, ，[]];

泛型 (使用中才定义)

泛型接口，泛型类，泛型别名

泛型约束

/*泛型约束：限制泛型必须符合字符串*/
type IGetRepeatStringArr = <T extends string|void>(target: T) => T[]; // 传回一个T的数组  约束在一定范围内
const getStrArr: IGetRepeatStringArr = target => new Array(100).fill(tairget);
/*报错:类型"number"的参数不能赋给类型“string"的参数*/
getStrArr(123);

泛型默认参数

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

介绍

泛型：generics，参数化类型，全称为 **泛型参数**.

因为我们要复用代码，所以有了继承。

补充类型

空类型void

任意类型any

枚举类型支持正反向映射

实例

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>;

类型别名（type） & 类型断言 as

/*
用type关键字定义了IObjArr的类型别名
因为这个二元组的Array 是一种新定义的类型 
！！！type 类似于c++ 里面的typeof  给一个变量取别名
*/
type IObjArr = Array<{  //这是一个object   因为js 中  就是一个 key 一个string就是一个object 数组这种意思
    key: string;
    [objKey: string]: any;
}>

function keyBy<T extends IObjArr>(objArr: Array<T>){//作用是把一个array 转化成 一个object 数组
    /*未指定类型时，result类型 没有被指定 会做默认类型推断 所以 得到的类型是空的 object*/
    const result = objArr.reduce((res, val, key) => {
        res[key] = val;
        return res;
    }, {});
    //通过as关键字，断言result类型为正确类型
    return result as Record<string, T>;
}

小结

import 解决了文件的复用。

继承解决了代码的复用。

泛型解决了算法的复用。

##自我提问

有哪些基本数据类型？怎么定义的？
有哪些高级数据类型？
泛型，和元祖是啥？

参考文档

【前端专场学习资料二】第五届字节跳动青训营 - 掘金 (juejin.cn)

typescript|青训营笔记