Типы строк шаблона машинописного текста

Как сузить типы строк с помощью механизма шаблонных строк

Tom Машинопись и JavaScript, Руководства по кодированию, Обучение

Что такое литералы шаблонов

Начиная с Typescript 4.1, вы можете значительно улучшить набор текста для ваших строк. Напомним, что в Typescript вы можете определять так называемые «литеральные типы». Вместо того, чтобы просто определять переменную как строку, вы можете сузить тип до определенного набора разрешенных строк.

// Define a mutable string as 'Literal Type'.
let key: "name" | "department" = "name";

// This works, as 'department' is part of the type.
key = "department";
// Won't work, as it's not define in the union type.
key = "company";

// Of course, the same applies for functions.
function getKey(): "name" | "department" {
  return Math.random() <= 0.5 ? "name" : "department";
}

typescriptLanguageCheck out all coding posts

Начиная с Typescript 4.1, эта концепция получила дальнейшее развитие. Взяв за основу «Template Literal Strings» из Javascript в качестве вдохновения, вы можете применить тот же синтаксис к своим типам литералов в Typescript. Основное отличие состоит в том, что с «типами шаблонных литералов» вы получаете гораздо большую гибкость, поскольку сам тип может принимать параметры для этой формы - концепция аналогична универсальным, но немного отличается тем, что требует определенных значений.

// Define a Literal Type
type State = "ready";

// Nice, isn't it? As in Javascript's 
// 'template literal strings', we can
// reuse the same syntax for TS.
//
// The create type here is now 'Key-ready'.
type Key = `key-${State}`;

typescriptLanguageCheck out all coding posts

// This of course works for union types as well.
// Let's take these non-descriptive types for a 
// quick demo:
type GraphState = "sleep" | "ready" | "error";
type MachineState = "booting" | "running";

// And here's the 'template literal type':
type EntityState = `ES-${GraphState | MachineState}`;

// The possible combinations therefore 
// work out like this:
//
// type EntityState = 'ES-sleep' 
//  | 'ES-ready'
//  | 'ES-error'
//  | 'ES-booting'
//  | 'ES-running'

typescriptLanguageCheck out all coding posts

В Typescript 4.3 есть еще больше

На момент написания этой статьи был выпущен релиз-кандидат для Typescript 4.3, который включает дальнейшие улучшения для типов литералов шаблонов.

Система типов теперь еще более динамична и может лучше определять правильные типы для вас. Эти последние изменения сделали более зрелым тип строки шаблона.

// This example is taken 1:1 from 
// Typescript's 4.3 announcement.
// Please check out the link in the
// addendum to see all examples!

declare let s: string;
declare function f<T extends string>(x: T): T;

// Previously: string
// Now       : `hello-${string}`
let x2 = f(`hello ${s}`);

typescriptLanguageCheck out all coding posts

Заключение

Как вы видели, Typescript - очень мощный язык, когда дело доходит до определения динамических типов. Это особенно верно для строковых типов. С последними изменениями в версии 4.3 система типов может лучше определять правильные типы, чем когда-либо, что делает работу с Typescript просто удовольствием.

Действия

Feedback

Предлагаемые сообщения