在 Redux Toolkit 中，TypeScript 不会捕捉到错误的状态类型

Question

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface InfoState {
    name : string
    age : number
    email : string
}

const initialState = { name: '', age: 0, email: '' } as InfoState 

const userSlice = createSlice({
    name: 'user',   
    initialState: { value: initialState },
    reducers: {        
        login(state, action: PayloadAction<InfoState>) {
            console.log(typeof(action.payload.age));
            state.value = action.payload
        },
        logout(state) {
            state.value = { name: '', age: 0, email: ''  }
        },
    },
})

export const { login } = userSlice.actions
export const { logout } = userSlice.actions
export default userSlice.reducer

Redux Toolkit 中有一个 typescript 文件。

dispatch(login({ name: 123, age: "20", email: "email@gmail.com" }))

我在javascript

中发送了以下值

与TypeScript中设置的类型不同，只是状态发生了变化。我想知道为什么。

Answer 1

TypeScript 仅存在于您的编辑器中以告诉您哪里做错了。在您的浏览器中 - 或者 JavaScript 就此而言 - TypeScript 注释没有任何意义。 TypeScript 不会在运行时阻止你做一些愚蠢的事情，none 你的 TypeScript 注释不再存在于用户的浏览器中。

如果你想要 run-time-checking，你必须手写。这既不是 TypeScript 的工作，也不是 Redux-Toolkit 的工作。

在 Redux Toolkit 中，TypeScript 不会捕捉到错误的状态类型

In Redux Toolkit, TypeScript doesn't catch the wrong type of state

javascript

typescript

reactjs

redux-toolkit