Если вы нашли эту статью, значит, вы, вероятно, имеете промежуточное представление о JavaScript и сейчас делаете первые шаги в изучении TypeScript от Microsoft. Если у вас больше опыта работы с TS, я надеюсь, что это может быть для вас быстрым обновлением!

Руководство

  1. Что такое TypeScript и зачем его использовать?
  2. Настройка TypeScript.
  3. Примеры Статическая типизация и ошибки в TypeScript.

Что такое Typescript и зачем мне его использовать?

TypeScript 101: Отвечая на ваш вопрос, TypeScript — это «расширенный набор» JavaScript, который дает ванильному J.S дополнительные мощные методы. Мне нравится вспоминать эти отношения, сравнивая их с черепахой или Железным человеком, если вы увлекаетесь супергероями. Думайте о JavaScript как о Тони Старке, а о TypeScript — как о костюме, который позволяет ему летать и стрелять лазерами из рук.

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

Настройка Typescript в первый раз (код VS):

Команды:

1. mkdir ts-practice -> code . (creates practice directory and opens it)
2. npm init -y (gives us package.json to download node modules)
3. npm install typescript (installs module)
4. touch index.ts (creates our first typescript file)

В любом каталоге, который вы хотите, следуйте приведенным выше командам, чтобы настроить свою первую среду машинописного текста.

Необязательно/Настоятельно рекомендуется:

Command + Shift + p
(control for Operating systems)

Найдите «настройки по умолчанию», введите «typescript.validate» и убедитесь, что для этого раздела установлено значение true. Это очень важно для просмотра ошибок позже в процессе разработки... и удобно для следующего раздела.

Основы статической типизации/примеры ошибок

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

Пример 1:

Пример 2:

Пример 3:

Как вы можете видеть, переменные выше имеют уже существующий набор правил/тип, который выдаст сообщение об ошибке (красная волнистая линия), если его не соблюдать. Отладка таким образом удобна, потому что нам не нужно ждать результатов, как при динамической типизации.

Вывод

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