ChatGPT解决这个技术问题 Extra ChatGPT

覆盖 Typescript d.ts 文件中定义的接口属性类型

有没有办法更改打字稿中 *.d.ts 中定义的接口属性的类型?

例如:x.d.ts 中的接口定义为

interface A {
  property: number;
}

我想在我写入的打字稿文件中更改它

interface A {
  property: Object;
}

甚至这也行

interface B extends A {
  property: Object;
}

这种方法会奏效吗?当我在我的系统上尝试时,它不起作用。只是想确认它是否可能?


e
enomad

我使用一种方法,首先过滤字段,然后将它们组合起来。

参考Exclude property from type

interface A {
    x: string
}

export type B = Omit<A, 'x'> & { x: number };

对于接口:

interface A {
    x: string
}

interface B extends Omit<A, 'x'> {
  x: number
}

很高兴知道这一点。但问题是它仍然没有修改现有的。
这正是我想要的。这就是我期望 typescript extend 默认工作的方式,但是唉,这个小 Omit 解决了所有问题 🙌
扩展界面正是我想要的,谢谢!
注意:您需要上面的 typescript 3.5.3 才能使用它。
你还能在预期“A”的地方使用“B”吗?我有 2 种类型,“ModelShared”和“ModelServer”,以及一个字段 serverOnly。我希望仅服务器永远不会存在于 ModelShared 中,所以我使用 {serverOnly: never} =>这对于开发人员体验来说非常棒,他们可以立即知道该字段存在,但他们应该使用 ModelServer 代替。但是我仍然有很多需要通用 ModelShared 对象的函数。但是,所有列出的答案似乎都破坏了继承:如果您尝试传递 ModelServer,则会遇到问题,而这些类型实际上是相关的。我最终使用了 3 个接口。
Q
Qwerty
 type ModifiedType = Modify<OriginalType, {
  a: number;
  b: number;
}>
 
interface ModifiedInterface extends Modify<OriginalType, {
  a: number;
  b: number;
}> {}

ZSkycat's extends Omit 解决方案的启发,我想出了这个:

type Modify = Omit & R; // 在 typescript@3.5 之前 type Modify = Pick> & R

例子:

interface OriginalInterface {
  a: string;
  b: boolean;
  c: number;
}

type ModifiedType  = Modify<OriginalInterface , {
  a: number;
  b: number;
}>

// ModifiedType = { a: number; b: number; c: number; }

一步一步来:

type R0 = Omit<OriginalType, 'a' | 'b'>        // { c: number; }
type R1 = R0 & {a: number, b: number }         // { a: number; b: number; c: number; }

type T0 = Exclude<'a' | 'b' | 'c' , 'a' | 'b'> // 'c'
type T1 = Pick<OriginalType, T0>               // { c: number; }
type T2 = T1 & {a: number, b: number }         // { a: number; b: number; c: number; }

TypeScript Utility Types

v2.0 深度修改

interface Original {
  a: {
    b: string
    d: {
      e: string // <- will be changed
    }
  }
  f: number
}

interface Overrides {
  a: {
    d: {
      e: number
      f: number // <- new key
    }
  }
  b: {         // <- new key
    c: number
  }
}

type ModifiedType = ModifyDeep<Original, Overrides>
interface ModifiedInterface extends ModifyDeep<Original, Overrides> {}
// ModifiedType =
{
  a: {
    b: string
    d: {
      e: number
      f: number
    }
  }
  b: {
    c: number
  }
  f: number
}

找到 ModifyDeep below


菜鸟在这里,但你在你的例子中从一个接口变成了一个类型,不是吗?还是没有区别?
@Dominic好点,我已经更新了答案。两个同名的接口可以合并。 typescriptlang.org/docs/handbook/…
这应该成为 TS 功能
这里的 Modify 是什么?
@Donnovan这是一个自定义类型,再次浏览答案找到-> type Modify<T, R> = Omit<T, keyof R> & R;
H
Herb Caudill

您不能更改现有属性的类型。

您可以添加一个属性:

interface A {
    newProperty: any;
}

但是改变一种现有的类型:

interface A {
    property: any;
}

导致错误:

后续的变量声明必须具有相同的类型。变量“property”必须是“number”类型,但这里有“any”类型

您当然可以拥有自己的界面来扩展现有界面。在这种情况下,您可以仅将类型覆盖为兼容类型,例如:

interface A {
    x: string | number;
}

interface B extends A {
    x: number;
}

顺便说一句,您可能应该避免使用 Object 作为类型,而是使用类型 any

docs for the any type 中它指出:

any 类型是使用现有 JavaScript 的一种强大方式,允许您在编译期间逐渐选择加入和退出类型检查。您可能希望 Object 扮演类似的角色,就像它在其他语言中所做的那样。但是 Object 类型的变量只允许您为它们分配任何值 - 您不能对它们调用任意方法,即使是实际存在的方法:

let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed(); // okay, toFixed exists (but the compiler doesn't check)

let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.

M
Masih Jahangiri

像我这样懒惰的人的简短回答:

