2024年最全TypeScript系列教程九《类型转换》-- 模板文本类型(1)，高级前端工程师面试题2024

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

type Greeting = hello ${World};

//type Greeting = “hello world”

联合类型插值

type EmailLocaleIDs = “welcome_email” | “email_heading”;

type FooterLocaleIDs = “footer_title” | “footer_sendoff”;

type AllLocaleIDs = ${EmailLocaleIDs | FooterLocaleIDs}_id;

//type AllLocaleIDs = “welcome_email_id” | “email_heading_id” | “footer_title_id” | “footer_sendoff_id”

两个联合类型插值

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

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>

大写操作，每个字符大写

例子：

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

前端面试题汇总