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

Question

Aleksey · Accepted Answer

Для подключения 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

Готово!

{message}

; }; ReactDOM.render( , document.getElementById('root') ); ``` Этот файл определяет основной компонент React. - Создать файл index.html в корневой директории проекта и добавить в него следующий код: ```html React TypeScript

``` Этот файл определяет HTML-разметку и подключает собранный JavaScript-файл. - Запустить проект: ```bash npm start ``` Готово!

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

Ответы

Каталог