使用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、安装reactreact-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>中泛型是propsstate如果没有就传递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);
    }
    
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水痕01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值