Typescript 中的 Redux 不检查类型答案

【问题标题】：Redux in Typescript doesn't check typesTypescript 中的 Redux 不检查类型
【发布时间】：2020-07-21 14:58:35
【问题描述】：

我按照https://redux.js.org/recipes/usage-with-typescript的手册进行操作

这里是 Redux 的类型定义。我将标题变量类型设置为布尔值，它应该只接受真或假。

export interface MarkdownData {
    title: boolean;
}

export interface MarkdownState {
    data: MarkdownData;
}

export const MARKDOWN_SUCCESS = "MARKDOWN_SUCCESS";

interface FetchSuccessAction {
    type: typeof MARKDOWN_SUCCESS;
    payload: MarkdownData;
}

export type MarkdownActionTypes = FetchSuccessAction;

这是reducer..我只是将有效负载分配给数据。

import {
  MarkdownState,
  MARKDOWN_SUCCESS,
  MarkdownActionTypes
} from '../types/markdown';

const initialState: MarkdownState = {
  data: {
    title: false
  }
};

export default function (state = initialState, action: MarkdownActionTypes): MarkdownState {
  switch (action.type) {
    case MARKDOWN_SUCCESS:
      return {
        ...state,
        data: action.payload
      }
    default:
      return state
  }
}

实际上，然后我尝试将参数存储到 redux 状态。

export function fetchSuccess(response:MarkdownData): MarkdownActionTypes {
  console.log("Response contents : ", response)
  return {
    type: MARKDOWN_SUCCESS,
    payload: response
  };
}

这是上面 fetchSuccess() 函数中的 console.log 输出，

Response contents :  {
  title: 'my-app',
}

奇怪的是，当试图将此字符串值“my-app”分配给应该只接受布尔类型的标题变量时，这个应用程序没有错误。整个应用运行良好，不会产生错误或警告。

我该如何解决它，以便打字稿可以拒绝将字符串值分配给布尔变量？

添加：

export const fetchMD_Homepage = (site: string) => async (dispatch: Dispatch) => {
  if (!site) {
    return
  }

  try {
    const response = await fetch(`http://localhost:3000/api/markdown/Homepage`)
    const items:MarkdownData = await response.json()
    dispatch(fetchSuccess(items))
  } catch (err) {
    dispatch(fetchError(err))
  }
}

我像这样调用 fetchSuccess() 函数。

如果我将“dispatch(fetchSuccess(items))”更改为“dispatch(fetchSuccess({title:"ddw"}))”，那么是的，它会打印一个我无法将字符串分配给布尔值的错误。

【问题讨论】：

你能展示你的异步逻辑，它首先调度fetchSuccess吗？
@markerikson 抱歉，已添加。

标签： typescript redux

【解决方案1】：

问题是你断言items是MarkdownData类型，并且你告诉TS那个类型包含一个布尔值。 TS 无法知道来自 fetch() 的实际返回类型是什么，所以如果 API 响应包含一个字符串，而您说字段应该是布尔值，TS 无法知道这一点，也不会阻止该代码跑步。从它的角度来看，数据是正确的类型，因此使用该数据的代码是正确的。这是编译时类型和运行时类型的区别。

【讨论】：

【解决方案2】：

Typescript 只在编译时检查类型，而不是在运行时检查类型。 Typescript 无法知道来自fetch 请求的响应类型，这就是为什么您必须声明响应类型的原因（正如您所做的那样 - 目前您将其声明为MarkdownData 类型）。 Typescript 在运行时无法对响应的实际类型做任何事情。

【讨论】：