Проведя последние несколько недель за изучением C, я по-новому оценил стабильность, которую могут дать вам статически типизированные языки, поэтому я решил, что пришло время попробовать статически типизированный Javascript. Я решил использовать для этого проекта Typescript вместо Flow. Как только я попробую Flow, я напишу сообщение с подробным описанием моего опыта работы с ними обоими. Что вы должны убрать из этого, так это то, что статически типизированный JS - это лучший способ.
После принятия решения о Typescript пришло время добавить его в текущее приложение, над которым я работаю (BeerMe! Приложение для поиска новых сортов пива, репо здесь), которое представляет собой монолитное приложение Ruby on Rails, использующее React on Rails , чтобы добавить React в мое приложение. Если вы еще не пробовали React on Rails, я очень рекомендую его. У драгоценного камня есть поддержка, и команда, которая поддерживает его, активна в сообществе. Поскольку добавление Typescript требует немного больше накладных расходов, чем добавление Flow в существующее приложение, давайте рассмотрим необходимые шаги, чтобы заставить Typescript работать в вашем приложении React on Rails.
Используйте «Yarn», чтобы добавить библиотеку Typescript в свое приложение
Этот шаг довольно прост: вы захотите добавить машинописный текст с вашего терминала через yarn или npm (я предпочитаю yarn, поэтому мы будем использовать именно его), просто набрав:
yarn add typescript
Что вы можете увидеть в действии здесь (пока вы можете игнорировать предупреждения об устаревании, если для них появится исправление, я обновлю этот пост):
Добавить ts-loader
Следующим шагом будет добавление ts-loader, загрузчика Typescript для webpack, о котором вы можете прочитать здесь. Это одно из мест, где у меня возникла первая проблема, связанная с добавлением Typescript в это приложение. В зависимости от версии webpack, на которой запущено ваше приложение, будет влиять на версию ts-loader, которую вы можете использовать. Если вы используете webpack версии ‹4, тогда вам нужно будет добавить версию 3.5.0 ts-loader, если вы используете версию webpack 4+, то вы можете использовать самую последнюю версию. Для этого мы снова будем использовать пряжу для запуска:
версия 3.5.0:
yarn add [email protected]
версия 4.0.0:
yarn add ts-loader
Добавьте загрузчики в environment.js
Далее мы хотим добавить соответствующие загрузчики для Typescript в наш файл environment.js. В зависимости от вашей версии гема wepacker определит, как это делается. Если вы используете webpacker ‹3.3.0, вам нужно сделать это, как описано ниже:
const { environment } = require('@rails/webpacker')
environment.loaders.set('typescript', {
test: /.(ts|tsx)$/,
loader: 'ts-loader'
});
module.exports = environment
Если вы используете версию 3.3.0+, функция «set» устарела и удалена, и вместо нее следует использовать «append»:
const { environment } = require('@rails/webpacker')
environment.loaders.append('typescript', {
test: /.(ts|tsx)$/,
loader: 'ts-loader'
});
module.exports = environment
Добавить расширения машинописного текста
Теперь, когда у нас есть ts-loader, который настроен и готов загрузить наш Typescript через webpack, мы должны объявить webpack, что мы хотим использовать эти расширения, добавив «-.ts» и «-.tsx» в блок расширений. файла «webpacker.yml».
extensions: - .jsx - .js - .sass - .scss - .css - .png - .svg - .gif - .jpeg - .jpg - .tsx - .ts
Создайте файл tsconfig.json
Теперь последний шаг в создании необходимых частей для начала использования Typescript в вашем приложении React On Rails - это создание файла tsconfig.json в корневом каталоге вашего приложения. Это дает вам некоторые параметры конфигурации для использования Typescript, я не буду вдаваться в подробности обо всех параметрах конфигурации здесь (вы можете прочитать больше в официальных документах по Typescript здесь и здесь), но Я хочу коснуться некоторых из них.
{
"compilerOptions": {
"declaration":false,
"emitDecoratorMetadata":true,
"experimentalDecorators":true,
"lib": [
"es6",
"dom"
],
"module":"es6",
"moduleResolution":"node",
"sourceMap":true,
"target":"es5",
"jsx":"react",
"allowSyntheticDefaultImports":true,
"noImplicitAny":true,
"noImplicitThis":true,
"noImplicitReturns":true,
"strictNullChecks":true
},
"exclude": [
"**/*.spec.ts",
"node_modules",
"public"
],
"compileOnSave":false
}
В основном, я хочу поговорить о наборах конфигураций из строки 14 - строки 19.
"jsx" "react" "allowSyntheticDefaultImports":true, "noImplicitAny":true, "noImplicitThis":true, "noImplicitReturns":true, "strictNullChecks":true
Давайте возьмем эту строку за строкой:
"jsx": "react"
Это просто сообщает Typescript, что мы собираемся использовать response и компилировать файлы с расширением .tsx в файлы с расширением .jsx.
"allowSyntheticDefaultImports": true
Это отличный вариант, обычно в Typescript для импорта узловых модулей нам нужно будет сделать:
import * as ReactOnRails from 'react-on-rails';
Но эта конфигурация позволяет нам импортировать модули узлов так же, как и любой другой модуль или компонент, который мы написали:
import ReactOnRails from 'react-on-rails';
Далее у нас есть:
"noImplicitAny": true
Это позволяет нам проводить более строгую проверку типов. Поведение по умолчанию в Typescript заключается в том, что если переменная не типизирована, ей автоматически присваивается значение «любая», это удаляет такое поведение и вынуждает вас явно объявить, должна ли переменная быть типизирована как «любая».
"noImplicitThis": true
Эта конфигурация работает аналогично настройке выше, за исключением того, что это относится конкретно к использованию «this» в ваших компонентах. Этот параметр вызывает ошибку, если у вас есть какие-либо экземпляры this с подразумеваемым типом any (то есть вы не назначили ему тип).
"noImplicitReturns": true
Как звучит конфигурация, это вызовет ошибку, если у вас есть какие-либо компоненты без возвращаемого значения.
"strictNullChecks": true
Этот немного интереснее. Без этой конфигурации вы можете присвоить «null» или «undefined» переменной любого типа, это ограничивает ее значения, чтобы они могли быть присвоены только им самим, или переменной, установленной как «any».
Вот и все! Теперь вы можете начать преобразование ваших компонентов «jsx» в компоненты «tsx». Далее я напишу сообщение об использовании Typescript в React On Rails, включая определение интерфейсов и преобразование ваших компонентов. Удачи!
