时间戳

首页 > 解决方案 > 类型：类型变量与类型：字符串

typescript - 类型：类型变量与类型：字符串

问题描述

当我构建 react redux 应用程序时收到警告消息：

"message": "Type '{ type: string; payload: Text[]; }' 不可分配给类型 'MessageAction'。\n 属性类型 'type' 不兼容。\n 类型 'string' 不可分配给键入'\"MESSAGES_ACTIONS_SUCCESS\"'。",

所以：

src/pages/home/modules/types.ts 中的 1 和 2 有什么不同

// src/pages/home/modules/types.ts
1. got warn msg
export const MESSAGES_ACTIONS_SUCCESS = "MESSAGES_ACTIONS_SUCCESS"

export interface MessageAction {
  type: typeof MESSAGES_ACTIONS_SUCCESS
  payload: Text[]
}

2.no warn msg
export const MESSAGES_ACTIONS_SUCCESS = "MESSAGES_ACTIONS_SUCCESS"

export interface MessageAction {
  type: string
  payload: Text[]
}

// src/pages/home/modules/actions.ts
import { Dispatch } from "redux"

import { MESSAGES_ACTIONS_SUCCESS, MessageAction } from "./types"

export const loadMessageData = () => async (
  dispatch: Dispatch
): Promise<MessageAction> => {
  const messages: Text[] = await new Promise(resolve => {
    setTimeout(() => resolve([{ text: "home ~~~~~~" }]))
  })

  return dispatch({
    type: MESSAGES_ACTIONS_SUCCESS,
    payload: messages
  })
}

更多信息代码仓库是 https://github.com/77xi/SSR/pull/5

标签： typescript

解决方案

我重写了您提供的代码以创建一个稍微简单的失败案例：

const MESSAGES_ACTIONS_SUCCESS = "MESSAGES_ACTIONS_SUCCESS";

interface MessageActionOne {
  type: typeof MESSAGES_ACTIONS_SUCCESS;
  payload: Text[];
}

interface MessageActionTwo {
  type: string;
  payload: Text[];
}

// Infered type will be: { type: string; payload: never[]; }
const action = {
  type: MESSAGES_ACTIONS_SUCCESS,
  payload: []
};

const one: MessageActionOne = action;
//    ^^^  Type 'string' is not assignable to type '"MESSAGES_ACTIONS_SUCCESS"'

这是 TypeScript 游乐场

问题是在这个例子action中被推断为type: string而不是type: "MESSAGES_ACTIONS_SUCCESS"。

如果你用它更新了第一行as const应该可以解决这个打字问题：

const MESSAGES_ACTIONS_SUCCESS = "MESSAGES_ACTIONS_SUCCESS" as const;

interface MessageActionOne {
  type: typeof MESSAGES_ACTIONS_SUCCESS;
  payload: Text[];
}

interface MessageActionTwo {
  type: string;
  payload: Text[];
}

// Infered type will be: { type: "MESSAGES_ACTIONS_SUCCESS"; payload: never[]; }
const action = {
  type: MESSAGES_ACTIONS_SUCCESS,
  payload: []
};

const one: MessageActionOne = action;

这是固定示例的 TypeScript 操场。

const断言是在 TypeScript 3.4 中添加的，你可以在这里阅读更多关于它们的信息。突出显示的第一个问题是您遇到的问题：

不应该扩大该表达式中的文字类型（例如，不要从“hello”变为字符串）

推荐阅读