我有这个界面:

export interface MutationSheetDefinition {
    _type: "mutation.sheet.definition"
    id: string
    name: string
    mutations: MutationDefinition[]
    referencedMutationSheets: MutationSheetReference[]
}

我想要这种类型:

interface ValidatedMutationSheetDefinition {
    name: ValidationOf<string>
    mutations: ValidationOf<MutationDefinition>[]
    referencedMutationSheets: ValidationOf<MutationSheetReference>[]
}

我知道我可以使用以下方法 Select 接口的一个子集:

type narrowed = Pick<MutationSheetDefinition, "name"| "mutations" | "referencedMutationSheets">

这会给我

interface {
    name: string
    mutations: MutationDefinition[]
    referencedMutationSheets: MutationSheetReference[]
}

但是我可以更改拾取的关键点的类型吗?

我会满足于为所有拾取的关键点使用固定类型,因此可以这样做:

interface {
    name: Validation
    mutations: Validation[]
    referencedMutationSheets: Validation[]
}

推荐答案

您可以这样做:

type PickAndChangeToValidationOf<T, P extends keyof T> = {
  [K in P]: T[K] extends (infer I)[] 
    ? ValidationOf<I>[]
    : ValidationOf<T[K]> 
}

我不确定您希望如何处理array.在您的示例中,您删除了[]并将其放在ValidationOf<T>之后.上面的类型也可以这样做,但仅适用于第一级array.如果希望双嵌套数组具有不同的行为,则应指定.

用法:

interface MutationSheetDefinition {
    _type: "mutation.sheet.definition"
    id: string
    name: string
    mutations: number[]
    referencedMutationSheets: number[]
}

type Narrowed = PickAndChangeToValidationOf<MutationSheetDefinition, "name"| "mutations" | "referencedMutationSheets">
// type Narrowed = {
//     name: ValidationOf<string>;
//     mutations: ValidationOf<number>[];
//     referencedMutationSheets: ValidationOf<number>[];
// }

Playground

Typescript相关问答推荐

类型订阅函数以确保回调仅从联合类型中接收正确的事件

如何获取嵌套对象属性的正确类型?

如何根据服务响应构建子路由

之间是否有区别:例如useEffect()React.useEffect()

如何使类型只能有来自另一个类型的键,但键可以有一个新值,新键应该抛出一个错误

TypeScript泛型参数抛出错误—?&#"' 39;预期"

如果一个变量不是never类型,我如何创建编译器错误?

如何在排版中正确键入中间件链和控制器链

Angular 行为:属性类型从SignalFunction更改为布尔

泛型类型,引用其具有不同类型的属性之一

如何在LucideAngular 添加自定义图标以及如何使用它们

获取一个TypeScrip对象,并将每个属性转换为独立对象的联合

Angular文件上传到Spring Boot失败,多部分边界拒绝

Vue3 Uncaught SyntaxError:每当我重新加载页面时,浏览器控制台中会出现无效或意外的令牌

在VSCode中显示eslint错误,但在终端中运行eslint命令时不显示?(Vite,React,TypeScript)

如何避免从引用<;字符串&>到引用<;字符串|未定义&>;的不安全赋值?

Angular NG8001错误.组件只能在一个页面上工作,而不是在她的页面上工作

在TypeScript中,如何通过一系列过滤器缩小类型?

在Vite中将SVG导入为ReactComponent-不明确的间接导出:ReactComponent

Svelte+EsBuild+Deno-未捕获类型错误:无法读取未定义的属性(读取';$$';)