Typescript组合接口，访问特定属性，通过特定属性的值构造新类型
Typescript组合接口是一种使用接口的方式来定义新类型的方法。它可以通过组合多个接口，以及访问和操作特定属性的值，构造出具有特定属性和方法的新类型。
在Typescript中，接口（Interface）用于定义对象的结构和行为。组合接口即通过将多个接口合并成一个新接口，来创建一个包含了所有属性和方法的复合类型。
下面是一个示例：
interface A {
name: string;
}
interface B {
age: number;
}
interface C extends A, B {
gender: string;
}
const person: C = {
name: "John",
age: 25,
gender: "Male"
};在上述示例中，我们定义了接口A和接口B，分别包含了name和age属性。然后，通过关键字extends，我们将A和B接口合并为一个新接口C，并添加了gender属性。最后，我们使用C类型来创建一个person对象，该对象包含了所有A、B和C接口中定义的属性。
通过组合接口，我们可以根据特定属性的值来构造新类型。例如，如果我们需要创建一个只包含name为字符串的对象，可以使用如下方式：
type NameOnly = Extract<C, { name: string }>;
const personWithName: NameOnly = {
name: "John"
};在上述示例中，我们使用Extract类型来从C类型中提取满足{name: string}条件的属性，然后定义一个新类型NameOnly来表示只包含name属性的对象。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
5回答
在C#中，接口和类之间有很大的区别。实际上，一个类代表一个引用类型，因此我们实际上可以创建基于该类建模的对象，而接口则是类签名的契约，以确保某种行为的存在。特别是，我们不能创建接口实例。
接口的全部要点是公开行为。类通过给出所述行为的一个显式实现来实现它。
在这种情况下，虽然接口可能包含属性，但由于行为问题，大多数时候我们都关心接口。因此，大多数类型的接口只是行为契约。
另一方面，在TypeScript上，我似乎有些事情让我感到非常不安，事实上，我不止一次看到这个问题，这也是我提出这个问题的原因。
在一篇教程中，我看到了这一点：
export interface User {
name
浏览 7提问于2016-11-14得票数 26
用另一种方式表达
如何在windowState中键入TypeScript DOM属性？
解决了(在TypeScript 2中)
declare var windowState: WindowState
const enum WindowState {
STATE_MAXIMIZED = 1,
STATE_MINIMIZED = 2,
STATE_NORMAL = 3,
STATE_FULLSCREEN = 4
}
...
var windowState = 5 // Type Error, as expected!
原始问题
如何在declare中使用type来描述代数数据类型
浏览 6提问于2015-11-25得票数 14
回答已采纳
3回答
我对TypeScript中的接口是如何工作的感到困惑。
下面是一段代码：
interface test1 {
}
class test2 implements test1
{
public foo;
}
let test: test1 = new test2();
test.foo = 'test';
它不会编译并给出错误“属性foo在test1类型上不存在”，这是否意味着当您在TypeScript中实现接口时，您只能使用接口中声明的属性和方法？
我很困惑，因为我习惯了PHP，这不会在PHP中造成任何错误。
浏览 0提问于2019-02-28得票数 0
回答已采纳
3回答
我试图思考为什么TypeScript报告我的病情总是错误的，因为在这种情况下，Action.UP | Action.DOWN和Action.LEFT之间没有类型重叠( )
class Component<S> {
public state: S;
public render() {}
}
enum Action {
UP,
DOWN,
LEFT,
RIGHT,
}
interface State {
action: Action;
}
const initialAction: Action.UP | Action.DOW
浏览 0提问于2019-01-30得票数 5
回答已采纳
接口用作合同的蓝图。然而，在TypeScript中，您有这种奇怪的语法(实际上在接口中有一个新的())。这是某种工厂吗？
interface IControllerDetails {
controller : { new(...args:string[]): void ;};
}
是用来读书的。
浏览 0提问于2015-11-05得票数 0
回答已采纳
1回答
假设我有以下TypeScript代码：
export const makeMyClass = function(a: string, b: boolean){
const MyClass = function(){
};
MyClass.prototype.foo = function(){};
MyClass.prototype.bar = function(){};
return MyClass;
}
我在弄清楚如何将导出的工厂函数中的代码转换为TypeScript时遇到了麻烦。
例如，如果我这样做：
export const makeMyCla
浏览 0提问于2017-09-23得票数 0
2回答
我正在尝试使用select2和TypeScript (2.1)从单击事件中获取选定的值。我以为例
但是，在TypeScript中，我总是得到以下错误：
符号'params‘无法正确解析，可能位于不可访问的模块中。
当尝试访问evt.params时。
我的职能：
// bind to the select-event
$theElement.on("select2:select", (evt: Event) => {
if (!evt) {
var args = "{}";
} else {
v
浏览 2提问于2017-03-06得票数 0
我想从对象中删除所有没有在特定类型接口中声明的属性。
例如，让我们假设我有以下接口：
export interface CreateCustomerUserInput {
fullname: string;
email: string;
}
我有以下目标：
let obj = {fullname: 'AAA', email: 'aa@aa.com', phone: '111', address: 'XXX'};
但是我想要创建一个新的对象，只在类型接口中声明属性。以下是预期的对象：
let c = {fullnam
浏览 2提问于2018-07-03得票数 13
Typescript 3.0.1在我的类中为我的setter提供了一个编译错误，但当我运行我的JS时，它仍然可以正常工作，正如你在图片上看到的那样。
代码如下所示：
这有什么原因吗？我怎么才能让它编译的时候没有错误，因为它让我在学习Typescript时感到困惑。
浏览 0提问于2018-10-17得票数 0
非常标准的用例是创建一个空对象并用必要的数据填充它。在填充过程结束时，对象将包含它所需的所有属性，但是当它被创建时，它没有任何属性，因此TypeScript不允许我用正确的类型键入这个新对象。
示例：
interface ISomeType {
x: string;
y: string;
}
function buildObj(): ISomeType {
const obj: ISomeType = {}; // TS Error: {} doesn't include x and y
obj.x = foo();
obj.y = bar(); // At th
浏览 2提问于2020-04-08得票数 3
回答已采纳
1回答
ES5没有Promise，请参见示例。但是，ES5的TypeScript库包含Promise定义：。为什么？
浏览 0提问于2020-05-20得票数 1
当我在其他组件中使用状态时，TypeScript似乎没有认识到属性state.recipes确实存在，如果YummlyState是RecipesState的类型，情况就是如此。我怀疑YummlyState始终是InitialState的类型，因为这是它最初将拥有的类型，因为初始状态正在被设置。
另外，你是否还注意到了其他你认为应该不同的内容？
非常感谢！
import React, {
createContext,
Dispatch,
PropsWithChildren,
ReactElement,
Reducer,
useContext,
浏览 0提问于2020-11-11得票数 0
回答已采纳
假设我有以下组件
class MyComponent extends
React.Component<IProps, IState> implements MyInterface {...}
现在我想说的是，一些变量是一个instance React.Component 的，它有 IProps, IState 和 implements MyInterface**，，类似于**
myComponent: Component<IProps, IState> implements MyInterface，但这行不通，我也不知道为什么。
有人能澄清吗？我刚从TypeScrip
浏览 2提问于2017-05-29得票数 9
回答已采纳
如果我有一个类，比如：
export interface Results {
xrf: any;
ftir: any;
level: any;
}
export class myClass{
Results: Results;
remark: string;
}
和一个JSON对象，如：
{
"Results": {
"xrf" : "xrfresult",
"level": "21"
},
"remark" : "Test 1"
}
浏览 5提问于2017-11-12得票数 1
export function blah<T extends { [key: string]: number[] }>(b: T, p: string) {
b[p].push(3); // valid typescript
b[p] = []; // ts(2536) Type 'string' cannot be used to index type 'T'.
}
文档中是否有涵盖此行为的部分内容，以便我能更好地理解它？
浏览 1提问于2020-05-19得票数 1
我是typescript的新手，我想知道typescript中可选属性类的实用程序是什么？它们之间的区别是什么：
a?: number;
a: number | undefined;
浏览 3提问于2017-12-22得票数 59
回答已采纳
2回答
我有MyClass<T>
var Myobj = authorObject.getType();
如何从MyClass var实例化Myobj对象
我测试了这段代码，但它不起作用
var x = new MyClass<Myobj>();
浏览 7提问于2013-12-04得票数 1
回答已采纳
我目前正在学习TypeScript和角2框架。我阅读了data关于类和接口的一些文章(和TypeScript )，并进一步了解了关于数据驱动表单和表单控制定义(、和)的一些讨论。
举个例子，我正在尝试提交一份用户注册的注册表格。所需经费如下：
需要一个用户对象作为一个可观察的客户端，并需要另外3个字段来注册到后端。
注册是多步骤的，并且发生在多个模板上。因此，当new User因此我认为我需要可选的运算符或基本对象为空(以避免TypeScript错误时，应用程序编译)
我想为某些字段设置选项(即性别是“男性”或“女性”)，类似于丹在Auto in 的构造函数中设置的方式。我知道我可
浏览 3提问于2016-05-27得票数 0
我在vue prototype中声明了$bus来访问全局，但是得到了这个错误
Property `prototype` does not exist on type vue.
可以帮助我如何使用typescript进行声明吗？Vue版本为3。
浏览 50提问于2021-05-31得票数 0
4回答
我知道如何扩展TypeScript接口，但这里我要问的是如何覆盖接口中的一个特定键--重写。例如，假设我有一个简单的接口A
interface A {
foo: string;
bar: number;
}
我还有另一个简单的接口B，也有一个bar键，但类型不同：
interface B {
bar: string;
baz: number;
}
本质上，我想将这些接口合并为一个，给出以下接口：
interface C {
foo: string; // from A.foo
bar: string; // from B.bar (overrid
浏览 2提问于2017-03-05得票数 5
回答已采纳
1回答
可能重复：
为什么我可以在接口中使用属性而不能使用字段？我不明白后端会有什么不同(当然更像一种方法，但为什么这很重要)或任何将字段排除在接口之外的推理。
浏览 4提问于2011-04-24得票数 0
回答已采纳
1回答
我是一名java开发者，正在为Typescript而苦苦挣扎。我有一个名为Shape的抽象类和两个继承它的具体类: Square和Circle。我还想对这些类隐藏构造函数，并创建一个工厂方法getNewShape，它将根据参数决定使用哪个具体的构造函数。在java中，我会简单地写(在形状上)：
public static <T extends Shape> T getNewShape(T reference){
// my logic
reference = T.class.getInstance();
return reference;
}
在Typesc
浏览 0提问于2019-05-16得票数 0
我认为Interface很少同时具有匿名和命名功能。是这样的吗？
TypeScript编译器允许接口同时具有匿名函数和命名函数。
// no error
interface Foo {
(x: number, y: number): number; // anonymous
namedMethod: (z: string, w: string) => string; // named
}
但它似乎无法实现。
// badProp is not assignable
const foo1 : Foo = {
badProp(x: number, y: number) { ret
浏览 1提问于2016-12-11得票数 7
回答已采纳
我有两个接口，A和B。B是A的扩展
interface A {
foo: string;
}
interface B extends A {
bar: string;
}
此外，我还有一个对象a，它具有A接口：
const a: A = {
foo: "fooValue"
}
我需要构建一个函数，它创建一个带有接口B的新对象，它基于带有接口A的输入并添加一个默认值。
我创造了一个：
function AtoB(a: A): B {
return {
...a,
bar: "defaultBarValue&
浏览 0提问于2019-09-05得票数 0
回答已采纳
以下代码在TypeScript中不正确。比较器不喜欢数组的类型。“键入‘type not’不能指定键入‘BaseDetailComponent'”。如果子类没有用新参数重载构造函数，它就会工作。类型"Array“似乎是执行静态方法"say”所必需的。
export class BaseDetailComponent {
constructor() {}
static say(){}
}
export class FolderDetailMainComponent extends BaseDetailComponent {
construct
浏览 5提问于2020-07-06得票数 2
回答已采纳
当您使用一个接口创建一个自定义数组类型并给它一个字段length: number时，TypeScript似乎以某种方式计算了数组的长度，但是如果您将该字段排除在自定义类型定义之外，它就不再工作了。
背景到底是怎么回事？
我的代码是：
interface IPerson {
fullName: string;
age: number;
}
class Person implements IPerson {
fullName: string;
age: number;
constructor(fullName: string, age: number)
浏览 1提问于2016-10-28得票数 2
回答已采纳
这是简化的代码
export interface MyInterface{
// Have no idea why I need an export here.
// If I remove it, it gives
// semantic error TS2451 Cannot redeclare block-scoped variable 'createClass'
}
const createClass = function () {
return class implements MyInterface{
}
};
const
浏览 1提问于2018-12-18得票数 2
回答已采纳
这里有关于TypeScript中抽象构造函数类型的问答，我想知道以下问题的答案：
不幸的是，公认的答案只不过是一个无法解释的一行：type Constructor<T> = Function & { prototype: T }。
看来这个答案对提问者来说已经足够好了，它是公认的答案，但我无法理解答案是如何适用于这个问题的。
我试着在评论中询问，我也试着让聊天中的人解释答案，但没有结果。而且，我认识到，这只是一个与那个问题几乎不同的问题，但这仍然是一个关于代码的独特问题。
如何使用Function & { prototype: T }类型来模拟已知构造函数类型的抽
浏览 2提问于2018-09-15得票数 6
回答已采纳
我试图将此包转换为TypeScript，而不会发生任何破坏性的更改。我在TypeScript中有以下代码。
// DocumentCarrier.ts
/* export */ class DocumentCarrier {
internalObject: {};
model: Model;
save: (this: DocumentCarrier) => void;
constructor(model: Model, object: {}) {
this.internalObject = object;
this.mod
浏览 2提问于2020-04-11得票数 0
我在客户端使用TypeScript，当我运行应用程序时，有两个错误显示如下：
@typescript-eslint/no-unsafe-assignment: Unsafe assignment of an `any` value.
@typescript-eslint/no-unsafe-member-access: Unsafe member access .value on an `any` value.
这是我的代码：
const userInfo = ref({} as UserInfo) // first error
$f.axios
.get<UserInfo&
浏览 5提问于2022-02-23得票数 0
我在Typescript中使用Backbone.Marionette。我写了我自己的类型描述的木偶。
var ProviderSpa = new Backbone.Marionette.Application();
ProviderSpa.addRegions({
'servicesRegion': "#services-offered"
});
ProviderSpa.servicesRegion.show();
我的问题是，addRegions有向ProviderSpa添加属性的副作用，而TypeScript并不知道这一点，因此它会报告‘属性'
浏览 0提问于2012-10-26得票数 8
下面是一些打字脚本： let markdown = <HTMLTextAreaElement>document.getElementById(id);
let markdownoutput = <HTMLLabelElement>document.getElementById(output); 在上面的代码中，在使用element by id选择某些东西之前，我们声明了元素类型param.(<HTMLTextAreaElement>)它工作得很好。但是我们从中得到的好处是什么呢？ 有人能帮我吗? typescript是如何处理这个问题并帮助我们的呢？ 提前
浏览 29提问于2020-01-26得票数 0
回答已采纳
2回答
所以我创建了一个类
public static class SharedDataAnnotations
{
/// <summary>
/// Matches letters, digits, dashes, underscores and spaces.
/// </summary>
public static RegularExpressionAttribute DisplayNameProperCharacters =
new RegularExpressionAttribute(@"^[A-Za-z0-9\
浏览 2提问于2017-02-21得票数 1
回答已采纳
1回答
如何克隆CDK资源？
、、、
假设我在TypeScript中使用AWS。是否有一种方法可以定义一个函数，该函数将资源作为参数，并使用经过调整的参数创建克隆？
或者，CDK构造是否允许提取它们的所有属性，以便我可以在一个新的构造函数中使用它们？
也许有一个TypeScript技巧可以实现这一点？我对语言不太熟悉。
更具体地说，我想用IAM角色来做这件事。
(以下是非常伪码-y)
const role = new iam.Role(this, 'CloudWatchLogsLoggingRole', {
...
});
makeRoleVariant(role)
makeRoleVariant(ro
浏览 5提问于2022-02-08得票数 1
关于TypeScript {}类型的问题--到目前为止，我认为它意味着“空对象没有属性”类型，但最近我偶然发现了禁止使用{}类型的eslint规则，因为它意味着“任何非空值”。打字稿操场上的快速测试表明这是真的：
let d: {} = {};
d = false;
这段代码没有给出编译器错误，但是当我试图将null赋值给d时，确实存在一个错误。所以我的问题是：
{}在TypeScript中到底是什么类型？它真的代表“任何非零值”(在TypeScript文档中找不到确认)吗？
我应该如何实际键入“没有任何属性的空对象”？
浏览 6提问于2020-06-15得票数 7
回答已采纳
我有一段TypeScript代码，我很难理解。我对TypeScript相当陌生。
export const TerminalWidgetOptions = Symbol("TerminalWidgetOptions");
export interface TerminalWidgetOptions {
endpoint: Endpoint.Options,
id: string,
caption: string,
label: string
destroyTermOnClose: boolean
}
有人能告诉我上面的代码到底发生了什么吗
浏览 0提问于2018-04-12得票数 16
回答已采纳
我有一个脚本从不同的数据源提取，这取决于用户输入的一般界面和每个数据源的类型。然后，每个数据源都有一个方法来获取该特定源的元数据。我正在努力理解的input实现，以根据输入切换类型。
这个例子没有编译，但是它最能说明我想要做的事情：
type Post interface {
GetMetadata() bool
}
type YouTubeVideo struct {
ID string
Title string
ChannelID string
ChannelTitle string
PublishedAt st
浏览 2提问于2015-04-07得票数 0
回答已采纳
我已经用TypeScript写了大约一年了，我遇到了一个很好的用锈蚀写的关于Github的项目，我想用TypeScript来包装。我从来没有用铁锈编程，但我确实有C++方面的经验。我相信标题中的问题已经很清楚了。Rust中的结构是否类似于TypeScript中的接口？
浏览 4提问于2022-07-08得票数 0
回答已采纳
我在高级类型部分看到了TypeScript手册，它有这样的代码：
interface Dictionary<T> {
[key: string]: T;
}
let keys: keyof Dictionary<number>; // string | number
let value: Dictionary<number>['foo']; // number
如果只声明索引为string，我就无法理解['foo']
嗯，我发现'foo‘肯定不会限制var必须是字典的key 'foo’的值，并且下面的语
浏览 18提问于2019-10-31得票数 0
回答已采纳
我有一个模块，其中一个公共类的公共方法创建并返回一个私有类的新实例。要求MyClassPrivateHelper只能由MyClass实例化。
class MyClassPrivateHelper {
constructor(private cls: MyClass) {
}
public someHelperMethod(arg): void {
this.cls.someMethod();
}
}
export class MyClass {
public createHelper(): MyClassPrivateHelper {
浏览 0提问于2018-03-20得票数 11
当我查看时，我看到它使用了交集类型，但这种行为与我所期望的不一样。
我希望使用Object.assign将一些更改与旧对象合并，以创建一个新对象(在遵循不变的数据模式时，这是JS中的常见做法)，并让TypeScript验证部件和结果是否正确，但似乎TypeScript允许通过任何操作而不会出错。
例如：
interface Thing {
name: string;
age: number;
fav: boolean;
}
let oldThing: Thing = {
name: "Aaa",
age: 123,
fav: f
浏览 3提问于2016-10-06得票数 8
回答已采纳
假设我有一个Typescript接口，如下所示 export interface IMyObj {
id: string;
type: 'AA' | 'AZ' | 'XY';
...
} 现在，我需要另一个接口，该接口也具有该type字段 export interface IMyOtherObj {
...
type: 'AA' | 'AZ' | 'XY';
...
} 如您所见，我复制了type的值。所以我的问题是，如何在我的IMyOtherObj
浏览 51提问于2020-03-24得票数 1
回答已采纳
1回答
我有一个使用Typescript的Vuejs (3)项目。在使用$refs时，我尽量避免依赖any类型 const el = (this.$refs['target'] as any).$el 它会触发以下警告： warning Unexpected any. Specify a different type @typescript-eslint/no-explicit-any 你知道我可以使用什么类型而不是任何类型吗？ 编辑:我不想禁用我的eslint规则:)
浏览 23提问于2021-11-10得票数 2
回答已采纳
1回答
类装饰器(实例级)
、、、
我试图在属性上添加一个类decorator，并在instance中修改这个属性。
这在typescript中很好，但是我不想使用typescript，只使用babel，而不使用任何其他编译器。
我的猜测是，target在el函数中是class而不是instance，而在使用typescript时并非如此。
如果有人知道如何使用babel和不使用typescript来完成这项工作
带类型记录的演示：
仅限babel演示：
function el(type) {
return function descriptor(target, key,dec) {
let value = tar
浏览 6提问于2017-12-23得票数 1
回答已采纳
我想要有这样的功能：
createEntity<TEntity>(): TEntity {
return new TEntity();
}
在C#中，我们可以写：
void TEntity CreateEntity<TEntity>() where TEntity : new()
我如何在TypeScript中做到这一点？
浏览 6提问于2016-01-09得票数 18
回答已采纳
我想定义一个带参数的函数，它是一个构造函数。在函数中，我想访问构造函数的name属性。是否可以使用TypeScript创建此类型约束？
function doSomethingWithAConstructor(ctor: { new (); name: string }): string {
return ctor.name;
}
更新：
预期用法为：
class A {}
doSomethingWithAConstructor(A);
浏览 2提问于2014-10-22得票数 0
1回答
interface方法的访问修饰符是什么？它应该是public或protected，因为您在实现它们时可以访问它们(这是有意义的)。它也应该是abstract，因为它们没有实现。但最近我读了一本书，名为“通过C#进行CLR”，关于接口的章节如下
CLR要求将interface方法标记为virtual。如果没有在源代码中显式地将该方法标记为virtual，编译器将该方法标记为virtual和sealed。
当您标记interface成员时，virtual编译器会抱怨访问修饰符无效。我的意思是，在interface中，没有任何访问修饰符是有效的，而不是编译器给它们的默认修饰符，对吗？有人能
浏览 4提问于2013-07-11得票数 5
回答已采纳
我正在扩展默认的Vue对象
export default (Vue) => {
Object.defineProperties(Vue.prototype, {
$http: {
get () {
return axiosInstance
}
}
})
}
我使用的是typescript，当然typescript不喜欢这样。我如何创建一个特定于项目的.d.ts文件，在vue类型脚本声明中添加上述扩展名？
浏览 6提问于2017-03-31得票数 7
1回答
多少类型文本在语法上与es6 / es7不同。我们在打字稿中有这样的代码：
class demo {
demoProp:any;
constructor () {
//...
}
}
但是es6不要求:any在属性之后声明它？所以，我应该继续使用打字稿，还是应该直接学习es6，因为它是标准的JavaScript。注意：-我知道TypeScript据说是基于类型的，也是es6的超集。但ecma script很可能在不久的将来成为TypeScript，还是在下一个版本7或8中？
浏览 2提问于2016-05-12得票数 3
回答已采纳
我正在使用VS Code，它在使用Typescript时非常有用，因为它告诉您当前的问题不需要传输。我使用的是Typescript和nodeJS，它工作得很好。
我唯一的问题就是所谓的“空/未定义的检查函数”。
参见此示例：
class User {
public someProperty: string | undefined;
// ...
public get canDoSomething() {
return this.someProperty != undefined;
}
}
let myUser: User = ...
这样做很好：
if (
浏览 1提问于2019-06-27得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
