Введение в расширенные типы TypeScript

Почему мы используем TypeScript?

Ответ кажется очевидным, конечно, для типов. Сегодня я хочу более подробно написать о расширенных типах TypeScript. Прежде всего, я оставлю ссылку со ссылкой внутри typescript о его системе типов, структурной подтипизации. Ссылка чрезвычайно интересна для тех, кто хочет понять основу языка.

Без лишних слов, я начну говорить о функции, которая очень хорошо сочетается с DRY/ функции-помощники, общие функции, которые часто переписываются только для того, чтобы делать то же самое с конкретным типом.

Дженерики

Основной пример использования generics — это создание функций, которые выполняют повторяющиеся действия. В данном случае я бы сказал, что это функция, которая отправляет что-то куда-то и возвращает то же самое.


function fooToBar<foo, bar>(arg: Array<foo>): Array<bar> {
  // faz algo com foo e por fim faz bar, Geralmente vejo sendo usado com arrays uma vez que arrays possuem muitas funções que pode ser necessario reutilizar 
  const bar = makeBarUsingFoo(arg);
  return arg;
}

Войдите в полноэкранный режим Выход из полноэкранного режима

базовое использование дженериков

Основная цель дженериков, как следует из их названия, — создавать общие вещи, которые ПОМОГАЮТ вам в качестве вспомогательных функций. Как и в других языках, дженерики создают эту несложность кода так же, как они придают функциональность и выразительность. Забавный факт: вызов типа массива в общем виде имеет семантически тот же результат, что и короткая версия:


Array<Type> === Type[] 

Войдите в полноэкранный режим Выход из полноэкранного режима

ключ

Эта тема смутно напоминает мне PHP, поскольку объекты JavaScript и TypeScript имеют сходство с ассоциативными массивами PHP.

obj.foo и obj[‘foo’] — это один и тот же способ доступа к объекту, что может стать проблемой, если строка доступа неверна, чтобы сдержать это и создать динамические и очень интересные среды, мы можем использовать зарезервированное слово keyof.


type fooBar = { foo: boolean, bar: boolean };
let fbKey: keyof fooBar; // fbKey só pode assumir os valores de 'foo' ou 'bar'

// você pode acessar um objeto como o fooBar dessas maneiras
obj: fooBar;
const a = obj.foo // usando a notação de ponto
const z = obj['foo'] // aqui ele SÓ deixa os valores que são chaves do type  

Войдите в полноэкранный режим Выход из полноэкранного режима

пример о зарезервированном слове keyof

в операторе и экземпляре

Это ключевое слово при использовании с интерфейсами может сделать динамические среды очень предсказуемыми, что делает повседневную жизнь намного проще и понятнее. Помните, что it работает только с интерфейсами и классами, в то время как in работает с типами. Для примера мне нравится эта модель:

class foo { fooMethod() {}}
class bar { barMethod() {}}
class bla { blaMethod() {}}
function doSomething(x: foo | bar | bla) {
  if (x instanceof foo) {
    x.fooMethod() // função que só tem em foo ou chamar função só aceita foo
  }
  if (x instanceof bar) {
    x.barMethod() // função que só tem em bar ou chamar função só aceita bar
  }
  if (x instanceof bla) {
    x.blaMethod() // função que só tem em bla ou chamar função só aceita bla
  }
}

// outra forma é usando o in caso 
type foo = { foo: string}
type bar = { bar: string}
function doSomething(x: foo | bar ) {
  if ("foo" in x) {
    // função que só tem em foo ou chamar função só aceita foo
    onlyFoo(x);
  }
  if ("bar" in x) {
    onlyBar(x) // função que só tem em bar ou chamar função só aceita bar
  }
}
function onlyFoo(p: foo){}
function onlyBar(p: bar){}

Войдите в полноэкранный режим Выход из полноэкранного режима

пример in и instanceof

Оба шаблона могут быть полезны для создания маршрутизации в функциях для обработки динамики кода.

Шаблонные литералы

Эта тема мне нравится, потому что она очень помогает в работе с данными с ОЧЕНЬ похожими именами, которые могут быть откуда угодно.

В документации по TypeScript приводится пример, который я считаю замечательным.


type EmailLocaleIDs = "welcome_email" | "email_heading";
type Lang = "en" | "ja" | "pt";

type LocaleMessageIDs = `${Lang}_${EmailLocaleIDs}`; // esse type pode ser -> "en_welcome_email" | "en_email_heading" | "ja_welcome_email" | "ja_email_heading" | "pt_welcome_email" | "pt_email_heading"

Войдите в полноэкранный режим Выход из полноэкранного режима

Буквальный шаблон Пример

Этот случай использования, приведенный в документе, чрезвычайно полезен, поскольку таким образом мы оставляем N способов вызова некоторого значения где-то готовым, просто выполнив это объединение значений. Вместо того, чтобы писать 6 имен, которые могут быть вызваны, мы пишем только 5 имен, это кажется небольшим преимуществом, но когда у вас 4 языка, тип автоматически генерирует 8 возможных типов, если у вас 4 языка и 5 писем, мы отобразили 20 возможностей, написав при этом только 9 переменных.

Заключение

В целом, продвинутые типы в TypeScript либо просто используют некоторые из этих возможностей, которые я объяснил, либо их комбинацию для создания возможностей, которые будут полезны в будущем без потери выразительности, которую дает этот язык.

Оцените статью
devanswers.ru
Добавить комментарий