# react-typescript-demo

**Repository Path**: lukangfeng/react-typescript-demo

## Basic Information

- **Project Name**: react-typescript-demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-14
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[TOC]

<label style="color:red">TypeScript+react 脚手架+ant-mobile UI 框架踩坑记录</label>

### 安装依赖

```
前提---->npm i create-react-app -g
```

**安装 react+typescript 脚手架**

```
npx create-react-app react-typescript-demo --typescript
```

**进入目录**
------自带装好 react/react-dom

```
cd react-typescript-demo
```

**首先先运行一下项目**

```
npm run start
```

没啥毛病，接下来我们先安装一下路由 react-router
【这边我们运用最新版本的 router】

```
npm install --save react-router
```

```
npm install --save react-router-dom
```

#### **这边遇到了一个大坑**

1. 项目生成的时候脚手架会默认装@types/react 与@types/react-dom 的 TypeScript 的声明文件
2. 当我装其他包的时候(例如 react-router)他会删掉声明文件，**所以当项目生成的时候我们需要自己手动安装声明文件**
3. **安装 typescript 的文件依赖**

```
npm install --D @types/react
```

```
npm install --D @types/react-dom
```

---

**安装 router 之后也需要安装声明文件**

```
npm install -D @types/react-router
```

```
npm install -D @types/react-router-dom
```

**安装 react-redux 状态管理**

```
npm install -s react-redux
```

安装中间件 redux-thunk

> tips:完成了 store.dispatch()的功能增强。即可以在 reducer 中进行一些异步的操作。

```
npm install -s redux-thunk
```

安装中间件 redux-logger

```
npm install -s redux-logger
```

最后别忘了 redux 的声明

```
npm install -D @types/react-redux
```

除了 UI 框架 ant-mobile 没安装，到现在为止基础都差不多

```
npm run start   成功跑起来
```

**_不能建立空文件而不暴露_**

> --isolatedModules 会提示报错

### 建立项目目录

```
├─api               api接口
├─assets            资源目录
│  ├─css            scss样式
│  └─svg            svg
│      ├─noselect   tabbar未选中svg
│      └─select     tabbar选中svg
├─components
├─redux             state 储存目录
│  ├─actions        行为层(方法)
│  ├─containers     容器层(方法/属性)
│  └─reducers       (数据中心)
├─routers           路由目录
└─views             视图目录
    ├─cart
    ├─home
    ├─news
    ├─product
    ├─search
    └─user
```

### 安装 ant-mobile 框架

```
npm install antd-mobile --save
```

#### 为了自定义配置 react-typescript

> 此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 react-app-rewired （一个对 create-react-app 进行自定义配置的社区解决方案）。

> 引入 react-app-rewired 并修改 package.json 里的启动配置。由于新的 react-app-rewired@2.x 版本的关系，你还需要安装 customize-cra。
> 高级配置

```
npm i -s react-app-rewired customize-cra
```

```diff
/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}
```

项目根目录创建一个 config-overrides.js 用于修改默认配置

```
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};
```

#### 按需加载组件

> 使用 babel-plugin-import

```
npm install -D babel-plugin-import
```

```diff
+ const { override, fixBabelImports } = require('customize-cra');

- module.exports = function override(config, env) {
-   // do stuff with the webpack config...
-   return config;
- };
+ module.exports = override(
+   fixBabelImports('import', {
+     libraryName: 'antd-mobile',
+     style: 'css',
+   }),
+ );
```

然后按需加载组件就可以快乐玩耍了(在什么页面用什么组件，就引入什么组件，无需引入 css 样式)

#### **设置别名**

根目录新建 paths.json

```
{
    "compilerOptions": {
      "baseUrl": "src",
      "paths": {
        "@components/*": ["components/*"],
        "@containers/*": ["redux/containers/*"],
        "@views/*": ["views/*"]
      }
    }
}
```

tsconfig.json

```
{
  "extends": "./paths.json"
}
```

别名弄完新路径玩耍起来,有需要再次添加

### Typescript 给 React 带来很多好处：

> 1.在组件头部定义 interface，让每个人在拿到组件的第一时间就可以很明确知道该组件需要使用的 props 和 state； 2.在编译中发现问题，减少运行时的报错； 3.可以在编辑器中实现实时类型校验、引用查询； 4.约束类型，在混合多语言环境中降低风险，等

安装 Sass 模块

```
npm i node-sass -D
```

---不需要配置，直接使用

使用 sass 使用混入写法,类似于函数式写法

```
$icon-width: 22px;
$icon-height: 22px;

@mixin makeIcon($url) {
    width: $icon-width;
    height: $icon-height;
    background: url($url) center center /  21px 21px no-repeat;
}
```

### 统一格式

下载 vscode 插件 prettier -Code formatter

在根目录建立 prettier.config.js

```
module.exports = {
  printWidth: 80,// 每行代码长度（默认80）
  tabWidth: 2,// 每个tab相当于多少个空格（默认2）
  useTabs: false,// 是否使用tab进行缩进（默认false）
  eslintIntegration: true,
  singleQuote: true,// 使用单引号（默认false）
  semi: false// 声明结尾使用分号(默认true)
}
```

vscode 设置--搜索 formatonsave,打上勾