TypeScript это язык с открытым исходным кодом, разрабатываемый и поддерживаемый Microsoft. TypeScript это надмножество языка JavaScript с более строгой статической типизацией, большими возможностями для объектно-ориентированного программирования. Сегодня мы рассмотрим как использовать TypeScript вместе с React.
Чтобы создать новое проект с помощью Create React App с включенной поддержкой TypeScript, выполните следующую команду
npx create-react-app super-new-app --typescript
or
yarn create react-app super-new-app --typescript
Если вы ранее устанавливали пакет create-react-app глобально командой npm install -g create-react-app, рекомендуется удалить этот пакет командой npm uninstall -g create-react-app чтобы npx всегда использовал последнюю версию.
Чтобы добавить TypeScript в проект созданный Create React App, нужно установить некоторые пакеты
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
or
yarn add typescript @types/node @types/react @types/react-dom @types/jest
Дальше необходимо переименовать все JS файлы в файлы с расширением .ts, например src/index.js в src/index.tsx) і перезапустить dev-сервер. Ошибки типов должны появиться в консольном окне билд скрипта. Чтобы более детально ознакомиться с TypeScript, перейдите на их сайт и почитайте документацию
Частые проблемы
- Если ваш проект уже создан без поддержки TypeScript, npx может использовать кэшированную версию create-react-app. Удалите ранее установленную версию командой npm uninstall -g create-react-app Вам не обязательно создавать tsconfig.json файл, он будет создан автоматически. Также вы можете изменить сгенерированный архив так как вам нужно.
- Если вы сейчас используете create-react-app-typescript , эта статья поможет вам мигрировать до Create React App.
- Использования Webpack в сборке React TypeScript приложении
Если вы создает проект с нуля, взгляните сначала на шаблон
Для начала нужно создать директорию проекта. Давайте назовем ее new-app, но вы можете поменять ее как хотите.
mkdir new-app cd new-app
Структура проекта будет следующей
mkdir new-app
new-app/
├─ dist/
└─ src/
└─ components/
TypeScript файлы будут лежать в папке src, после компиляции они окажуться в файле bundle.js в папке dist. Все компоненты которые будут создаваться поместим в папку src/components.
Давайте создадим необходимые папки
mkdir src
cd src
mkdir components
cd ..
Webpack создаст папку dist после первой сборки.
Инициализация проекта
Запустите следующую команду
npm init
У вас будет несколько промтов, используйте дефолтный настройки, вы всегда сможете их поменять в package.json сгенерированном для вас.
Установка зависимостей
Сначала убедитесь что Webpack установлен глобально
npm install -g webpack
Webpack это утилита для сборки вашего кода и/или всех его зависимостей в один .js файл. Дальше добавляем библиотеки React и React-DOM вместе с файлам декларации типов
npm install --save react react-dom @types/react @types/react-dom
Также необходимо установить пакеты которые понадобятся на этапе разработки.
npm install --save-dev typescript awesome-typescript-loader source-map-loader
Эти библиотеки помогут TypeScript и webpack работать вместе. awesome-typescript-loader поможет Webpack скомпилировать вам TypeScript код используя стандартный файл конфигурации tsconfig.json. source-map-loader генерирует sourcemap для удобства в отладке.
Напишем немного кода
Код компонента
import * as React from "react"; export interface HelloProps { compiler: string; framework: string; } export class Hello extends React.Component<HelloProps, {}> { render() { return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; } }
Код index.tsx
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> </head> <body> <div id="example"></div> <!-- Dependencies --> <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> <!-- Main --> <script src="./dist/bundle.js"></script> </body> </html>
Обратите внимание, что мы включаем файлы из node_modules. Пакеты React и React-DOM npm включают в себя отдельные файлы .js, которые вы можете включить в веб-страницу, и мы ссылаемся на них напрямую, чтобы ускорить процесс.
И завершальним етапом является создания webpack.config.js файла.
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: __dirname + "/dist"
},
devtool: "source-map",
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};