Abr@X@bra.ru
Суперсила TypeScript

Суперсила TypeScript

26.01.2019
206
Javascript это круто. Но знаете ли вы, что еще круче?

TypeScript!

Можете ли вы сказать, что не так с этим кодом?




TypeScript может - увидеть это маленькое красное подчеркивание? Typescript, подсказывающий нам, что что-то ужасно пошло не так.

Вы, наверное, поняли это - toUpperCase () является типом метода String. Мы передаем целое число в качестве аргумента, поэтому мы не можем вызвать toUpperCase () для целого числа.

Давайте исправим это, заявив, что мы можем только передать тип String в качестве аргумента нашему методу nameToUpperCase ().


Круто! Теперь вместо того, чтобы помнить, что nameToUpperCase () принимает только строку, мы можем доверять Typescript, чтобы запомнить ее. Представьте, что вам нужно запомнить тысячи, если не - десятки тысяч методов и всех типов аргументов.

Мы все еще видим ошибку. Зачем? Потому что мы все еще передаем целое число! Давайте сейчас передадим строку.


Это большой аргумент, почему TypeScript и проверка типов хороши.

С чего начать?

На самом деле все просто - все, что нам нужно, это пакет NPM. Откройте свой терминал и введите следующее:

npm i -g typescript && mkdir typescript && cd typescript && tsc --init

Мы должны в конечном итоге с конфигурацией Typescript.


Все, что нам нужно сделать, это создать файл .ts и сообщить компилятору Typescript, чтобы он следил за изменениями.

touch typescript.ts && tsc -w

Вот, что должно получится…


Отлично - теперь вы можете следовать моим примерам!

Мы пишем код в файлах .ts, .js - это скомпилированная версия для браузера. В этом случае у нас нет браузера, мы используем Node.js (поэтому .js предназначен для чтения Node).

Javascript имеет семь типов данных, из которых 6 являются примитивами, остальные определены как объекты.

Примитивы Javascript

  • String

  • Number

  • Undefined

  • Null

  • Symbol

  • Boolean

То, что осталось, называется объектами:

Typescript разделяет те же основные типы как и Javascript, но в рукаве есть пара дополнительных типов.

Дополнительные типы являются необязательными, и вам не нужно их использовать, если вы не знакомы с ними.

Дополнительные типы следующие...

Tuple или передаваемый индекс


Если мы не будем следовать правилам индекса сортировки, которые мы указали для нашего массива, Typescript намекнет нам, что мы не следовали правилам.


Typescript ожидает, что первое значение будет числом - но это не так, это строка "Indrek", что дает нам ошибку.

Void или недействительный

В Typescript вы должны определить тип возвращаемого значения в ваших функциях. Вот так:

Есть функции, которые не имеют оператора return;


Обратите внимание, как мы объявляем тип аргумента. И тип возвращаемого значения - оба являются строками.

Что произойдет, если мы ничего не вернем? Реальным примером может служить выражение console.log внутри тела функций.

рис 10

Мы видим, как компилятор Typescript говорит нам: «Эй, вы ничего не возвращали, но вы явно сказали, что мы ДОЛЖНЫ вернуть строку. Я просто сообщаю вам, что вы не следовали правилам ».

Так что делать, если мы не хотим ничего возвращать?

Допустим, у нас есть обратный вызов в нашей функции. Мы используем тип возврата Void в таких ситуациях.


Но в случае, если мы возвращаем значение, неявно или явно, мы не можем иметь возвращаемый тип Void


Any или любой

Любой тип очень прост. Мы просто не знаем, с каким типом мы имеем дело, так что это может быть любой или any

Например:


Обратите внимание, что мы так много раз переопределяем тип. Сначала это строка, после число и, наконец, логическое значение. Мы просто не можем быть уверены в типе.

Примеры из реальной жизни могут быть, если вы используете стороннюю библиотеку и не знаете типы.

Давайте возьмем массив. Вы извлекаете некоторые данные из API и сохраняете их в массиве. Массив состоит из случайных данных. Он не будет состоять только из строк, чисел и не будет иметь организованную структуру. На помощь приходит любой тип!


Если вы знаете, что массив состоит только из одного типа, вы можете явно указать это компилятору, например, так:


Пока эта статья набирает обороты, мы продолжим в следующей главе. Мы все еще должны охватить пару последних базовых типов - enum - never - null - undefined и утверждения типа особых случаев.

Enums или перечисления

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

Вот как вы можете структурировать перечисление (Enums):


Вы можете получить значения из перечисления следующим образом:


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

Как мы получить значение "Indrek" вместо 0?


Обратите внимание, что значения представлены в виде строки.


Еще один отличный пример - использование перечислений для хранения состояний приложения.


Если вам интересно узнать больше о перечислениях - я нашел отличный ответ, касающийся мелочей enum.

Never или никогда 

Допустим, мы получили некоторые данные из API. Мы всегда ожидаем, что данные будут извлечены, но что, если мы не сможем получить данные?

Идеальное время для возврата типа never ( но это особый случай):


Мы можем вызвать функцию error внутри другой функции (callback):


null && undefined

  • null — отсутствие какого-либо значения

  • undefined — переменная была объявлена, но ей еще не присвоено значение


По умолчанию null и undefined являются подтипами всех других типов.


Type assertions или утверждения

Type assertions,  данный тип обычно нужен, если вы знаете, что тип некоторого объекта может быть более конкретным, чем его текущий тип.

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

Вот демонстрация:


Синтаксис скобок <> вступает в противоречие с JSX, поэтому вместо него мы используем синтаксис as.








TypeScript, JavaScript, Web Development
Читайте также:
TypeScript для Nuxt.js

TypeScript для Nuxt.js

Как использовать TypeScript на Nuxt.js версиях 2.3 и 2.4.
Читать
Vue.js – эффект увеличения изображения как на medium.com

Vue.js – эффект увеличения изображения как на medium.com

Данный эффект делает красивое масштабирование изображения.
Читать
SEO для JS

SEO для JS

Представляем вашему вниманию перевод первой части материала, который посвящён поисковой оптимизации сайтов, построенных ...
Читать