От автора: обзор функций, доступных в TypeScript v3.6 +, на которые вы обязательно должны обратить внимание.
Языковая группа TypeScript выпускает новые функции в удивительном темпе без существенных серьезных изменений. Как видно из недавнего опроса State of Javascript, это привело к все более успешному принятию языка в сообществе. В этом посте мы постараемся обобщить наиболее важные функции. Мы выделим функции из следующих последних выпусков:
Графики выпуска TypeScript
Примечание. Прежде чем рассматривать подробно какую-либо из этих функций, вам следует посетить игровую площадку TypeScript, где вы можете протестировать все функции. Я бы порекомендовал переключиться на более старую версию (кликните раскрывающийся список версий в верхнем левом углу), чтобы увидеть, как более новая версия обрабатывает сценарий использования, который не поддерживался ранее:
Демонстрация игровой площадки TypeScript
Совет: Используйте Bit (Github) для создания собственной коллекции компонентов пользовательского интерфейса. Это как библиотека компонентов, только каждый компонент имеет свои версии и устанавливается совершенно независимо. Наслаждайтесь быстрой разработкой и согласованным пользовательским интерфейсом. Просто извлекайте повторно используемые компоненты из приложений по ходу работы. Это так просто.
Bit поддерживает Javascript, TypeScript, React, React TypeScript, Angular и Vue.
1. Опциональные цепочки
Доступно в версии v3.7 и выше
Это реальная проблема, когда вы пытаетесь получить доступ к вложенным данным, чем больше вложенных данных, тем более утомительным может стать ваш код.
В приведенном ниже примере, чтобы получить доступ к address, вам нужно пройти data.customer.address, и, возможно, что данные или клиент имеют значение undefined. Обычно проверяют, определен ли каждый уровень этого обхода в сочетании с оператором && или другими подобными приемами, как показано в примере.
Теперь вы можете использовать для доступа к данным оператор опциональной цепочки «.?». Таким образом, вместо сбоя во время выполнения, вложенная цепочка вернет undefined в любом месте цепочки, если есть родитель, который еще не определен.
// Prior to v3.7
if (data && data.customer && data.customer.address) { const {address} = data.customer const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
} // v3.7 onwards // data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}` // also works with arrays
customers?.[0]?.['address'] // check if method defined and call
customer.approve?.()2. Нулевое коалесцирование
Доступно в версии v3.7 и выше
Оператор нулевого коалесцирования (??) является альтернативой оператору OR (||). Возвращает выражение правой стороны, если слева – null или undefined. Это отличается от ||?|| по сути тем, что это является логическим оператором OR в JavaScript, и мы пытаемся использовать короткое замыкание, чтобы вернуть первое не ложное значение. Это может иметь непредвиденные последствия, потому что число 0 или пустая строка будут рассматриваться, как false, когда это может быть допустимым вводом в качестве требования. Давайте проиллюстрируем это на примере:
// Before passPhrase = data.inputString || 'Unknown' //will not accept "" (empty string) passCode = data.number || '-1111' // will not accept 0 rememberMe = data.rememberFlag || true // will always be true!!! // Now passPhrase = data.inputString ?? 'Unknown' //Unknown only if inputString is not defined passCode = data.number ?? '-1111' // 0 could be a passCode rememberMe = data.rememberFlag ?? true // false is a valid value
Таким образом, мы можем однозначно провести различие между чем-то, что является undefined или false (что может быть непросто из-за того, как JavaScript воспринимает false).
3. Рекурсивные псевдонимы типа
Доступно в версии v3.7 и выше
Большинство реальных типов данных являются рекурсивными. Например, если вы пытаетесь работать с иерархическими данными, вы обнаружите повторяющиеся шаблоны данных того же типа. Хорошим примером является JSON, который по сути является хеш-картой, и которая, в свою очередь, может содержать еще одну карту или массив карт.
До версии 3.6, если вам нужно было определить простой тип JSON, это должно было выглядеть примерно так:
[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, и вы можете написать это просто, как показано ниже:
type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>4. Подписи asserts
Доступно в версии v3.7 и выше
Вы должны знать, что в TypeScript есть средства защиты типов, которые в JavaScript хорошо работают с операторами native typeof и instanceOf. Это помогает нам добавить предварительные реквизиты к параметрам функции, чтобы ограничить их определенными типами.
Предполагая, что мы используем все это, давайте добавим защиту типов, чтобы убедиться, что данный ввод является датой, и извлечь из нее компонент year.
function 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 будет предполагать, что параметр является заданным в будущем типом. Обновленный код будет выглядеть так:
function 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, как показано ниже:
interface 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 будет полностью игнорировать промис и выведет сообщение об ошибке, не связанное с ним, как показано ниже:
Нет упоминания промиса
Начиная с версии 3.6, компилятор достаточно умен, чтобы предположить, что вы должны разрешить промис. Обратите внимание, как последний компилятор обрабатывает ту же ошибку:
Давайте также кратко рассмотрим другие интересные функции, которые не требуют такого же уровня детализации:
6. Идентификаторы Unicode
Доступно с версии v3.6
Приведенный выше код не был бы скомпилирован в более ранних версиях TypeScript, но теперь вы можете определять идентификаторы из более широкого набора Unicode.
7. Инкрементная компиляция
Доступна с версии 3.4
Если вы используете TypeScript для больших баз кода, компилятору может потребоваться вечность, чтобы ответить на изменения, которые вы вносите в любой из файлов в этой базе кода. У нас есть новый флаг —incremental, который вы можете добавить в командную строку tsc (компилятор текстов), и он будет постепенно компилировать только те файлы, которые были изменены.
TypeScript выполняет это, сохраняя информацию о графе проекта с момента последней компиляции в папке локального кэша внутри вашей базы кода. Для кодов React не забудьте правильно настроить это с помощью Webpack или Parcel, чтобы использовать пошаговую компиляцию в конвейере сборки.
Надеюсь, что вы используете перечисленные выше функции и не пропустите дорожную карту, чтобы быть в курсе функций, которые находятся в стадии разработки. Всего наилучшего!
Автор: RC
Источник: https://blog.bitsrc.io
Редакция: Команда webformyself.