type Overrided = Omit<YourInterface, 'overrideField'> & { overrideField: <type> }; 
interface Overrided extends Omit<YourInterface, 'overrideField'> {
  overrideField: <type>
}

r
ryanjduffy

稍微扩展@zSkycat 的答案,您可以创建一个接受两种对象类型并返回合并类型的泛型,其中第二个的成员覆盖第一个的成员。

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

interface A {
    name: string;
    color?: string;
}

// redefine name to be string | number
type B = Merge<A, {
    name: string | number;
    favorite?: boolean;
}>;

let one: A = {
    name: 'asdf',
    color: 'blue'
};

// A can become B because the types are all compatible
let two: B = one;

let three: B = {
    name: 1
};

three.name = 'Bee';
three.favorite = true;
three.color = 'green';

// B cannot become A because the type of name (string | number) isn't compatible
// with A even though the value is a string
// Error: Type {...} is not assignable to type A
let four: A = three;

非常酷 :-) 我之前使用 Omit 使用一两个属性完成了此操作,但这更酷 :-) 我经常想“扩展”服务器实体类型并更改客户端上需要或可选的一些内容.
这应该是现在公认的解决方案。 “扩展”界面的最简洁方式。
J
JmJ

Omit 扩展接口时的属性:

interface A {
  a: number;
  b: number;
}

interface B extends Omit<A, 'a'> {
  a: boolean;
}

Q
Qwerty

我创建了这种类型,允许我轻松覆盖嵌套接口:

type ModifyDeep<A extends AnyObject, B extends DeepPartialAny<A>> = {
  [K in keyof A]: B[K] extends never
    ? A[K]
    : B[K] extends AnyObject
      ? ModifyDeep<A[K], B[K]>
      : B[K]
} & (A extends AnyObject ? Omit<B, keyof A> : A)

/** Makes each property optional and turns each leaf property into any, allowing for type overrides by narrowing any. */
type DeepPartialAny<T> = {
  [P in keyof T]?: T[P] extends AnyObject ? DeepPartialAny<T[P]> : any
}

type AnyObject = Record<string, any>

然后你可以像这样使用它:

interface Original {
  a: {
    b: string
    d: {
      e: string // <- will be changed
    }
  }
  f: number
}

interface Overrides {
  a: {
    d: {
      e: number
      f: number // <- new key
    }
  }
  b: {         // <- new key
    c: number
  }
}

type ModifiedType = ModifyDeep<Original, Overrides>
interface ModifiedInterface extends ModifyDeep<Original, Overrides> {}
// ModifiedType =
{
  a: {
    b: string
    d: {
      e: number
      f: number
    }
  }
  b: {
    c: number
  }
  f: number
}

找不到名称 Obj
我自己正在创建一个深度修改类型,如果没有您的 DeepPartialAny,我无法使其工作。否则我会收敛到与您基本相同的解决方案,因此我决定不在 my answer 中包含我的版本,而是更新和改进您的版本。
这真的很难遵循。你认为你可以让代码更冗长吗?
我能够获得此工作 like so 的不太强大(但可以容忍)的版本
A
Aidin

为了缩小属性的类型,简单的 extend 效果很好,如 Nitzan's answer

interface A {
    x: string | number;
}

interface B extends A {
    x: number;
}

要扩大或通常覆盖类型,您可以执行 Zskycat's solution

interface A {
    x: string
}

export type B = Omit<A, 'x'> & { x: number };

但是,如果您的接口 A 扩展了一个通用接口,那么在使用 Omit 时您将失去 A 剩余属性的自定义类型。

例如

interface A extends Record<string | number, number | string | boolean> {
    x: string;
    y: boolean;
}

export type B = Omit<A, 'x'> & { x: number };

let b: B = { x: 2, y: "hi" }; // no error on b.y! 

原因是,Omit 在内部只遍历 Exclude<keyof A, 'x'> 键,在我们的例子中这将是通用的 string | number。因此,B 将变为 {x: number; } 并接受任何类型为 number | string | boolean 的额外属性。

为了解决这个问题,我想出了一个不同的 OverrideProps 实用程序类型,如下所示:

type OverrideProps<M, N> = { [P in keyof M]: P extends keyof N ? N[P] : M[P] };

例子:

type OverrideProps<M, N> = { [P in keyof M]: P extends keyof N ? N[P] : M[P] };

interface A extends Record<string | number, number | string | boolean> {
    x: string;
    y: boolean;
}

export type B = OverrideProps<A, { x: number }>;

let b: B = { x: 2, y: "hi" }; // error: b.y should be boolean!

如果您将 & N 添加到您的 OverrideProps 类型,我认为它也将支持仅在 N 中的新道具。或者您可以合并键 P in keyof (M & N)
你能给我一个 TypeScript Playground 链接到你的意思吗,@charles-allen?
使用 & N 它允许覆盖类型缩小基础中尚未缩小的道具:typescriptlang.org/play?#code/…
知道了。正确的。随意编辑我的答案并添加此专业提示。谢谢! :)
E
Egor Malkevich

有趣的是,我花了一天时间调查解决同一案件的可能性。我发现不可能这样做:

