0
点赞
收藏
分享

微信扫一扫

TypeScript系列教程九《类型转换》-- 模板文本类型

mjjackey 2022-04-29 阅读 36

两个联合类型插值,相当于联合类型子集的笛卡尔积

type AllLocaleIDs = ${EmailLocaleIDs | FooterLocaleIDs}_id;

type Lang = “en” | “ja” | “pt”;

type LocaleMessageIDs = ${Lang}_${AllLocaleIDs} 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 ;

//type LocaleMessageIDs = “en_welcome_email_id” | “en_email_heading_id” | “en_footer_title_id” | “en_footer_sendoff_id” | “ja_welcome_email_id” | “ja_email_heading_id” | “ja_footer_title_id” | “ja_footer_sendoff_id” | “pt_welcome_email_id” | “pt_email_heading_id” | “pt_footer_title_id” | “pt_footer_sendoff_id”

建议人们对大型字符串联合使用提前生成,但这在较小的情况下很有用。

[](()类型中的字符串联合

当基于类型中的现有字符串定义新字符串时,模板文本的威力就来了。

例如,JavaScript中的一个常见模式是基于对象当前拥有的字段扩展对象。我们将为一个函数提供一个类型定义,它增加了对on函数的支持,该函数可以让您知道值何时发生了更改:

const person = makeWatchedObject({

firstName: “Saoirse”,

lastName: “Ronan”,

age: 26,

});

person.on(“firstNameChanged”, (newValue) => {

console.log(firstName was changed to ${newValue}!);

});

请注意,在侦听事件“firstNameChanged”时,模板文本提供了一种在类型系统内处理此类字符串操作的方法,而不仅仅是“firstName”:

type PropEventSource = {

on(eventName: ${string & keyof Type}Changed, callback: (newValue: any) => void): void;

};

/// Create a “watched object” with an ‘on’ method

/// so that you can watch for changes to properties.

declare function makeWatchedObject(obj: Type): Type & PropEventSource;

通过这种方式,我们可以构建在给定错误属性时出错的内容:

在这里插入图片描述

[](()模板文本类型推断

上面callback 的类型是any ,没有按照属性推断类型,我们可以利用泛型和Key进行推断。

type PropEventSource = {

on<Key extends string & keyof Type>

(eventName: ${Key}Changed, callback: (newValue: Type[Key]) => void ): void;

};

declare function makeWatchedObject(obj: Type): Type & PropEventSource;

const person = makeWatchedObject({

firstName: “Saoirse”,

lastName: “Ronan”,

age: 26

});

person.on(“firstNameChanged”, newName => {

(parameter) newName: string

console.log(new name is ${newName.toUpperCase()});

});

person.on(“ageChanged”, newAge => {

(parameter) newAge: number

if (newAge < 0) {

console.warn(“warning! negative age”);

}

})

这样我们就可以调用属性名+Changed方法,然后找到属性推断出类型。

[](()内在字符串操作类型

为了帮助进行字符串操作,TypeScript包括一组可用于字符串操作的类型。为了提高性能,这些类型是编译器内置的,在TypeScript附带的.d.ts文件中找不到。

Uppercase<StringType>

大写操作,每个字符大写

例子:

type Greeting = “Hello, world”

type ShoutyGreeting = Uppercase

//type ShoutyGreeting = “HELLO, WORLD”

type ASCIICacheKey = ID-${Uppercase<Str>}

type MainID = ASCIICacheKey<“my_app”>

//type MainID = “ID-MY_APP”

Lowercase<StringType>

每个字符转小写操作

例子:

举报

相关推荐

0 条评论