Typescript允许使用错误的类型设置上下文属性

Question

我对react、react hooks和js/ts非常陌生。

目前，我正在编码一个简单的按钮，它通过useContext获取一个状态，并通过useReucer和调度函数更新该状态。

我试图将我所有的代码分离到特定的文件中。来自减速器的调度函数在提供程序中作为值传递。

当我在使用者组件中调用传递的函数时，我可以给它一个任何类型的值（在我的示例中是数字）给调度器。我在上下文、reducer等中设置了所有类型。VSCode告诉我它期望的类型-似乎都是正确的。它仍然允许任何类型的人通过。为什么呢？我试图安慰他。在传递值的所有点上进行日志记录，它似乎用类型编号覆盖类型，忽略我指定的类型。

//app-state.tsx:
export type AppState = {
  readonly FoldoutPosition: number | null,
  readonly FoldoutType: FoldoutType | null
}

enum FoldoutType {
  Projects,
  Connection
}

//app-context.tsx
import { createContext, Dispatch } from 'react'
import { AppState} from '../states/app-state'

type ContextState =
  { AppState: AppState } &
  { changeFoldoutPosition: Dispatch<AppState["FoldoutPosition"]> } &
  { changeFoldoutType: Dispatch<AppState["FoldoutType"]> }


  export default createContext<ContextState>({
    AppState: {
      FoldoutType: null,
      FoldoutPosition: 0
    },
    changeFoldoutPosition: () => { },
    changeFoldoutType: () => { }
  });

//reducer.tsx
import { AppState } from '../states/app-state'


type Action =
    | { readonly type: 'CHANGE_FOLDOUTPOSITION', readonly payload: AppState["FoldoutPosition"] }
    | { readonly type: 'CHANGE_FOLDOUTTYPE', readonly payload: AppState["FoldoutType"] };


export const reducer = (state: AppState, action: Action): AppState => {

    switch (action.type) {
        case 'CHANGE_FOLDOUTPOSITION':
            return { ...state, FoldoutPosition: action.payload };
        case 'CHANGE_FOLDOUTTYPE':
                return { ...state, FoldoutType: action.payload };
        default:
            return state
    }

}

//wrapper.tsx
import React, { useReducer } from 'react'
import { reducer } from '../reducers/reducer'

import AppContext from './app-context'
import {AppState} from '../states/app-state'

const AppWrapper = (props: any) => {

  const initalState = {
    FoldoutType: null,
    FoldoutPosition: 15
  }

  const [state, dispatch] = useReducer(reducer, initalState);

  const changeFoldoutPosition = (FoldoutPosition: AppState["FoldoutPosition"]) => {
    dispatch({type: 'CHANGE_FOLDOUTPOSITION', payload: FoldoutPosition});
  }

  const changeFoldoutType = (FoldoutType: AppState["FoldoutType"]) => {
    dispatch({type: 'CHANGE_FOLDOUTTYPE', payload: FoldoutType});
  }

  return (
    <AppContext.Provider  
      value={{
        AppState: state,
        changeFoldoutPosition: changeFoldoutPosition,
        changeFoldoutType: changeFoldoutType
      }}
    >
      {props.children}
    </AppContext.Provider>
  );
}

export default AppWrapper;

/// component:
import React, { useContext } from 'react'
import AppContext from '../contexts/app-context'

const TestComponent = (props: any) => {

    const context = useContext(AppContext);

    return (
        //{context.AppState.Foldout}
        <div>
            <button onClick={() => context.changeFoldoutPosition(10)}>
                1 - {context.AppState.FoldoutPosition} - {context.AppState.FoldoutType}
                </button>
            // The following button onClick should not work
            // Type should be restricted to <FoldoutType | null>
            <button onClick={() => context.changeFoldoutType(23)}>
                2 - {context.AppState.FoldoutPosition} - {context.AppState.FoldoutType}
                </button>
        </div>
    );
}

export default TestComponent 

Answer 1

这与React无关，这是一个纯类型脚本问题。TypeScript中的枚举具有自动递增功能，如果未指定，默认情况下会使用数字初始化键。

从文档中：

enum Direction {
    Up,
    Down,
    Left,
    Right,
}

在这里，Up的值为0，Down的值为1，等等。

这就是changeFoldoutType允许将整数作为参数传递的原因：TypeScript枚举允许它。

对于您的示例，您的TypeScript代码...

type AppState = {
  readonly FoldoutPosition: number | null,
  readonly FoldoutType: FoldoutType | null
}

enum FoldoutType {
  Projects,
  Connection
}

const testFn = (foldoutType: AppState["FoldoutType"]) => {
    console.log(foldoutType)
}

testFn(1)

console.log(FoldoutType)
// { 
//   "0": "Projects",
//   "1": "Connection",
//   "Projects": 0,
//   "Connection": 1
// }

...编译成类似的JavaScript，在那里你可以清楚地看到访问Enum键的数字：

var FoldoutType;

(function (FoldoutType) {
    FoldoutType[FoldoutType["Projects"] = 0] = "Projects";
    FoldoutType[FoldoutType["Connection"] = 1] = "Connection";
})(FoldoutType || (FoldoutType = {}));

const testFn = (foldoutType) => {
    console.log(foldoutType);
};

testFn(1);

console.log(FoldoutType);