创建 TypeScript & React 项目

项目需求

一个简单的员工管理系统，分为两部分功能：员工管理和系统设置。在员工管理部分，可以通过员工的姓名和部门进行查询员工的信息；在系统设置部分，进行简单的系统配置。

有两种初始化方案

我们可以通过两种方式创建项目：手动配置和使用脚手架；手动配置为了对项目的配置有一个基本了解，之后的开发还是基于脚手架开展。

手动配置

• 创建 基本的 ts 环境

• 安装 react 及其声明文件

  npm i react react-dom
  

  npm i -D @types/react @types/react-dom
  

• 修改配置项

  TypeScript 具有三种 JSX 模式：preserve、react 和 react-native。 这些模式只在代码生成阶段起作用 - 类型检查并不受影响。

  • 在 preserve 模式下生成代码中会保留 JSX 以供后续的转换操作使用（比如：Babel）。 另外，输出文件会带有 .jsx 扩展名。
  • react 模式会生成 React.createElement，在使用前不需要再进行转换操作了，输出文件的扩展名为.js。
  • react-native 相当于 preserve，它也保留了所有的 JSX，但是输出文件的扩展名是.js。

  模式	输入	输出	输出文件扩展名
  preserve	<div />	<div />	.jsx
  react	<div />	React.createElement(“div”)	.js
  react-native	<div />	<div />	.js

  // tsconfig.json
  {
       
    "compilerOptions": {
       
      "jsx": "react"
    }
  }
  

• 修改入口文件配置

  src/index.ts 修改文件拓展名 src/index.tsx

  // webpack.base.config.js
  module.exports = {
       
    entry: "./src/index.tsx",
    ...
  };
  

  // package.json
  {
       
    ...
    "main": "./src/index.tsx"
  }
  

• 调试一下，看看行不行

  // src/components/demo/Hello.tsx
  
  import React from "react";
  
  interface Greeting {
    name: string;
  }
  
  const Hello = (props: Greeting) => <h1>hello {props.name}</h1>;
  
  export default Hello;
  

  // src/index.tsx
  
  import React from "react";
  import ReactDOM from "react-dom";
  import Hello from "