M

MLOG

Български

Разгледайте TypeScript template literal типовете и как те могат да се използват за създаване на силно типово-безопасни и лесни за поддръжка API-та, подобрявайки качеството на кода и преживяването на програмистите.

TypeScript Template Literal типове за типово-безопасни API-та

TypeScript template literal типовете са мощна функционалност, въведена в TypeScript 4.1, която ви позволява да извършвате манипулации с низове на ниво тип. Те отварят свят от възможности за създаване на силно типово-безопасни и лесни за поддръжка API-та, като ви позволяват да улавяте грешки по време на компилация, които иначе биха се появили само по време на изпълнение. Това, от своя страна, води до подобрено преживяване на програмиста, по-лесно рефакториране и по-здрав код.

Какво представляват Template Literal типовете?

В основата си, template literal типовете са типове низови литерали, които могат да бъдат конструирани чрез комбиниране на типове низови литерали, union типове и променливи на типове. Мислете за тях като за интерполация на низове за типове. Това ви позволява да създавате нови типове, базирани на съществуващи, осигурявайки висока степен на гъвкавост и изразителност.

Ето един прост пример:

type Greeting = "Hello, World!";

type PersonalizedGreeting<T extends string> = `Hello, ${T}!`;

type MyGreeting = PersonalizedGreeting<"Alice">; // типът MyGreeting е "Hello, Alice!"

В този пример `PersonalizedGreeting` е template literal тип, който приема генеричен параметър `T`, който трябва да бъде низ. След това той конструира нов тип, като интерполира низовия литерал "Hello, " със стойността на `T` и низовия литерал "!". Резултатният тип, `MyGreeting`, е "Hello, Alice!".

Предимства от използването на Template Literal типове

Примери за употреба в реални проекти

1. Дефиниране на API Endpoint-и

Template literal типовете могат да се използват за дефиниране на типове за API endpoint-и, като се гарантира, че правилните параметри се подават на API-то и че отговорът се обработва правилно. Представете си платформа за електронна търговия, която поддържа множество валути, като USD, EUR и JPY.

type Currency = "USD" | "EUR" | "JPY";
type ProductID = string; //В практиката това може да бъде по-специфичен тип

type GetProductEndpoint<C extends Currency> = `/products/${ProductID}/${C}`;

type USDEndpoint = GetProductEndpoint<"USD">; // типът USDEndpoint е "/products/${string}/USD"

Този пример дефинира тип `GetProductEndpoint`, който приема валута като параметър на типа. Резултатният тип е тип низов литерал, който представлява API endpoint-а за получаване на продукт в посочената валута. Използвайки този подход, можете да гарантирате, че API endpoint-ът винаги е конструиран правилно и че се използва правилната валута.

2. Валидация на данни

Template literal типовете могат да се използват за валидиране на данни по време на компилация. Например, можете да ги използвате за валидиране на формата на телефонен номер или имейл адрес. Представете си, че трябва да валидирате международни телефонни номера, които могат да имат различни формати в зависимост от кода на държавата.

type CountryCode = "+1" | "+44" | "+81"; // САЩ, Великобритания, Япония
type PhoneNumber<C extends CountryCode, N extends string> = `${C}-${N}`;

type ValidUSPhoneNumber = PhoneNumber<"+1", "555-123-4567">; // типът ValidUSPhoneNumber е "+1-555-123-4567"

//Забележка: По-сложната валидация може да изисква комбиниране на template literal типове с условни типове.

Този пример показва как можете да създадете основен тип телефонен номер, който налага определен формат. По-сложната валидация може да включва използването на условни типове и шаблони, подобни на регулярни изрази, в рамките на template literal типа.

3. Генериране на код

Template literal типовете могат да се използват за генериране на код по време на компилация. Например, можете да ги използвате за генериране на имена на React компоненти въз основа на името на данните, които те показват. Често срещан модел е генерирането на имена на компоненти, следващи шаблона `<Entity>Details`.

type Entity = "User" | "Product" | "Order";
type ComponentName<E extends Entity> = `${E}Details`;

type UserDetailsComponent = ComponentName<"User">; // типът UserDetailsComponent е "UserDetails"

Това ви позволява автоматично да генерирате имена на компоненти, които са последователни и описателни, намалявайки риска от конфликти в именуването и подобрявайки четимостта на кода.

4. Обработка на събития

