# react-jira-demo

**Repository Path**: fyshallow/react-jira-demo

## Basic Information

- **Project Name**: react-jira-demo
- **Description**: Typescript + React Hooks
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-15
- **Last Updated**: 2021-08-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目基础搭建

## 创建一个项目

```
create-react-app my-app --template typescript
```

## 配置绝对路径

在 tsconfig.json 中添加 baseUrl

```
{
    ...
    "baseUrl": "./src",
    ...
}
```

## 项目规范

### 在项目中使用 prettier

```
npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json // 添加一个格式化配置文件
```

创建一个.prettierignore 文件，指示哪些文件不能格式化

### 使用预提交 hook

```
npx mrm lint-staged // 实际操作直接使用存在问题，会报错
//使用一下代替
npm install mrm@2 -g
npm install husky lint-staged -D
npm mrm@2 lint-staged
```

### 兼容 create-react-app 中 eslint 的规则

```
npm install eslint-config-prettier -D
修改package.json
{
    ...
    "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "prettier" //添加该项，表示使用prettier替换eslint中的规则
    ]
  },
  ...
}
```

### git commit 描述规范

```
npm install --save-dev @commitlint/config-conventional @commitlint/cli
```

新增 commitlint.config.js

```
module.exports = {extends: ['@commitlint/config-conventional']}
```

添加命令，约定提交语句的格式

```
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
```

# 数据模拟

## 业界方案有，mockjs，本项目使用 json-server

restful api 接口名相同，根据不同的方法去区分接口的，get 获取数据，post 添加数据，put 替换数据，patch 修改数据，delete 删除数据

-   安装依赖

```
npm install json-server
```

-   创建一个新的文件夹**json_server_mock**,创建 db.json 存放数据
-   package.json 添加命令,启动 mock 服务器，并指定端口 3003

```
{
...
"mock": "json-server __json_server_mock__/db.json --watch --port 3003"
...
}
```

# 使用 jira-dev-tools

## 安装工具包

```
  npx imooc-jira-tool
```

会自动安装 jira-dev-tool 包，并在 public 文件夹下生成一个数据存储文件

## 改造入口 index.tsx 页面

```
...
import { loadDevTools } from "jira-dev-tool";

loadDevTools(() =>
    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
        document.getElementById("root")
    )
);
...
```

## unkonwn

unknow 是一个严格版的 any，最好用 unkonw 代替 any
unknow 类型不能赋值一个固定类型

```
let a:number = 2
let b:unknown = 'str'
a = b // 报错
```

## Typescript type 和 interface 的区别

类型别名 type 和 interface 在很多情况下可以互换，但 interface 在联合类型和交叉类型情况下无法替代 type

```
type Props = string | number | undefined //联合类型
```

## 鸭子类型（面向接口编程 而不是 面向对象编程）

## json-server 模拟自定义接口

在**json_server_mock**文件夹下添加 middleware.js

## JWT 登录

## axios 和 http 在处理异常时的表现

axios 在接口返回状态不为 2XX 时，会自动抛出异常，而 fetch Api 需要手动抛出

## Utility type

interface 无法实现 Utility type，常见的 Utility type，Partial(将类型别名对象属性变可选), Omit(删除类型别名对象属性)

Parameters 将一个函数类型的参数类型提取为一个 tupe 类型
Partial 将一个类型的所有属性变成可选的

Partial 的实现

```
type Partial<T> = {
  [P in keyof T]?: T[P]
}
```

Omit 删除某些属性， 第一个是基本类型， 第二个是需要删除的属性

```
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
```

Pick 返回第一个类型在第二个类型中存在的属性

```
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
```

Exclude 返回第一个类型中不属于第二个类型的属性

```
type Exclude<T, U> = T extends U ? never : T;
```

```
type Person {
  name: string;
  age: number;
}
let xiaoming: Partial<Person> = {}
let xiaoHong: Omit<Person, 'name' | 'age'> = {}
let xiaoHong: Omit<Person, 'name'> = {age: 26}
```

# CSS in Js

```
npm install @emotion/styled
...

import styled from '@emotion/styled'
```

安装 vscode-styled-components idea 插件，提供高亮提示

```
普通html元素
styled.div`
  width: 100px;
  height: 200px;
  background： #333;
`

组件元素

styled(ComponentName)`
width: 200px;
height: 100px;
`

```

## promise

promise.catch 会消化异常，当外部需要捕获异常时，需要使用 Promise.reject 抛出异常

## useState 直接传入函数,表示惰性初始化,会直接执行该函数

用 useState 保存函数

```
const [callback, setCallBack] = useState(() => () => {})

// 修改状态

setCallback(() => () => {})

```

## 组件组合

当一个公共组件在多出使用时, 可以考虑直接传入组件的方式, 进行解耦, 子组件不用考虑状态如何去消化 props