type AllLocaleIDs = ${EmailLocaleIDs | FooterLocaleIDs}_id
;
type Lang = “en” | “ja” | “pt”;
type LocaleMessageIDs = ${Lang}_${AllLocaleIDs}
;
//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>
每个字符转小写操作
例子:
type Greeting = “Hello, world”
type QuietGreeting = Lowercase
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-0EHbpR3J-1714154854856)]