Template literal типовете са отлични за дефиниране на имена на събития по типово-безопасен начин, като се гарантира, че event listener-ите са регистрирани правилно и че event handler-ите получават очакваните данни. Представете си система, в която събитията са категоризирани по модул и тип събитие, разделени с двоеточие.

type Module = "user" | "product" | "order";
type EventType = "created" | "updated" | "deleted";
type EventName<M extends Module, E extends EventType> = `${M}:${E}`;

type UserCreatedEvent = EventName<"user", "created">; // типът UserCreatedEvent е "user:created"

interface EventMap {
  [key: EventName<Module, EventType>]: (data: any) => void; //Пример: Типът за обработка на събития
}

Този пример демонстрира как да създавате имена на събития, които следват последователен модел, подобрявайки цялостната структура и типовата безопасност на системата за събития.

Напреднали техники

1. Комбиниране с условни типове

Template literal типовете могат да се комбинират с условни типове, за да се създадат още по-сложни трансформации на типове. Условните типове ви позволяват да дефинирате типове, които зависят от други типове, което ви дава възможност да извършвате сложна логика на ниво тип.

type ToUpperCase<S extends string> = S extends Uppercase<S> ? S : Uppercase<S>;

type MaybeUpperCase<S extends string, Upper extends boolean> = Upper extends true ? ToUpperCase<S> : S;

type Example = MaybeUpperCase<"hello", true>; // типът Example е "HELLO"
type Example2 = MaybeUpperCase<"world", false>; // типът Example2 е "world"

В този пример `MaybeUpperCase` приема низ и булева стойност. Ако булевата стойност е true, той преобразува низа в главни букви; в противен случай връща низа както е. Това демонстрира как можете условно да променяте типове низове.

2. Използване с Mapped типове

Template literal типовете могат да се използват с mapped типове за трансформиране на ключовете на обектен тип. Mapped типовете ви позволяват да създавате нови типове, като итерирате върху ключовете на съществуващ тип и прилагате трансформация на всеки ключ. Често срещан случай на употреба е добавянето на префикс или суфикс към ключовете на обект.

type MyObject = {
  name: string;
  age: number;
};

type AddPrefix<T, Prefix extends string> = {
  [K in keyof T as `${Prefix}${string & K}`]: T[K];
};

type PrefixedObject = AddPrefix<MyObject, "data_">;
// типът PrefixedObject е {
//    data_name: string;
//    data_age: number;
// }

Тук `AddPrefix` приема обектен тип и префикс. След това създава нов обектен тип със същите свойства, но с добавен префикс към всеки ключ. Това може да бъде полезно за генериране на обекти за трансфер на данни (DTOs) или други типове, където трябва да промените имената на свойствата.

3. Вградени типове за манипулация на низове

TypeScript предоставя няколко вградени типа за манипулация на низове, като `Uppercase`, `Lowercase`, `Capitalize` и `Uncapitalize`, които могат да се използват заедно с template literal типове за извършване на по-сложни трансформации на низове.

type MyString = "hello world";

type CapitalizedString = Capitalize<MyString>; // типът CapitalizedString е "Hello world"

type UpperCasedString = Uppercase<MyString>;   // типът UpperCasedString е "HELLO WORLD"

Тези вградени типове улесняват извършването на често срещани манипулации с низове, без да се налага да пишете персонализирана логика за типове.

Добри практики

Често срещани капани

Алтернативи

Въпреки че template literal типовете предлагат мощен начин за постигане на типова безопасност при разработката на API, съществуват и алтернативни подходи, които може да са по-подходящи в определени ситуации.

Заключение

TypeScript template literal типовете са ценен инструмент за създаване на типово-безопасни и лесни за поддръжка API-та. Те ви позволяват да извършвате манипулации с низове на ниво тип, което ви дава възможност да улавяте грешки по време на компилация и да подобрявате цялостното качество на вашия код. Като разбирате концепциите и техниките, обсъдени в тази статия, можете да използвате template literal типовете, за да изграждате по-здрави, надеждни и удобни за програмистите API-та. Независимо дали създавате сложно уеб приложение или прост инструмент за команден ред, template literal типовете могат да ви помогнат да пишете по-добър TypeScript код.

Обмислете да разгледате още примери и да експериментирате с template literal типове във вашите собствени проекти, за да разберете напълно техния потенциал. Колкото повече ги използвате, толкова по-удобно ще се чувствате с техния синтаксис и възможности, което ще ви позволи да създавате наистина типово-безопасни и здрави приложения.

TypeScript Template Literal типове за типово-безопасни API-та | MLOG