TS学习（实战篇）

前面有讲过一些TS的基础的东西，但是我们在实际的项目中肯定不单单是只用TS的，现在基本上都是 React or Vue + webpack + TS,，所以我们这次实战一个基本的demo。
步骤如下：

1. 初始化项目

mkdir demo
cd demo && npm init -y

这样我们就能发现创建了一个文件夹并且package.json都以及创建好了。
2.现在我们来创建一下项目的基本目录

mkdir -p src/component
mkdir -p src/page
vim index.tsx

整个的目录结构就是：

image.png

3. 安装一下必要的包

npm install --save react react-dom
npm install --save-dev @types/react  @types/react-dom
npm install --save-dev webpack webpack-cli
npm install --save typescript ts-loader

在这里解释一下安装这几个的目的：
首先安装webpack，webpack从4版本以后就要求装webpack-cli了，因为这次用react+webpack+ts构建，所以需要装 ts和react，react-dom，最后@types这个在我前面的基础里面也讲到这个是类型文件，必须装的，不装的话会包ts的错误。最后还有个ts-loader，因为webpack本身不支持ts语法的，所以需要通过loader扩展达到目的。装完之后package.json里面大致这样（忽略我安装的其他的node包，那个是我后续要用到的）：

image.png

4. 编写demo组件
   在component里面建立一个hello.tsx文件
   代码如下：

import * as React from "react";

export interface HelloProps { compiler: string; framework: string; }

export const Hello = (props: HelloProps) => 
Helloee呃呃呃呃呃嗯e from {props.compiler} and {props.framework}!
;

在src目录下的index.tsx编写代码：

import * as React from 'react';
import * as ReactDom from 'react-dom';

import { Hello } from './component/hello';

ReactDom.render(
  ,
  document.getElementById('example')
)

这只是个简单的demo，真正的项目里面建议划分的路径为
components（公共组件）
page
单个页面
单个页面私有的组件
index.tsx

5. 编写模版文件
   在根目录下创建template文件夹

mkdir template
cd template && vim index.html

里面具体的index.html代码如下：

这里很奇怪我为什么要引用react这些开发js，因为这些东西webpack打包的时候没有必要打进去。。怪占体积的。。。
不过在这里引用之后，相应的webpack里面也要配置externals

5. 编写webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const html = new HtmlWebpackPlugin({
  title: 'ts测试',
  template: './template/test.html',
  inject: true,
})

module.exports = {
  mode: "development",
  devtool: "source-map",
  entry: "./src/index.tsx",
  output: {
    filename: "[name].[hash].js",
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader"
          }
        ]
      }
    ]
  },
  devServer: {
    contentBase: './'
  },
  plugins: [
    new CleanWebpackPlugin(),
    html
  ],
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
}

我这里面是还配置了webpack-dev-server，用于实时刷新页面的，但是并没有配热模块，懒得配了。通过这个配置可以看出来，最后会在dist目录下生成html文件，也就是这个文件会实时的引入main.哈希值.js

6. 配置package.json命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --open"
  },

我一般是用npm run dev。
其实 是为了图方便用webpack-dev-server。。，用webpack-dev-middleware+express同样能实现，而且还能在express里面做代理，
具体的项目可以去我的github上看[github]https://github.com/swallow-liu/Th-demo