как подключить typescript к react

2 года назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Для подключения TypeScript к React необходимо выполнить следующие шаги:

Установить TypeScript и ts-loader:

npm install typescript ts-loader --save-dev

Создать файл tsconfig.json в корневой директории проекта и описать правила. Пример:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  },
  "include": ["./src/**/*"]
}

Этот файл определяет настройки компилятора TypeScript и указывает, где находятся файлы проекта.

Создать webpack.config.js файл:

const path = require('path');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

Этот файл определяет настройки Webpack.

Создать файл index.tsx в папке src и добавить в него следующий код:

import React from 'react';
import ReactDOM from 'react-dom';

interface AppProps {
  message: string;
}

const App: React.FC<AppProps> = ({ message }) => {
  return <h1>{message}</h1>;
};

ReactDOM.render(
  <App message='Hello, world!' />,
  document.getElementById('root')
);

Этот файл определяет основной компонент React.

Создать файл index.html в корневой директории проекта и добавить в него следующий код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React TypeScript</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

Этот файл определяет HTML-разметку и подключает собранный JavaScript-файл.

Запустить проект:

npm start

Готово!

2 года назад

Aleksey

2 месяца

Typescript

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

2 месяца

React

Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

Тестирование на Playwright (JS/TS)

Навык тестировать веб-приложения с Playwright на JavaScript, повышая их качество и надёжность кода

2 месяца

ООП на Javascript

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

Похожие вопросы