7 новых и интересных функций TypeScript

7 новых и интересных функций TypeScript Сайтостроение

7 новых и интересных функций TypeScript

От создателя: обзор функций, доступных в TypeScript v3.6 +, на которые вы непременно должны направить внимание.

Языковая группа TypeScript выпускает новейшие функции в необычном темпе без существенных суровых конфигураций. Как видно из недавнешнего опроса State of Javascript, это привело к все наиболее удачному принятию языка в обществе. В этом посте мы попытаемся обобщить более принципиальные функции. Мы выделим функции из последующих крайних выпусков:

7 новых и интересных функций TypeScript

Графики выпуска TypeScript

Примечание. До этого чем разглядывать тщательно какую-либо из этих функций, для вас следует посетить игровую площадку TypeScript, где вы сможете протестировать все функции. Я бы посоветовал переключиться на наиболее старенькую версию (кликните раскрывающийся перечень версий в верхнем левом углу), чтоб узреть, как наиболее новенькая версия обрабатывает сценарий использования, который не поддерживался ранее:

7 новых и интересных функций TypeScript

Демонстрация игровой площадки TypeScript

Совет: Используйте Bit (Github) для сотворения своей коллекции компонент пользовательского интерфейса. Это как библиотека компонент, лишь любой компонент имеет свои версии и устанавливается совсем независимо. Услаждайтесь резвой разработкой и согласованным пользовательским интерфейсом. Просто извлекайте повторно применяемые составляющие из приложений по ходу работы. Это так просто.

Bit поддерживает Javascript, TypeScript, React, React TypeScript, Angular и Vue.

7 новых и интересных функций TypeScript

1. Опциональные цепочки

Доступно в версии v3.7 и выше

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

В приведенном ниже примере, чтоб получить доступ к address, для вас необходимо пройти data.customer.address, и, может быть, что данные либо клиент имеют значение undefined. Обычно инспектируют, определен ли любой уровень этого обхода в сочетании с оператором && либо иными схожими приемами, как показано в примере.

Сейчас вы сможете применять для доступа к данным оператор опциональной цепочки «.?». Таковым образом, заместо сбоя во время выполнения, вложенная цепочка возвратит undefined в любом месте цепочки, если есть родитель (один из ближайших родственников человека, составляющий основу семьи), который еще не определен.

JavaScript

1234567891011121314151617// Prior to v3.7if (data && data.customer && data.customer.address) {   const {address} = data.customer   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`} // v3.7 onwards // data accessconst address = data?.customer?.addressconst fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}` // also works with arrayscustomers?.[0]?.[‘address’] // check if method defined and callcustomer.approve?.()

2. Нулевое коалесцирование

Доступно в версии v3.7 и выше

Оператор нулевого коалесцирования (??) является кандидатурой оператору OR (||). Возвращает выражение правой стороны, если слева – null либо undefined. Это различается от ||?|| на самом деле тем, что это является логическим оператором OR в JavaScript, и мы пытаемся применять куцее замыкание, чтоб возвратить 1-ое не неверное значение. Это может иметь неожиданные последствия, поэтому что число 0 либо пустая строчка будут рассматриваться, как false, когда это быть может допустимым вводом в качестве требования. Давайте проиллюстрируем это на примере:

JavaScript

12345678910// BeforepassPhrase = data.inputString || ‘Unknown’  //will not accept “” (empty string)passCode =  data.number || ‘-1111’ // will not accept 0 rememberMe = data.rememberFlag || true // will always be true!!!  // NowpassPhrase = data.inputString ?? ‘Unknown’  //Unknown only if inputString is not definedpassCode =  data.number ?? ‘-1111’ // 0 could be a passCoderememberMe = data.rememberFlag ?? true // false is a valid value

Таковым образом, мы можем совершенно точно провести различие меж кое-чем, что является undefined либо false (что быть может тяжело из-за того, как JavaScript принимает false).

3. Рекурсивные псевдонимы типа

Доступно в версии v3.7 и выше

Большая часть настоящих типов данных являются рекурсивными. К примеру, если вы пытаетесь работать с иерархическими данными, вы обнаружите повторяющиеся шаблоны данных такого же типа. Неплохим примером является JSON, который на самом деле является хеш-картой, и которая, в свою очередь, может содержать еще одну карту либо массив карт.

До версии 3.6, если для вас необходимо было найти обычный тип JSON, это обязано было смотреться приблизительно так:

