how to using TypeScript in React project All In One
how to using TypeScript in React project All In One
TSX & JSX
new react project
$ npx create-react-app my-app --template typescript
# or
$ yarn create react-app my-app --template typescript
https://create-react-app.dev/docs/adding-typescript/
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
old react project
webpack
$ yarn add -D typescript @types/react @types/react-dom
"use strict";
const path = require("path");
module.exports = {
// Set debugging source maps to be "inline" for
// simplicity and ease of use
devtool: "inline-source-map",
// The application entry point
entry: "./src/index.tsx",
// Where to compile the bundle
// By default the output directory is `dist`
output: {
filename: "bundle.js"
},
// Supported file loaders
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
},
// File extensions to support resolving
resolve: {
extensions: [".ts", ".tsx", ".js"]
}
};
https://www.pluralsight.com/guides/typescript-react-getting-started
webpack typescript react
https://webpack.js.org/guides/typescript/
https://typescript.bootcss.com/tutorials/react-&-webpack.html
React and TypeScript
https://www.typescriptlang.org/docs/handbook/react.html
https://www.typescriptlang.org/docs/handbook/jsx.html
https://react-typescript-cheatsheet.netlify.app/
refs
React with TypeScript: Best Practices
https://www.sitepoint.com/react-with-typescript-best-practices/
https://blog.bitsrc.io/why-and-how-use-typescript-in-your-react-app-60e8987be8de
$ npm i -D typescript awesome-typescript-loader
https://www.npmjs.com/package/awesome-typescript-loader
https://github.com/TypeStrong/ts-loader
module.exports = {
entry: [
path.join(process.cwd(), 'app/app.tsx'),
// or whatever the path of your root file is
]
module: {
rules:[{ test: /\.tsx?$/, loader: 'awesome-typescript-loader' }],
// other loader configuration goes in the array
resolve: {extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx']}
}
}
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14613368.html
未经授权禁止转载,违者必究!