Начало работы с typescript, react, webpack и atom

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

Эта статья направлена на то, чтобы научить вас тому, что я узнал за несколько часов, изучая мельчайшие детали машинописного текста с помощью react, webpack и atom. Вы можете найти демонстрационный проект (страница отображения профиля на github) здесь. Статья структурирована следующим образом: Сначала я расскажу вам, где вы можете изучить базовый синтаксис для машинописного текста, затем как настроить атом для машинописного текста, затем как подключить машинописный текст к webpack, а затем о том, что вам нужно сделать с JSX. Затем несколько заметок о машинописном тексте и ES6, после чего вы узнаете, как установить набор текста для библиотек, таких как lodash. В конце концов, у меня быстрый вывод.

Основы машинописного текста

Чтобы начать работу с машинописным текстом, вам нужно немного изучить новый синтаксис. Я нашел руководство, предоставленное typescriptlang.org, очень полезным и легким для понимания основ.

Вот суть:

Рекомендуется добавлять к интерфейсам префикс I, чтобы сделать это более очевидным. Ниже вы можете найти некоторые базовые типы, которые я создал, чтобы получить быстрый обзор синтаксиса, но я бы посоветовал вам прочитать также совместимость типов, функции, классы, интерфейсы, базовые типы, чтобы получить более глубокое понимание основ.

Также важно знать, что с типом script ваши проекты будут иметь 2 дополнительных файла конфигурации (УРА !!).

tsconfig.json - настройки для компилятора (проверьте мой tsconfig.json) для примера
typings.json - что-то вроде package.json для машинописного текста, где он сохраняет зависящие от типизации

Машинопись и атом

Для атома есть красивый пакет под названием atom-typescript, который значительно облегчает жизнь. Он дает вам такие вещи, как: автоматическое предложение, визуализатор AST, очень полезные сообщения об ошибках.

Сначала установите typescript глобально в вашей системе, а затем установите плагин Atom:

npm install -g typescript 
apm install atom-typescript

Машинопись и Webpack

Использовать машинописный текст с веб-пакетом действительно просто, просто используйте ts-loader, который извлечет свою конфигурацию из файла tsconfig.json. Здесь особо нечего сказать, если в вашем TS-коде есть ошибки, webpack выдаст ошибки, но раньше Atom уведомит вас более визуально.

Машинопись и JSX

Я думаю, что большинство проектов React используют реакцию с JSX, поэтому важно знать, что если вы выполняете приведение типов, вам нужно знать об этом:

// without jsx
var foo = <foo>bar;
// you need to do the type casting with the as keyword instead
var foo = bar as foo;

еще несколько советов по использованию jsx здесь: https://www.typescriptlang.org/docs/handbook/jsx.html

Машинопись против ES6

Если вы привыкли к ES6 и вам нравятся все эти новые функции, такие как распространение и т. Д., То вы быстро заметите, что машинописный текст не поддерживает все эти новые функции из коробки, с core-js shim можно получить почти все функции stage-0 и т. Д. информация здесь. Если функции, к которым вы привыкли, мне не хватает, то поиск в Google обычно помогает, но я заметил, что, например, Object.assign не очень строго проверяет тип, поэтому неплохо проверить, как машинописный текст ведет себя с функцией ES6, прежде чем использовать его, просто чтобы быть безопасно.

Вы также заметите, что у вас не может быть экспорта по умолчанию, например

// es6 way
import ReactDOM from 'react-dom';
// typescript way 
import * as ReactDOM from 'react-dom';

Установите типизацию для библиотек, таких как React

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

Прежде чем вы сможете установить типизацию, вам необходимо установить: https://github.com/typings/typings

typings search es6-promise
typings install dt~es6-promise --global --save

Todos / изучить

Следующие вещи, которые я не мог охватить в этой статье, если у вас есть хорошая ссылка на следующие темы, оставьте ее в комментариях.

написание модульных тестов с машинописным текстом
jest и машинописный текст
создание пространств имён, модулей (продвинутое дерьмо)

Вывод

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

В машинописном тексте мне не хватало eslint, который сообщает вам, есть ли у вас ненужный импорт / опечатки / или вы нарушаете стиль кода. Я нашел (но не тестировал) https://github.com/eslint/typescript-eslint-parser.

Последнее слово: я думаю, что это очень мощный и большой язык, но, вероятно, его не так быстро изучить, как ES6 против ES5, но я думаю, что вы можете постепенно изучить его, выполняя и проверяя переполнение стека и Google, если у вас возникнут проблемы. Еще один полезный ресурс для изучения - это, вероятно, исходный код angular2 и других библиотек, написанных на машинописном тексте.

Подписывайтесь на меня в твиттере: @theotow