TS学习（实战篇）

作者: 爱吃土豆丝杉杉 | 来源:发表于2019-07-30 13:01 被阅读0次

TS学习（实战篇）
jsmpeg系列四源码ts.js TS格式解析流程
Ts学习
ts学习
Typescript
编译Typescript文件
Day 17 熟能生巧
TS初学笔记
TypeScript 高级类型
ts -- 学习感受

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

初始化项目

mkdir demo
cd demo && npm init -y

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

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

整个的目录结构就是：

image.png

安装一下必要的包

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

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

import * as React from "react";

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

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

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

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

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

ReactDom.render(
  <Hello compiler="ts" framework="compile" />,
  document.getElementById('example')
)

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

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

mkdir template
cd template && vim index.html

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>噗</title>
</head>
<body>
<div id="example"></div>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
</body>
</html>

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

编写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

<script src="./main.dedef48754.js"></script>

配置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