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, 禁止转载 🈲️，侵权必究⚠️！

---