Skip to content

模板字符串类型

支持类型

模板字符串类型支持类型:基础数据类型、联合类型,不支持 Symbol 类型。

ts
type World = "world";
type Greeting = `hello ${World}`; // "hello world"
// 多个联合类型为交叉相乘的结果
type Direction = "left" | "right""up" | "down";
type Point = `Point: ${Direction}`; // "Point: left" | "Point: right" | "Point: up" | "Point: down"`
type BoxName = "padding" | "margin";
type Box = `${BoxName}-${Direction}`;
// "padding-left" | "padding-right" | "padding-up" | "padding-down" | "margin-left" | "margin-right" | "margin-up" | "margin-down"
ts
/**
 * 官方工具
 */
type World = "world";
type Greeting = `hello ${World}`; // "hello world"
type UpperCaseGreeting = UpperCase<Greeting>; // "HELLO WORLD"
type LowerCaseGreeting = LowerCase<Greeting>; // "hello world"
type CapitalizeGreeting = Capitalize<Greeting>; // "Hello world"
type UncapitalizeGreeting = Uncapitalize<Greeting>; // "hello world"
ts
const person = {
  firstName: "Jane",
  lastName: "Doe",
  age: 30,
};
type PersonKeys = keyof typeof person;
type PersonChanged = `${PersonKeys}Changed`; // "firstNameChanged" | "lastNameChanged" | "ageChanged"

结合 as 关键字实现键名重新映射

ts
const person = {
  firstName: "Jane",
  lastName: "Doe",
  age: 30,
};
type PersonKeys = keyof typeof person;
type PersonChanged = `${PersonKeys}Changed`; // "firstNameChanged" | "lastNameChanged" | "ageChanged"

type MapPersonKey = {
  [key in PersonKeys as `${key}Changed`]: string;
};
/**
 * 泛型
 */
type MapKey<T> = {
  // [key in keyof T as `${key}Changed`]: T[key]; // error
  // key 会报错“不能将类型“key”分配给类型“string | number | bigint | boolean | null | undefined”。”
  [key in keyof T as `${key & string}Changed`]: T[key]; // & string,确定key为string类型
};

type MapPersonKey2 = MapKey<typeof person>; // { firstNameChanged: string; lastNameChanged: string; ageChanged: string; }
ts
/**
 * 根据key,添加get/set方法
 */
type User = {
  name: string;
  age: number;
  address: string;
};

type GetterProxy<T extends object> = {
  [key in keyof T as `get${Capitalize<key & string>}`]: () => T[key];
};
type SetterProxy<T extends object> = {
  [key in keyof T as `set${Capitalize<key & string>}`]: (arg: T[key]) => void;
};

type UserProxy<T extends object> = T & GetterProxy<T> & SetterProxy<T>;

const user: UserProxy<User> = {
  name: "p1",
  age: 18,
  address: "beijing",
  getName() {
    return this.name;
  },
  setName(name: string) {
    this.name = name;
  },
  getAge() {
    return this.age;
  },
  setAge(age: number) {
    this.age = age;
  },
  getAddress() {
    return this.address;
  },
  setAddress(address: string) {
    this.address = address;
  },
};

Released under the MIT License.