Install the TS

yarn add typescript -D
Copy the code

Install the type declaration package for @types. When using a third-party library, we need to reference its declaration file to obtain the corresponding code completion, interface hints and other functions. The declaration file is a file in index.d.ts, usually stored in the root directory of the project. Alternatively, the typings/types attribute in package.json can be used to specify the location of declaration files in the project.

There are two ways to get a library type declaration file:

  • Either the library contains its own declaration file, that is, containsindex.d.tsFile, such a third-party library in the use of the time only need to install the library itself;
  • Another option is to retrieve declarations from third-party libraries that do not themselves contain them through TypeScript’s DefinitelyTyped repository

The React library does not contain any declarations, so you need to install the @types type declaration package:

yarn add @types/react @types/react-dom -D
Copy the code

You can see that @types/react contains only react related declaration files.

Project configuration

You can use YARN Run TSC –init to automatically generate a tsconfig.json file in the open project directory of the current terminal, or you can manually create the file. For details about configuration items, see — tsconfig

This file specifies the root file of the project and the compiler configuration required to compile the project, such as include, exclude, and compressed compilation configuration

{
  "compilerOptions": {
    "target": "es5"."module": "commonjs"."jsx": "react"
  },
  "include": ["src/**/*"]."exclude": ["node_modules"."build"."dll"."public"]}Copy the code

Configuration webpack

TypeScript has a specific file format, such as TS or TSX; Webpack requires the installation of additional loaders to parse them. Prior to Babel 7, the solution was to install ts-Loader or awesome typescript-loader, which was redundant when the project already had a Babel compiler. A TSX code goes through the process of TSX -> TS-loader ->js->babel-loader-js, i.e. a JS file needs to be processed by two loaders; Since Babel 7, @babel/preset-typescript has been introduced, which makes it easy to compile all JS-related code using Babel.

yarn add @babel/preset-typescript -D
Copy the code

@babel/preset-typescript contains only one plugin — @babel/plugin-transform-typescript, whose configuration items are as follows

Configuration items type The default value meaning
isTSX boolean false When enabled, the old TS type assertion syntax is usedvar foo = <string>barParse to JSX tag syntax; If this function is enabled, it must be configured at the same timeallExtensions: true
jsxPragma string React Replace the function used when compiling JSX expressions. The default is to use the React declarationReact
allowNamespaces boolean false Enable for TSnamespaceIn the future, this configuration item may be set by default totrue
onlyRemoveTypeImports boolean false When enabled, it is only removed at compile timetype-onlygrammar
allowDeclareFields boolean false When enabled, used in a classdeclareThe declared type is removed; After Babel 8 this configuration item will be enabled by default 
module.exports = {
  module: {
    rules: [{test: /\.(js|jsx|tsx|ts)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'.options: {
          presets: [['@babel/preset-env',
              {
                modules: false,}], ['@babel/preset-react'],
            ['@babel/preset-typescript'[,],},},],},resolve: {
    extensions: ['.ts'.'.tsx'],}};Copy the code

Matters needing attention

@babel/preset-typescript does not support const enum syntax. The solution is as follows:

  • Use the Babel – plugin – const – enum
  • removeconstThe statement

@babel/preset-typescript does not support typescript-specific export = and import = syntax, and the solution is as follows:

  • Use the Babel – plugin – replace – ts – export – the assignment
  • Using ES Moduleexport defaultorexport constreplaceexport =Grammar; useimport xxx from xxxreplaceimport =grammar

For resolve.alias configuration module path alias using Webpack, you need to configure the following two parameters in tsconfig.json:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      The '@': path.resolve(__dirname, 'src'),}}};Copy the code
// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": "."."paths": {
      "@ / *": ["./src/*"]}}}Copy the code

Modify the project

Rename the project file to the TS or TSX suffix so that the TS type hint takes effect