https://github.com/lei4519/dva-type
根据 dva model 的类型定义进行 state、dispatch 的 TS 类型推导。传入 model 类型定义，返回 state 和 actions 的类型定义。
https://github.com/lei4519/dva-type
Last synced: about 2 months ago
JSON representation
根据 dva model 的类型定义进行 state、dispatch 的 TS 类型推导。传入 model 类型定义，返回 state 和 actions 的类型定义。
- Host: GitHub
- URL: https://github.com/lei4519/dva-type
- Owner: lei4519
- License: mit
- Created: 2021-06-07T02:40:45.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-06-10T02:27:09.000Z (almost 4 years ago)
- Last Synced: 2025-03-10T20:07:04.145Z (3 months ago)
- Language: TypeScript
- Size: 16.6 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# dva-type
## 安装
> npm i dva-type —save-dev
## 说明
基于 TypeScript 4.1 版本的 [Template Literal Types](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-1.html) 特性，实现 `dva models` 的完整类型推导和提示。
传入项目的 `models` 类型定义，返回 `state`、`actions`的类型定义。
- `state` 类型提示
- `action type` 类型提示
- `action payload` 类型推断
## 使用
[Example](https://github.com/lei4519/dva-type/blob/main/examples/index.ts)
1. 定义单个 `Model` 类型（注意 `Model`、`Effect` 不是从 `dva` 中导入的）
```ts
import { Effect, Model } from 'dva-type'
interface ListModel extends Model {
state: {
list: any[]
}
effects: {
// 定义effect 传入 payload 类型
getList: Effect
// 不需要 payload 的 effect
getInfo: Effect
}
}
```
2. 定义项目中所有 `Model` 的集合（**使用 `type` 而不是 `interface`**）
```ts
// 使用 type 定义 models，将项目中的所有 model 进行收集
type Models = {
list: ListModel
info: InfoModel
// ...
}
```
3. 将 `Models` 传入 `ResolverModels` 获取 `state` 和 `actions` 的类型
```ts
import { ResolverModels } from 'dva-type'
type State = ResolverModels['state']
type Actions = ResolverModels['actions']
```
4. 使用
```ts
// hooks
useSelector()
const dispatch = useDispatch<(action: Actions) => any>()
// class
const mapStateToProps = (state: State) => {}
interface Props {
dispatch: (action: Actions) => any
}
```