类型 'IConnectionState' 不可分配给类型 '{ connected: false;类型：“无”； }'答案

【问题标题】：Type 'IConnectionState' is not assignable to type '{ connected: false; type: "none"; }'类型 'IConnectionState' 不可分配给类型 '{ connected: false;类型：“无”； }'
【发布时间】：2020-12-15 03:30:19
【问题描述】：

所以，我认为我的打字机 linter 短路了，因为我一生都无法弄清楚为什么这个 linting 错误不断出现。

Type 'IConnectionState' is not assignable to type '{ connected: false; type: "none"; }'

下面是我的代码，你可以清楚地看到，应该没有任何后果。


export interface IConnectionState {
    connected: boolean;
    type: 'none' | 'player' | 'host';
}

export const ConnectionState: RecoilState<IConnectionState> = atom({
    key: 'connectionState',
    default: {
        connected: false,
        type: 'none'
    }
});

如果有帮助，我正在使用反冲。但看看后坐力类型，RecoilState 应该类型采用赋予其选项对象的default 值的子类型。

我很迷茫。

【问题讨论】：

标签： reactjs typescript recoiljs

【解决方案1】：

我在更简单的界面上看到了类似的问题。

export const myState: RecoilState<boolean> = atom({
  key: 'myState',
  default: false,
});

// Type '<RecoilState<false>' is not assignable to type 'RecoilState<boolean>'.

我可以通过声明 default: false as boolean 来修复它，或者，可能更好的是，在方法调用中添加通用 <T>：

export const myState: RecoilState<boolean> = atom<boolean>({
  key: 'myState',
  default: false,
});

或者你可以完全省略类型声明，TypeScript 会自己解决。

【讨论】：

【解决方案2】：

实际上 linter 正在按预期工作。您将ConnectionState 的类型设置为IConnectionState，但您从未在界面中包含属性key。

接口IConnectionState 是正确的，但它应该嵌套在另一个接口中。

const NONE = 'none';
const PLAYER = 'player';
const HOST = 'host';
const CONNECTIONSTATE = "connectionState";

type TType = typeof NONE | typeof PLAYER | typeof HOST;

interface IConnectionStateDefault {
    connected: boolean;
    type: TType
}

interface IConnectionState {
    key: typeof CONNECTIONSTATE,
    default: IConnectionStateDefault
}


export const ConnectionState: RecoilState<IConnectionState> = atom({
    key: "connectionState",
    default: {
        connected: false,
        type: 'none'
    }
});

如果IConnectionState 有更多key 值，那么只需像我对TType 所做的那样，在key 可以存在的可能类型上形成一个联合。

【讨论】：

【解决方案3】：

这就是我在 monorepo 中一直在做的事情。
为 ALL 键创建一个全局文件，以尽量保持您不希望任何冲突的意识，因为有一个 Recoil 注册表。

export enum GlobalRecoilKeyEnum {
     ATOM_SOME_BOOLEAN_KEY= "ATOM_SOME_BOOLEAN_KEY",
}

创建一个原子的区域文件（Nx 允许我通过 linting 隔离访问。）

export const SomeBooleanAtom = atom({
    key: GlobalRecoilKeyEnum.ATOM_SOME_BOOLEAN_KEY,
    default: false
});

我在功能组件中的访问方式。

const isSomeBoolean: boolean = useRecoilValue<boolean>(SomeBooleanAtom);
const setSomeBoolean: SetterOrUpdater<boolean> = useSetRecoilState<boolean>(SomeBooleanAtom);
const [isPractice, setSomeBoolean]: [boolean, SetterOrUpdater<boolean>] = useRecoilValue<boolean>(SomeBooleanAtom);

【讨论】：