使用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 inittsc --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.Componentexport 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);}