使用typescript构建react项目环境搭建

一、使用typescript开发react项目常见有两种方式

• 1、使用webpack手动配置
• 2、使用create-react-app脚手架

二、使用webpack手动配置

• 1、全局安装webpack

  npm install webpack -g
  # 本人一般会安装这个服务的
  npm install webpack-dev-server -g
  

• 2、创建一个项目目录

• 3、进入项目文件,在黑窗口中输入命令

  npm init
  tsc --init //如果tsc --init 提示报错,可能要先全局安装npm install -g typescript
  

• 3、安装react与react-dom包

  npm install --save react react-dom @types/react @types/react-dom
  

• 4、安装开发依赖包

  npm install --save-dev typescript awesome-typescript-loader source-map-loader
  

• 5、修改tsconfig.json文件

  {
      "compilerOptions": {
          "outDir": "./dist/",
          "sourceMap": true,
          "noImplicitAny": true,
          "module": "commonjs",
          "target": "es5",
          "jsx": "react"
      },
      "include": [
          "./src/**/*"
      ],
      "exclude": [
          "node_modules"
      ]
  }
  

• 6、在根目录下创建一个webpack.config.js文件

  'use strict';
  module.exports = {
      entry: "./src/index.tsx",
      output: {
          filename: "bundle.js",
          path: __dirname + "/dist"
      },
  
      devtool: "source-map",
      // 忽视文件后缀名  
      resolve: {
          extensions: [".ts", ".tsx", ".js", ".json"]
      },
      // 模块加载器
      module: {
          rules: [
              { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
              { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
          ]
      },
  
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      },
  };
  

• 7、新建一个src文件夹存放所有的tsx文件

  ***Hello.tsx文件***
  import * as React from "react";
  
  // 定义一个接口约束传递进来的参数类型(类似传统js中[组件.propTypes = {})
  export interface HelloProps { compiler: string; framework: string; }
  
  // 定义一个类去继承React.Component
  export class Hello extends React.Component<HelloProps, undefined> {
      render() {
          return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>;
      }
  }
  

• 8、主入口文件

  ***index.tsx***
  import * as React from "react";
  import * as ReactDOM from "react-dom";
  
  // 导入定义的组件  
  import { Hello } from "./components/Hello";
  
  // 渲染到example节点上
  ReactDOM.render(
      <Hello compiler="TypeScript" framework="React" />,
      document.getElementById("example")
  );
  

• 9、打包，运行

• 10、代码见react_ts01

• 11、文件目录结构
  

三、使用create-react-app构建react项目

• 1、全局安装create-react-app

  npm install -g create-react-app
  

• 2、创建一个项目

  create-react-app my-app --scripts-version=react-scripts-ts
  

• 3、运行项目

  npm run start
  

• 4、打包项目

  npm run build
  

• 5、代码见react_ts02

四、关于typescript构建react项目注意点

• 1、extends React.Component<object,State>中泛型是props和state如果没有就传递object

• 2、定义未使用就会报错

• 3、react中获取DOM元素的方法

  import * as ReactDOM from 'react-dom';
  ...
  return (
      <div className="hello">
          <div className="greeting">
              Hello word
              <p ref="myp">1111--{this.state.num1}</p>
              <input value="添加" onClick={this.add} type="button"/>
          </div>
      </div>
  );
  ...
  componentDidMount(){
      console.log(`componentDidMount方法`);
      var myp = ReactDOM.findDOMNode<HTMLInputElement>(this.refs["myp"]);
      console.log(myp.innerText);
  }