Question

我是React和Redux的新手，我正在使用Typescript进行一个小项目。我创建了第一个化简器和动作，但是有一个问题：每当我尝试访问有效内容时，我都会得到一个Type error: property X does not exist in type。

动作：

import { Action } from 'redux';
export const LOGIN_ACTION = 'login';
export const LOGIN_SUCCESS_ACTION = 'login-sucesss';
export const LOGIN_FAILED_ACTION = 'login-failed';

export interface LoginAction extends Action {
  type: string;
  payload: {
    username: string;
    password: string;
  };
}

export function login(username: string, password: string): LoginAction {
  return {
    type: LOGIN_ACTION,
    payload: { username, password },
  };
}

export interface LoginSuccessAction extends Action {
  type: string;
  payload: {
    loginToken: string;
  };
}

export function loginSuccess(loginToken: string): LoginSuccessAction {
  return {
    type: LOGIN_SUCCESS_ACTION,
    payload: { loginToken },
  };
}

export interface LoginFailedAction extends Action {
  type: string;
  payload: {
    error: Error;
  };
}

export function loginFailed(error: Error): LoginFailedAction {
  return {
    type: LOGIN_FAILED_ACTION,
    payload: { error },
  };
}

export type LoginActions = LoginAction | LoginSuccessAction | LoginFailedAction;

减速器：

import { LOGIN_ACTION, LOGIN_FAILED_ACTION, LOGIN_SUCCESS_ACTION, LoginActions } from '../../actions/login.action';
import {
  REQ_STATUS_FAIL,
  REQ_STATUS_PROCESSING,
  REQ_STATUS_SUCCESS,
  REQ_STATUS_UNDEFINED,
} from '../../common/request-status';

export interface LoginState {
  username: string;
  password: string;
  loginToken: string;
  loginError?: Error;
  status?: number;
}

export const initialState: LoginState = {
  username: '',
  password: '',
  loginToken: '',
  loginError: undefined,
  status: REQ_STATUS_UNDEFINED,
};

export function loginReducer(state: LoginState = initialState, action: LoginActions): LoginState {
  switch (action.type) {
    case LOGIN_ACTION:
      console.log('I was here', action.payload);
      return { ...state, username: action.payload.username, password: action.payload.password, status: REQ_STATUS_PROCESSING };

    case LOGIN_SUCCESS_ACTION:
      return { ...state, loginToken: action.payload.loginToken, status: REQ_STATUS_SUCCESS };

    case LOGIN_FAILED_ACTION:
      return { ...state, loginToken: '', loginError: action.payload.error, status: REQ_STATUS_FAIL };

    default:
      return state;
  }
}

问题是访问有效负载的属性时遇到很多类型错误，例如：action.payload.username或action.payload.password。

Property 'username' does not exist on type '{ username: string; password: string; } | { loginToken: string; } | { error: Error; }'.
Property 'username' does not exist on type '{ loginToken: string; }'

Property 'password' does not exist on type '{ username: string; password: string; } | { loginToken: string; } | { error: Error; }'.
Property 'password' does not exist on type '{ loginToken: string; }'.

你能帮我吗？

Answer 1

您正在尝试在打字稿中使用区分的联合。区分联合使用switch语句来根据给定的属性（在您的情况下为type）缩小每个分支的类型。区分联合的要求是type属性必须是文字类型（在您的情况下是字符串文字类型）。由于您为操作的类型定义了常量，因此可以使用typeof constant来获取为常量推断的字符串文字类型。

interface Action { } // Dummy for self contained sample
export const LOGIN_ACTION = 'login';
export const LOGIN_SUCCESS_ACTION = 'login-sucesss';
export const LOGIN_FAILED_ACTION = 'login-failed';

export interface LoginAction extends Action {
  type: typeof LOGIN_ACTION; // !! here we assign the string literal type of the constant
  payload: {
    username: string;
    password: string;
  };
}

export function login(username: string, password: string): LoginAction {
  return {
    type: LOGIN_ACTION,
    payload: { username, password },
  };
}

export interface LoginSuccessAction extends Action {
  type: typeof LOGIN_SUCCESS_ACTION; // !! here we assign the string literal type of the constant
  payload: {
    loginToken: string;
  };
}

export function loginSuccess(loginToken: string): LoginSuccessAction {
  return {
    type: LOGIN_SUCCESS_ACTION,
    payload: { loginToken },
  };
}

export interface LoginFailedAction extends Action {
  type: typeof LOGIN_FAILED_ACTION; // !! here we assign the string literal type of the constant
  payload: {
    error: Error;
  };
}

export function loginFailed(error: Error): LoginFailedAction {
  return {
    type: LOGIN_FAILED_ACTION,
    payload: { error },
  };
}

export type LoginActions = LoginAction | LoginSuccessAction | LoginFailedAction;


export interface LoginState {
  username: string;
  password: string;
  loginToken: string;
  loginError?: Error;
  status?: number;
}

export const initialState: LoginState = {
  username: '',
  password: '',
  loginToken: '',
  loginError: undefined,
  status: 0,
};

export function loginReducer(state: LoginState = initialState, action: LoginActions): LoginState {
  // Type guard fro discriminated union.
  switch (action.type) {
    case LOGIN_ACTION:
      console.log('I was here', action.payload);
      // action is LoginAction here
      return { ...state, username: action.payload.username, password: action.payload.password, status: 0};

    case LOGIN_SUCCESS_ACTION:
      // action is LoginSuccessAction here
      return { ...state, loginToken: action.payload.loginToken, status: 1 };

    case LOGIN_FAILED_ACTION:
      // action is LoginFailedAction here 
      return { ...state, loginToken: '', loginError: action.payload.error, status: -1 };

    default:
      return state;
  }
}

在Typescript Reac + Redux中具有联合类型的类型错误中，属性不存在

1 个答案: