Question

我对TS来说还很陌生，写了一个选取函数，但是发现很难从一个交叉点类型中选取：

type PaletteType = {
   black: string,
   white: string
}

type ColorType = {
   primaryColor: string,
   labelText: string,
}

type Props = {
   ...,
   backgroundColor: keyof ColorType | keyof PaletteType // (or would keyof (ColorType & PaletteType) would be better?
}

// Some general pick funtion
function pick<T extends { [key: string]: any }, K extends keyof T>(object: T, key?: K) {
    if (key) { return object[key] }
    return undefined
}

pick(Colors, props.backgroundColor) // error -> black | white not assignable to Colors

我很确定我的“解决方案”有点错误：

backgroundColor: pick(Palette as typeof Palette & typeof Color, props.bg) || pick(Color as typeof Palette & typeof Color, props.bg),

Answer 1

添加以下声明以使代码编译：

declare const Colors: ColorType;
declare const Palette: PaletteType;
declare const props: Props;

为了使您对pick()的调用安全，可以通过对象传播之类的方法合并Colors和Palette：

pick({ ...Colors, ...Palette }, props.backgroundColor); // okay

之所以可行，是因为看到{...Colors, ...Palette}的类型为ColorType & PaletteType，其键为keyof ColorType | keyof PaletteType。

或者，您可以在呼叫props.backgroundColor之前使user-defined type guard缩小keyof ColorType到keyof PaletteType或pick()：

const hasKey = <T extends object>(obj: T, key: keyof any): key is keyof T => key in obj;

hasKey(Colors, props.backgroundColor) ? 
  pick(Colors, props.backgroundColor) : 
  pick(Palette, props.backgroundColor); // okay

前者可能更整洁。

顺便说一句，我不确定pick(o,k)会以o[k]的价格购买您，但是我想这取决于您。

希望有所帮助；祝你好运！

从路口类型选择？（TS）

1 个答案:

从路口类型选择？ （TS）

1 个答案:

从路口类型选择？（TS）