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

星宇大前端

发布于 2021-09-23 15:02:49

6420

发布于 2021-09-23 15:02:49

模板文本类型建立在字符串文本类型的基础上，并且能够通过联合扩展为许多字符串。

它们的语法与JavaScript中的模板文本字符串相同，但用于类型位置。当与具体的文本类型一起使用时，模板文本通过连接内容生成新的字符串文本类型。

type World = "world";
 
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<Type> = {
    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<Type>(obj: Type): Type & PropEventSource<Type>;

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

模板文本类型推断

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

type PropEventSource<Type> = {
    on<Key extends string & keyof Type>
        (eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
 
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
 
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<Greeting>
           
//type ShoutyGreeting = "HELLO, WORLD"
 
type ASCIICacheKey<Str extends string> = `ID-${Uppercase<Str>}`
type MainID = ASCIICacheKey<"my_app">
//type MainID = "ID-MY_APP"

Lowercase<StringType>

每个字符转小写操作

例子：

type Greeting = "Hello, world"
type QuietGreeting = Lowercase<Greeting>
          
//type QuietGreeting = "hello, world"
 
type ASCIICacheKey<Str extends string> = `id-${Lowercase<Str>}`
type MainID = ASCIICacheKey<"MY_APP">
       
//type MainID = "id-my_app"

Capitalize<StringType>

作用：首字母大写

例子：

type LowercaseGreeting = "hello, world";
type Greeting = Capitalize<LowercaseGreeting>;
        
//type Greeting = "Hello, world"

Uncapitalize<StringType>

作用：首字母小写

type UppercaseGreeting = "HELLO WORLD";
type UncomfortableGreeting = Uncapitalize<UppercaseGreeting>;
              
//type UncomfortableGreeting = "hELLO WORLD"

类型字符串操作技术实现参考

function applyStringMapping(symbol: Symbol, str: string) {
    switch (intrinsicTypeKinds.get(symbol.escapedName as string)) {
        case IntrinsicTypeKind.Uppercase: return str.toUpperCase();
        case IntrinsicTypeKind.Lowercase: return str.toLowerCase();
        case IntrinsicTypeKind.Capitalize: return str.charAt(0).toUpperCase() + str.slice(1);
        case IntrinsicTypeKind.Uncapitalize: return str.charAt(0).toLowerCase() + str.slice(1);
    }
    return str;
}

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-09-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法