[英]Typescript interface function member
I am new to Typescript.我是打字稿的新手。 I couldn't understand the following use of interface:
我无法理解接口的以下用法:
Say, there is a function :说,有一个函数:
function test(arg1: ITest):number {
return 20;
}
If the ITest
interface is like below :如果
ITest
界面如下所示:
interface ITest {
(props: string):number;
a1?: number;
}
Then, the below call is valid :然后,下面的调用是有效的:
const obj = {
func: (p: string): number => (10+2),
};
test(obj.func); //Should not I pass obj instead of obj.func ?
Q: Should not I pass obj
instead of obj.func
?问:我不应该传递
obj
而不是obj.func
吗?
But, if the interface is like below :但是,如果界面如下所示:
interface ITest {
(props: string):number;
a1: number; //Removed the optional sign "?"
}
Q: Then what argument should I pass to the test function ?问:那么我应该向测试函数传递什么参数?
Q: what is difference between above interface and the following changed declaration of the interface?问:上面的接口和下面改变的接口声明有什么区别?
interface ITest {
func: (props: string)=>number; //changed it from (props: string):number;
a1: number;
}
Thank you for clearing out my doubts.谢谢你解开我的疑惑。
I will start from what is function in JS/TS.我将从什么是 JS/TS 中的函数开始。 Function is an object, that means that as any other objects function can have methods and properties.
函数是一个对象,这意味着函数可以像任何其他对象一样具有方法和属性。 This is even visible in base function object, as it has methods like
apply
or bind
.这甚至在基本函数对象中也是可见的,因为它具有
apply
或bind
类的方法。 In any given moment you can attach property to any function.在任何给定时刻,您都可以将属性附加到任何函数。 Consider
考虑
const f = (a:string) => a
f.prop = 1;
// take a type from f
type F = typeof f;
It is full valid TS code.它是完全有效的 TS 代码。 And if we ask what type above function has it will be:
如果我们问上面的函数有什么类型,它将是:
type F = {
(a: string): string;
prop: number;
}
As you can see above is close to your sample code.正如您在上面看到的那样接近您的示例代码。 And indeed what we have here is function object in TS, it has main definition of functions in form of
(a: string): string;
实际上,我们这里有的是 TS 中的函数对象,它具有形式为
(a: string): string;
主要函数定义(a: string): string;
and other properties like prop
or in your example a1
.和其他属性,如
prop
或在您的示例中a1
。
Its not a mistake that this definition is so similar to standard object type definition, as we said function is just an object.这个定义与标准的对象类型定义如此相似并不是一个错误,正如我们所说的函数只是一个对象。
If your function has no other properties you can define the type in two ways:如果您的函数没有其他属性,您可以通过两种方式定义类型:
type F1 = {
(props: string):number;
}
type F2 = (props: string) => number
Above F1
and F2
definition are equal, but the first one gives opportunity to append additional properties to function object, where the second does not allow on such.上面的
F1
和F2
定义是相等的,但第一个提供了向函数对象附加附加属性的机会,而第二个不允许这样。
How now we can create valid object of our function with property, consider following snippet:现在我们如何使用属性创建函数的有效对象,请考虑以下代码段:
interface F1 {
(props: string):number;
a1: number;
}
// below preparation of object by temporary f1
const f1 = (props: string) => 1
f1.a1 = 2;
const a: F1 = f1; // a is valid value type F1
In your example a1
is optional so it doesn't need to be provided, that said such definition is valid:在您的示例中
a1
是可选的,因此不需要提供它,即表示这样的定义是有效的:
const f1: F1 = (props: string) => 1
Ok, the last thing is object with func
property, it is really a different thing.好吧,最后一件事是具有
func
属性的对象,它确实是另一回事。
const obj = {
func: (p: string): number => (10+2),
};
type Obj = typeof obj;
If we check what is Obj
type it is:如果我们检查什么是
Obj
类型,它是:
type Obj = {
func: (p: string) => number;
}
So it is different type, it says we don't have function object, but an object with method func
.所以它是不同的类型,它说我们没有函数对象,而是一个带有方法
func
的对象。 We can easily compare both types我们可以很容易地比较这两种类型
type FunctionType = {
(props: string):number;
}
const f: FunctionType = props => 1
type ObjectWithMethodType = {
func: (props: string) => number
}
const obj: ObjectWithMethodType = {
func: props => 1
}
I hope this explanation helps.我希望这个解释有帮助。
Q: Should not I pass obj instead of obj.func ?
问:我不应该传递 obj 而不是 obj.func 吗?
ITest
is a function type . ITest
是一个函数类型。 It describes a function itself, not an object with a function property or method.它描述了一个函数本身,而不是一个具有函数属性或方法的对象。
Q: Then what argument should I pass to the test function ?
问:那么我应该向测试函数传递什么参数?
Now you have declared ITest
as a function type with required property a1
.现在您已将
ITest
声明为具有必需属性a1
的函数类型。 The property declaration on a function works in TS by using a function declaration or const
expression.函数的属性声明通过使用函数声明或
const
表达式在 TS 中起作用。 Example : 示例:
const func = (p: string): number => 10 + 2 // or function declaration func(p: string) {...}
func.a1 = 42
const obj = { func };
test(obj.func) // works now
Q: what is difference between above interface and the following changed declaration of the interface ?
问:上面的接口和下面改变的接口声明有什么区别?
ITest
now has become an interface declaration for an object with func
and a1
properties. ITest
现在已成为具有func
和a1
属性的对象的接口声明。
const o1: ITest = {
func: s => 137,
a1: 42
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.