搭配 TypeScript运用

发布时间：2023-04-07 08:42:31 所属栏目：教程来源：

导读：TypeScript 是 JavaScript 类型的超集。由于其带来的好处，它最近在应用中变得流行。如果您尚未使用过 TypeScript，强烈建议您在继续阅读之前先熟悉它。您可以查看其文档。

TypeScript 可以为 Redux 应用程序带来

TypeScript 是 JavaScript 类型的超集。由于其带来的好处，它最近在应用中变得流行。如果您尚未使用过 TypeScript，强烈建议您在继续阅读之前先熟悉它。您可以查看其文档。

TypeScript 可以为 Redux 应用程序带来以下好处：

为 reducer、state 和 action creator 带来类型安全

轻松重构 type 代码

在团队协作环境中获得愉悦的开发体验

实例
我们将通过一个简单的聊天应用程序来演示包含静态类型的可能方法。这个聊天应用程序将有两个 reducer。chat reducer 将专注于存储聊天记录，system reducer 将专注于存储会话信息。

完整的源代码可在 codesandbox 查看。请注意，通过亲自阅读这个示例，您将体验到使用 TypeScript 的一些好处。

为 State 增加类型检查
向每个 state 切片添加类型是一个很好的开始，因为它不依赖于其他类型。在这个例子中，我们首先描述 chat reducer 相关的 state 切片：

// src/store/chat/types.ts

export interface Message {
user: string
message: string
timestamp: number
}

export interface ChatState {
messages: Message[]
}
然后对 system reducer 相关的 state 切片做同样的处理：

// src/store/system/types.ts

export interface SystemState {
loggedIn: boolean
session: string
userName: string
}
请注意，我们正在导出这些 interface，以便稍后在 reducer 和 action creators 中重用它们。

为 Action & Action Creator 增加类型检查
我们将使用字符串文字并使用 typeof 来声明我们的 action 常量和推断类型。请注意，我们自己权衡是否需要在单独的文件中声明我们的类型。将我们的类型分成单独的文件，可以让我们的其他文件更专注于它们的目的。虽然这种方式可以提高代码库的可维护性，但是您依旧可以按照自己的喜好组织代码结构。

chat Action 常量和形状：

// src/store/chat/types.ts
export const SEND_MESSAGE = 'SEND_MESSAGE'
export const DELETE_MESSAGE = 'DELETE_MESSAGE'

interface SendMessageAction {
type: typeof SEND_MESSAGE
payload: Message
}

interface DeleteMessageAction {
type: typeof DELETE_MESSAGE
Meta: {
timestamp: number
}
}

export type ChatActionTypes = SendMessageAction | DeleteMessageAction
请注意，我们在此处使用 TypeScript 的联合类型来表达所有可能的操作。

声明这些类型后，我们现在还可以对 chat 的 action creator 做类型检查。在这种情况下，我们利用 TypeScript 的 inference：

// src/store/chat/actions.ts

import { Message, SEND_MESSAGE, DELETE_MESSAGE } from './types'

// TypeScript infers that this function is returning SendMessageAction
export function sendMessage(newMessage: Message) {
return {
type: SEND_MESSAGE,
payload: newMessage
}
}

// TypeScript infers that this function is returning DeleteMessageAction
export function deleteMessage(timestamp: number) {
return {
type: DELETE_MESSAGE,
Meta: {
timestamp
}
}
}
system action 常量和形状：

// src/store/system/types.ts
export const UPDATE_SESSION = 'UPDATE_SESSION'

interface UpdateSessionAction {
type: typeof UPDATE_SESSION
payload: SystemState
}

export type SystemActionTypes = UpdateSessionAction
有了这些类型，我们现在也可以对 system 的 action creator 做类型检查：

// src/store/system/actions.ts

import { SystemState, UPDATE_SESSION } from './types'

export function updateSession(newSession: SystemState) {
return {
type: UPDATE_SESSION,
payload: newSession
}
}
为 reducer 增加类型检查
reducer 只是纯函数，它输入先前的 state 和一个 action 然后返回下一个 state。在此示例中，我们显式声明此 reducer 将接收的 action 类型以及它应返回的内容（适当的 state 切片）。通过这些添加，TypeScript 将在我们的 action 和 state 的属性上提供丰富的智能感知。另外，当某个案例没有返回 ChatState 时，我们也会收到错误提示。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!