作为类型的常量变量 - 打字稿

Question

在学习 Typescript 期间，当我使用常量变量和我用于 reducer 的 action 值时遇到问题（创建是为了防止打字错误 - 我在某处读到这是很好的做法）。

const INPUT_CHANGE: string = "INPUT_CHANGE";
const INPUT_BLUR: string = "INPUT_BLUR";

我还创建了类型来定义减速器操作：

type InputReducerAction =
  | { type: INPUT_CHANGE; value: string; isValid: boolean }
  | { type: INPUT_BLUR };

这是我的减速器：

const inputReducer = (state: InputReducerState, action: InputReducerAction) => {
  switch (action.type) {
    case INPUT_CHANGE:
      return {
        ...state,
        value: action.value,
        isValid: action.isValid,
      };
    case INPUT_BLUR:
      return {
        ...state,
        touched: true,
      };
    default:
      return state;
  }
};

当我有上面的所有想法时，INPUT_CHANGE 和 InputReducerAction 中的 INPUT_BLUR 被标记为错误：

'INPUT_CHANGE' refers to a value, but is being used as a type here. Did you mean 'typeof INPUT_CHANGE'?ts(2749)

'INPUT_BLUR' refers to a value, but is being used as a type here. Did you mean 'typeof INPUT_BLUR'?ts(2749)

当我为这个常量使用双引号时问题消失了，就像这样

type InputReducerAction =
  | { type: "INPUT_CHANGE"; value: string; isValid: boolean }
  | { type: "INPUT_BLUR" };

但是我的 const 变量现在没用了。我做错了什么或错过了什么？

在写这个问题的过程中，我想到了使用枚举：

enum INPUT_ACTION {
  INPUT_CHANGE = "INPUT_CHANGE",
  INPUT_BLUR = "INPUT_BLUR"
}

type InputReducerAction =
  | { type: INPUT_ACTION.INPUT_CHANGE; value: string; isValid: boolean }
  | { type: INPUT_ACTION.INPUT_BLUR };

const inputReducer = (state: InputReducerState, action: InputReducerAction) => {
  switch (action.type) {
    case INPUT_ACTION.INPUT_CHANGE:
      return {
        ...state,
        value: action.value,
        isValid: action.isValid,
      };
    case INPUT_ACTION.INPUT_BLUR:
      return {
        ...state,
        touched: true,
      };
    default:
      return state;
  }
};

并在减速器和类型中使用它。错误消失了，但这是个好主意还是我能以更好的方式做到这一点

Answer 1

您可以使用 const assertions after v3.4 来完成您所描述的事情。

const INPUT_CHANGE = "INPUT_CHANGE" as const;
const INPUT_BLUR = "INPUT_BLUR" as const;

type InputReducerAction =
  | { type: typeof INPUT_CHANGE; value: string; isValid: boolean }
  | { type: typeof INPUT_BLUR };

const changeAction: InputReducerAction = {
  type: INPUT_CHANGE, value: '', isValid: false
};

const blurAction: InputReducerAction = {
  type: INPUT_BLUR
};

问题是 JavaScript 变量只会在运行时赋值，而 TypeScript 需要在编译时知道它。使用 const 断言是一种通知编译器它们的值不应更改的方法。当您获取 typeof 变量时，使用文字值而不是通常分配给变量的通用 string 类型。

作为类型的常量变量 - 打字稿

Const variable as type - Typescript

typescript

react-native

types

constants

reducers