by nazarmsx | JS фреймворки

Написания React приложения на TypeScript

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"
    }
};
Просмотры: 664