// a.ts - module
export interface A {
    x: string | any;
}

// b.ts - module
import {A} from './a';

type SomeOtherType = {
  coolStuff: number
}

interface B extends A {
    x: SomeOtherType;
}

原因 模块可能不知道应用程序中的所有可用类型。从任何地方移植所有内容并编写这样的代码是非常无聊的。

export interface A {
    x: A | B | C | D ... Million Types Later
}

您必须稍后定义类型才能使自动完成功能正常工作。

所以你可以作弊一点:

// a.ts - module
export interface A {
    x: string;
}

在不需要覆盖时,默认保留 some 类型,允许自动完成工作。

然后

// b.ts - module
import {A} from './a';

type SomeOtherType = {
  coolStuff: number
}

// @ts-ignore
interface B extends A {
    x: SomeOtherType;
}

在此处使用 @ts-ignore 标志禁用愚蠢的异常,告诉我们我们做错了什么。有趣的是,一切都按预期进行。

就我而言,我正在缩小类型 x 的范围,它允许我执行更严格的代码。例如,您有 100 个属性的列表,然后将其减少到 10 个,以避免出现愚蠢的情况


y
yongming zhuang

日期:19/3/2021。我认为最新的 typescript(4.1.2) 版本支持 d.ts 文件中的 interface 覆盖。

// in test.d.ts

interface A {
  a: string
}

export interface B extends A {
  a: number
}

// in any ts file
import { B } from 'test.d.ts'

// this will work
const test: B = { a: 3 }

// this will not work
const test1: B = { a: "3" }


现在是20201了吗?哈哈。你说的是未来的我们。那里有飞行汽车吗?
哈哈哈,我想说是的,汽车在飞,人们在穿西装旅行。 :-) 感谢您指出错字!!!
我来自未来。它不起作用incorrectly extends interface
您的 ts 版本是什么?您是否在 d.ts 文件中声明了接口? @victorzadorozhnyy
@yongmingzhuang 4.2 我尝试在 tsx 中做到这一点
T
Toni

如果其他人需要通用实用程序类型来执行此操作,我想出了以下解决方案:

/**
 * Returns object T, but with T[K] overridden to type U.
 * @example
 * type MyObject = { a: number, b: string }
 * OverrideProperty<MyObject, "a", string> // returns { a: string, b: string }
 */
export type OverrideProperty<T, K extends keyof T, U> = Omit<T, K> & { [P in keyof Pick<T, K>]: U };

我需要这个,因为在我的情况下,覆盖的关键是泛型本身。

如果您没有准备好 Omit,请参阅 Exclude property from type


这正是我一直在寻找的,我非常感谢你 :D :D :D
@dwoodwardgb 很高兴它对其他人有用:-)
P
Phierru

如果您只想修改现有属性的类型而不删除它,那么 & 就足够了:

// Style that accepts both number and percent(string)
type BoxStyle = {
  height?: string | number,
  width?: string | number,
  padding?: string | number,
  borderRadius?: string | number,
}

// These are both valid
const box1: BoxStyle = {height: '20%', width: '20%', padding: 0, borderRadius: 5}
const box2: BoxStyle = {height: 85, width: 85, padding: 0, borderRadius: 5}

// Override height and width to be only numbers
type BoxStyleNumeric = BoxStyle & {
  height?: number,
  width?: number,
}

// This is still valid
const box3: BoxStyleNumeric = {height: 85, width: 85, padding: 0, borderRadius: 5}

// This is not valid anymore
const box4: BoxStyleNumeric = {height: '20%', width: '20%', padding: 0, borderRadius: 5}

c
cbdeveloper

注意:不确定在编写较旧的答案时我在此答案中使用的语法是否可用,但我认为这是解决此问题中提到的示例的更好方法。

我遇到了一些与此主题相关的问题(覆盖接口属性),这就是我处理它的方式:

首先创建一个通用接口,其中包含您想要使用的可能类型。

您甚至可以为通用参数选择一个 default 值,如 <T extends number | SOME_OBJECT = number> 中所示

type SOME_OBJECT = { foo: "bar" }

interface INTERFACE_A <T extends number | SOME_OBJECT = number> {
  property: T;
}

然后,您可以通过将值传递给泛型参数(或省略它并使用默认值)来基于该协定创建新类型:

type A_NUMBER = INTERFACE_A;                   // USES THE default = number TYPE. SAME AS INTERFACE_A<number>
type A_SOME_OBJECT = INTERFACE_A<SOME_OBJECT>  // MAKES { property: SOME_OBJECT }

这是结果:

const aNumber: A_NUMBER = {
    property: 111  // THIS EXPECTS A NUMBER
}

const anObject: A_SOME_OBJECT = {
    property: {   // THIS EXPECTS SOME_OBJECT
        foo: "bar"
    }
}

Typescript playground


T
Tobiju

扩展 Qwerty's 修改实用程序类型解决方案以将 R 的键限制为 T 中的键,并添加 IntelliSense

export type Modify<T, R extends Partial<Record<keyof T, any>>> = Omit<T, keyof R> & R;