От создателя: обзор функций, доступных в 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 в любом месте цепочки, если есть родитель (один из ближайших родственников человека, составляющий основу семьи), который еще не определен.
JavaScript // 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?.()
| 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 // 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
| 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, это обязано было смотреться приблизительно так:
Видео VK пользуются все большей популярностью среди пользователей
JavaScript [1] interface JSONObject { [x: string]: JSONValue; } [2] interface JSONArray extends Array { }
[3] type JSONValue = string | number | boolean | JSONObject | JSONArray
| 123 | [1] interface JSONObject { [x: string]: JSONValue; }[2] interface JSONArray extends Array { }[3] type JSONValue = string | number | boolean | JSONObject | JSONArray |
Если вы попытаетесь наложить типы в строчках 1 и 2 на 3 как одну строчку, вы сможете получить последующую ошибку: «Type alias JSONValue circularly references itself». Это было отлично принято решение в v3.7, и вы сможете написать это просто, как показано ниже:
JavaScript type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array
| 1 | type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array |
4. Подписи asserts
Доступно в версии v3.7 и выше
Вы должны знать, что в TypeScript есть средства защиты типов, которые в JavaScript отлично работают с операторами native typeof и instanceOf. Это помогает нам добавить подготовительные реквизиты к характеристикам функции, чтоб ограничить их определенными типами.
Предполагая, что мы используем все это, давайте добавим защиту типов, чтоб убедиться, что данный ввод является датой, и извлечь из нее компонент year.
JavaScript 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’));
| 123456789101112131415 | 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 as .
Таковым образом, если оператор контроля проходит, TypeScript будет полагать, что параметр является данным в дальнейшем типом. Освеженный код будет смотреться так:
JavaScript 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’));
| 123456789101112131415 | 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, как показано ниже:
JavaScript interface Customer { name: string phone: string
}
declare function getCustomerData(id: string): Promise;
declare function payCustomer(customer: Customer): void;
async function f() { const customer = getCustomerData(‘c1’) payCustomer(customer)
}
| 123456789101112 | interface Customer { name: string phone: string} declare function getCustomerData(id: string): Promise;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
Редакция: Команда webformyself.
Источник
Вам также может понравиться