typescript 进阶

这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

前言

“八月的色彩是用金子铸就的，明亮而珍贵；八月的色彩是用阳光酿造的，芬芳而灿烂。”

未来的日子，愿你把自己调至最佳状态，缓缓努力，慢慢变好 Y(^o^)Y

类型别名

类型别名用来给一个类型起个新名字，常用于联合类型

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个

type EventNames = 'click' | 'scroll';
function handleEvent(ele: Element, event: EventNames) {
    // todo
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dblclick'); // 报错，event 不能为 'dblclick'

// index.ts(7,47): error TS2345: Argument of type '"dblclick"' is not assignable to parameter of type 'EventNames'.

类型别名与字符串字面量类型都是使用 type 进行定义

元组

元组（Tuple）合并了不同类型的对象

定义一对值分别为 string 和 number 的元组。= let tom: [string, number] = ['Tom', 25]; 此种定义限制了数组中每个元素的类型，也就是说tom[0]必须为string，tom[1]必须为number。

如果为数组添加新的越界元素时，新元素的数据类型可以时元祖中的任意一种类型

✅ tom.push('jarry');

❌ tom.push(true); 
// Argument of type 'true' is not assignable to parameter of type 'string | number'.

枚举

枚举（Enum）类型用于取值被限定在一定范围内的场景，比如一周只能有七天，颜色限定为红绿蓝等。 通常使用枚举来定义一些关键字。

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

接口继承接口

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述

接口与接口之间可以继承的

interface Alarm {
    alert(): void;
}

interface LightableAlarm extends Alarm {
    lightOn(): void;
    lightOff(): void;
}

LightableAlarm 继承了 Alarm，除了拥有 alert 方法之外，还拥有两个新方法 lightOn 和 lightOff

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

✅ 可以指定它具体的类型为 string
createArray<string>(3, 'x'); // ['x', 'x', 'x']

✅ 可以不手动指定，而让类型推论自动推算出来
createArray(3, 'x'); // ['x', 'x', 'x']

我们在函数名后添加了 <T>，其中T用来指代任意输入的类型，在后面的输入value: T和输出 Array<T> 中即可使用了

结语

如果这篇文章帮到了你，欢迎点赞👍和关注⭐️。

文章如有错误之处，希望在评论区指正🙏🙏。