TypeScript极速完全入门-3ts结合react进行项目开发

摘要：前面我们已经说了大部分的核心内容，接下来我们就说说如何用开发实际项目。因为和结合很紧密，资料也很多，而且我会找机会专门说下这方面的知识，所以我们将重点放到如何用结合上来。所以前面打牢基础，现在我们开始实际组建工作流。

前面我们已经说了大部分typescript的核心内容，接下来我们就说说如何用typescript开发实际项目。

因为angular和typescript结合很紧密，资料也很多，而且我会找机会专门说下这方面的知识，所以我们将重点放到如何用typescript结合react上来。

相信很多朋友都已经想到或者再用typescript工作流了，所以前面我一直用最原始的方式大家也许会觉得是不是太麻烦和不够贴近实际，其实工作流都是由最基础的知识组成的，我们不仅要知其然，还要知其所以然，不然你在实际工作中有一点跟我讲的东西不一样的地方，你就不会用了。所以前面打牢基础，现在我们开始实际组建工作流。

新建一个easy文件夹，然后

</>复制代码 
npm init

啥也别管，一路回车，然后就well done了，项目初始化完成，开始装react.

</>复制代码 
npm install react react-dom --save

我们装上了react并不能直接在浏览器里面用，大家懂得，一堆JSX代码需要最后编译成普通js才能被浏览器看懂，这个工作以前是react的脚手架干的，但是咱们不仅仅会用脚手架，还得会自己搭脚手架，因为我遇到过有的朋友用react只能项目老大把项目什么都配置好，他只去写组件，编译的时候遇到一个相对路径的更改都搞不定，这样就严重影响自身react技能和项目进展了，所以我们从最基础的来，教大家配置下。

我们使用webpack,

</>复制代码 
npm install webpack ts-loader --save-dev

大家都知道用脚手架安装完react都会出来 localhost://xxx之类的一个地址然后展示react安装成功，这说明我需要一个服务器，我们就整一个，

</>复制代码 
npm install lite-server --save-dev

这样，服务器跑起来了，页面也能看到了，但是我们需要一堆事要做，比如把typescript编译成js代码并压缩，还有大家也看到了多麻烦前面，是不是我改点东西就得tsc一下，然后再刷新一下页面，非常麻烦我们需要自动监视，不废话，直接上webpack.

</>复制代码 
npm install webpack

然后项目根目录下，配置webpack.config.js,

</>复制代码 
module.exports = {
    entry:"./src/index.tsx",
    output:{
        filename: "app.js",
    },
    devtool:"source-map",
    resolve:{
        extensions: [".ts", ".tsx", ".js"]
    },
    module:{
        rules:[
            {test:/.tsx?$/,loader:"ts-loader"}
        ]
    }
};

非常简单，但是大家注意这里我要强调的是webpack最新版本,省的一些参数写起来不一样，比如以前用的loaders现在替换成了rules，接着上typescript

</>复制代码 
npm install typescript --save-dev

然后配置，输入命令行，

</>复制代码 
tsc --init

打开根目录的tsconfig.json，配置如下，

</>复制代码 
{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": false,
        "jsx": "react"
    },
    "exclude": [
        "node_modules"
    ]
}

干得漂亮，继续，因为我们要用react，知己安装

</>复制代码 
npm install react reac-dom --save-dev

安装好了react，但是react是jsx文件啊，即使有js他也没有类型啊，比如let a = 12;人家typescript是要酱紫的

let a:number = 12;这就容易出事和报错，所以我们进行状态管理。处理一下。

</>复制代码 
npm install --save-dev @types/react @types/react-dom

大功告成，但是有个小问题，我怎么使用工作流呢？

我期待着，

</>复制代码 
npm start

然后就开始监视更改，

</>复制代码 
npm run build

就编译，可以的，打开package.json,拿走不谢。

</>复制代码 
{
  "name": "easy",
  "version": "1.0.0",
  "description": "play and test",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "lite-server",
    "build": "webpack --mode production"
  },
  "author": "leolau",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1"
  },
  "devDependencies": {
    "@types/react": "^16.3.10",
    "@types/react-dom": "^16.0.5",
    "lite-server": "^2.3.0",
    "ts-loader": "^4.2.0",
    "typescript": "^2.8.1",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

还有最后一nainai,就是tsconfig.json里面加一句

</>复制代码 
"jsx": "react",//增加ts对jsx的支持

好了，浪一把，在根目录下创建文件夹和文件src/components/HelloWorld.tsx

</>复制代码 
import * as React from "react";
interface HelloProps{
    name:string,
    age:number
}
export class Hello extends React.Component{
   render(){
       return (
        
               我是，{this.props.name},今年{this.props.age}岁了
        
       );
   };
}

src/index.tsx如下，

</>复制代码 
import * as React from "react";
import * as ReactDOM from "react-dom"
import {Hello} from "./components/HelloWorld"
ReactDOM.render(,document.getElementById("app"));

项目根目录下，index.html

</>复制代码 
    
    
    
    
    
    
我是不是你最疼爱的人，你为啥不说话
    

这样就well done了，

</>复制代码 
npm start

开发，

</>复制代码 
npm run build

编译，直接共产主义阶段，生活太爽了。

1.TS的初步配置
2.TS 数据类型 any 枚举
3.函数的参数和返回值类型
4.类 非常重要 非常重要

</>复制代码 
修饰符 public private
抽象类
接口
类继承

5.静态类属性和方法 Math
6.泛型
7.模块化

</>复制代码 
systemjs 

8.项目

</>复制代码 
TS+react+webpack结合的应用
类型管理 js->tsx 2.0
如何用TS开发react->TSX(难点->官网 项目)
package.json -> npm start npm run build 

学完本系列三篇文章，大家就对ts有了基本的了解和认识了，但是实际开发过程中还会遇到很多实际的问题，遇到的问题一方面大家可以参考我的视频教程

TypeScript极速完全进阶指南
也可以在本文章评论区留言，后续ts教程我会持续更新，欢迎大家提出宝贵的建议和问题，期待着我们的共同成长和进步，谢谢大家！