掌握 TypeScript 模板文字类型：提高代码安全性和表现力

此类型递归地转换输入字符串，将下划线后的每个部分大写。 infer 关键字在这里至关重要 - 它允许我们将字符串的一部分提取到新的类型变量中。

但是为什么停在那里呢？我们可以使用这些技术在我们的类型系统中构建整个领域特定语言（dsl）。想象一下创建一个类型安全的 sql 查询构建器：

type table = "users" | "posts" | "comments";
type column = "id" | "name" | "email" | "content";

type select = `select ${c} from ${t}`;
type where = `where ${t}`;

type query = 
  `${select} ${where}`;

type userquery = query<"users", "name" | "email", "id = 1">; 
// "select name, email from users where id = 1"

此设置确保我们仅从有效表中选择有效列，所有这些都在编译时进行检查。不会再出现因列名输入错误而导致的运行时错误！

我们可以通过实现更复杂的类型级计算来更进一步。让我们创建一个可以执行基本算术的类型：

type digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
type adddigits = 
  // ... (implementation details omitted for brevity)

type add = 
  // ... (implementation details omitted for brevity)

type result = add<"123", "456">; // "579"

type form = {
  name: string;
  email: string;
  age: number;
};

type validationrule = t extends string
  ? "isstring"
  : t extends number
  ? "isnumber"
  : never;

type validationschema = {
  [k in keyof t]: validationrule;
};

type formvalidation = validationschema
;
// { name: "isstring", email: "isstring", age: "isnumber" }

type chainable = {
  set: (key: k, value: v) => chainable;
  get: () => t;
};

declare function createchainable(): chainable;

const result = createchainable()
  .set("foo", 123)
  .set("bar", "hello")
  .get();

// result type: { foo: number, bar: string }

佳蓝在线销售系统(创业版) 佳蓝在线销售

1、对ASP内核代码进行DLL封装，从而大大提高了用户的访问速度和安全性；2、采用后台生成HTML网页的格式，使程序访问速度得到进一步的提升；3、用户可发展下级会员并在下级购买商品时获得差额利润；4、全新模板选择功能；5、后台增加磁盘绑定功能；6、后台增加库存查询功能；7、后台增加财务统计功能；8、后台面值类型批量设定；9、后台财务曲线报表显示；10、完善订单功能；11、对所有传输的字符串进行安全

下载

编译时元编程最强大的方面之一是能够基于现有类型生成新类型。我们可以使用它来创建实用程序类型，以有用的方式转换其他类型。例如，让我们创建一个类型，使对象的所有属性都是可选的，但仅限于第一级：

type shallowpartial = {
  [p in keyof t]?: t[p] extends object ? t[p] : t[p] | undefined;
};

type user = {
  name: string;
  address: {
    street: string;
    city: string;
  };
};

type partialuser = shallowpartial;
// {
//   name?: string | undefined;
//   address?: {
//     street: string;
//     city: string;
//   } | undefined;
// }

此类型使顶级属性可选，但使嵌套对象保持不变。它是 typescript 内置 partial 类型的更细致的版本。

我们还可以使用模板文字类型来创建更具表现力的错误消息。我们可以引导开发人员找到确切的问题，而不是出现神秘的类型错误：

type assertequal = t extends u
  ? u extends t
    ? true
    : `expected ${u}, but got ${t}`
  : `expected ${u}, but got ${t}`;

type test1 = assertequal<"hello", "hello">; // true
type test2 = assertequal<"hello", "world">; // "expected "world", but got "hello""

这种技术在库开发中特别有用，向用户提供清晰的反馈至关重要。

另一个有趣的应用是创建类型安全的事件发射器。我们可以使用模板文字类型来确保事件名称及其相应的负载正确匹配：

type eventmap = {
  "user:login": { userid: string };
  "item:added": { itemid: number; quantity: number };
};

type eventname = keyof eventmap;

class typedeventemitter> {
  emit(event: e, data: t[e]): void {
    // implementation details omitted
  }

  on(event: e, callback: (data: t[e]) => void): void {
    // implementation details omitted
  }
}

const emitter = new typedeventemitter();

emitter.emit("user:login", { userid: "123" }); // ok
emitter.emit("item:added", { itemid: 456, quantity: 2 }); // ok
emitter.emit("user:login", { itemid: 789 }); // type error!

此设置可确保我们始终发出并侦听具有正确负载类型的事件。

模板文字类型也可用于实现类型级状态机。这对于复杂工作流程或协议的建模非常有用：

type State = "idle" | "loading" | "success" | "error";

type Event = "fetch" | "success" | "failure" | "reset";

type Transition =
  S extends "idle"
    ? E extends "fetch"
      ? "loading"
      : S
    : S extends "loading"
    ? E extends "success"
      ? "success"
      : E extends "failure"
      ? "error"
      : S
    : S extends "success" | "error"
    ? E extends "reset"
      ? "idle"
      : S
    : never;

type Machine = {
  state: S;
  transition: (event: E) => Machine>;
};

declare function createMachine(initialState: S): Machine;

const machine = createMachine("idle")
  .transition("fetch")
  .transition("success")
  .transition("reset");

type FinalState = typeof machine.state; // "idle"