READ
Новая часть AskGoogleWebmasters отвечает на частые вопросы о скорости сайта

JavaScript

123[1] interface JSONObject { [x: string]: JSONValue; }[2] interface JSONArray extends Array<JSONValue> { }[3] type JSONValue = string | number | boolean | JSONObject | JSONArray

Если вы попытаетесь наложить типы в строчках 1 и 2 на 3 как одну строчку, вы сможете получить последующую ошибку: «Type alias JSONValue circularly references itself». Это было отлично принято решение в v3.7, и вы сможете написать это просто, как показано ниже:

JavaScript

1type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

4. Подписи asserts

Доступно в версии v3.7 и выше

Вы должны знать, что в TypeScript есть средства защиты типов, которые в JavaScript отлично работают с операторами native typeof и instanceOf. Это помогает нам добавить подготовительные реквизиты к характеристикам функции, чтоб ограничить их определенными типами.

Предполагая, что мы используем все это, давайте добавим защиту типов, чтоб убедиться, что данный ввод является датой, и извлечь из нее компонент year.

JavaScript

123456789101112131415function isDate(input: unknown) : asserts input is Date {   if (input instanceof Date)     return;   else     throw new Error(‘Input must be a Date!’); }  function getYear(input: unknown) : number {   isDate(input);   return input.getFullYear()  // TypeScripts knows that input is Date }   console.log(getYear(new Date(‘2019-01-01’))); console.log(getYear(‘2019-01-01’));

Приведенный выше код смотрится отлично, но TypeScript все равно будет выдавать предупреждение «getFullYear is not available on unknown type».

Сейчас, начиная с v3.7, у TypeScript есть новое ключевое слово asserts, которое дозволит компилятору знать верный тип исходя из убеждений оператора контроля. Для функции заместо возвращаемого типа добавьте asserts <param> as <type>.

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

JavaScript

123456789101112131415function isDate(input: unknown) : asserts input is Date {   if (input instanceof Date)     return;   else     throw new Error(‘Input must be a Date!’); }  function getYear(input: unknown) : number {   isDate(input);   return input.getFullYear()  // TypeScripts knows that input is Date }   console.log(getYear(new Date(‘2019-01-01’))); console.log(getYear(‘2019-01-01’));

5. Наилучшая оборотная связь для промисов

Усовершенствовано с версии 3.6

Всераспространенной ошибкой является попытка применять полезную нагрузку промисов конкретно в коде и запамятовать применять await либо then, как показано ниже:

JavaScript

123456789101112interface Customer {    name: string    phone: string} declare function getCustomerData(id: string): Promise<Customer>;declare function payCustomer(customer: Customer): void; async function f() {    const customer = getCustomerData(‘c1’)    payCustomer(customer)}

TypeScript будет стопроцентно игнорировать промис и выведет сообщение о ошибке, не связанное с ним, как показано ниже:

7 новых и интересных функций TypeScript

Нет упоминания промиса

Начиная с версии 3.6, компилятор довольно умен, чтоб представить, что вы должны разрешить промис. Направьте внимание, как крайний компилятор обрабатывает ту же ошибку:

7 новых и интересных функций TypeScript

Давайте также коротко разглядим остальные достойные внимания функции, которые не требуют такового же уровня детализации:

6. Идентификаторы Unicode

Доступно с версии v3.6

7 новых и интересных функций TypeScript

Приведенный выше код не был бы скомпилирован в наиболее ранешних версиях TypeScript, но сейчас вы сможете определять идентификаторы из наиболее широкого набора Unicode.

7. Инкрементная компиляция

Доступна с версии 3.4

Если вы используете TypeScript для огромных баз кода, компилятору может потребоваться вечность, чтоб ответить на конфигурации, которые вы вносите в хоть какой из файлов в данной для нас базе кода. У нас есть новейший флаг —incremental, который вы сможете добавить в командную строчку tsc (компилятор текстов), и он будет равномерно составлять лишь те файлы, которые были изменены.

TypeScript делает это, сохраняя информацию о графе проекта с момента крайней компиляции в папке локального кэша снутри вашей базы кода. Для кодов React не забудьте верно настроить это при помощи Webpack либо Parcel, чтоб применять пошаговую компиляцию в конвейере сборки.

Надеюсь, что вы используете вышеперечисленные функции и не пропустите дорожную карту, чтоб быть в курсе функций, которые находятся в стадии разработки. Всего лучшего!

Создатель: RC

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий