javascript - 为什么 Typescript 在输入 Redux-saga 调用参数时会抛出错误 - TS2339

Question

使用 TS 时遇到 TS2339 键入错误，指出我找不到接口(interface)类型中定义的参数。以下是我有问题的两个文件:

api-service-saga.ts

• 行错误 const res = yield call(fetchAllBooks, action.param);
• 它提示 IBookAction 和 ILoadSearchableBooks 上不存在参数属性(来自 ../actions 的 IBookAction 类型)

import { takeEvery, call, put } from 'redux-saga/effects';
import { Action, IBookAction } from '../actions';
import { fetchAllBooks } from '../service/books-service';
import { Book } from '../classes';

export default function* watcherSaga() {
    yield takeEvery(Action.FETCH_SEARCHABLE_BOOKS, searchableBooksSaga);
}

function* searchableBooksSaga(action: IBookAction) {
    try {
        const res = yield call(fetchAllBooks, action.param);
        const searchableBooks = res.data.reduce((books: Array<Book>, b: any) => {
            books.push(new Book(b));
            return books;
        }, [])
        yield put({ type: Action.LOAD_SEARCHABLE_BOOKS, searchableBooks });
    } catch (e) {
        yield put({ type: Action.FETCH_ERROR, error: e});
    }

}

下面是我定义接口(interface)的文件:

../actions/index.ts

import { Action } from './action-constants';
import { Book } from '../classes';

export interface IAction {
    type: Action
}

// TODO: refactor into other action files if it gets too large.

// Nav Actions

export interface INavigateAction extends IAction {
    payload: string
}

export function navigateAction(newState: any): INavigateAction {
    console.log('Navigating to::', newState);
    return { type: Action.NAVIGATE_TO, payload: newState }
}

// Book Actions

export interface IFetchSearchableBookAction extends IAction {
    param: any // TODO: properly type the parameters.
}
export function fetchSerachableBooks(param: any): IBookAction {
    console.log('Fetching Searchable Books:', param);
    return { type: Action.FETCH_SEARCHABLE_BOOKS, param }
}

export interface ILoadSearchableBooks extends IAction {
    searchableBooks: Array<Book>
}

export { Action } from './action-constants';
export type IBookAction = IFetchSearchableBookAction | ILoadSearchableBooks;

如最后一行所示，我正在导出 IBookAction 类型，其中之一是具有 param 属性的 IFetchSearchableBookAction。

我收到的完整错误:

TS2339: Property 'param' does not exist on type 'IBookAction'.
Property 'param' does not exist on type 'IFetchSearchableBookAction'

Answer 1

因为IBookAction可以是IFetchSearchableBookAction或ILoadSearchableBooks，并且ILoadSearchableBooks没有param Prop 。这意味着，只能 50% 确定 action 具有 param prop，但不能 100%。

如果 action 是 ILoadSearchableBooks 而不是 IFetchSearchableBookAction，那么 param 可能会是 undefined.

解决方法是输入guard，让 Typescript 知道此 action 确实是 IFetchSearchableBookAction 而不是 ILoadSearchableBooks。

例如:

function searchableBooksSaga(action: ILoadSearchableBooks | IFetchSearchableBookAction) {
  if ('param' in action) {
    const param = action.param;
  } else {
    const books = action.searchableBooks;
  }
}

查看有关如何在 Typescript 中输入 Guard 的更多信息 here