как подключить typescript к react
Ответы
Для подключения 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
Готово!
0
0
