这样的函数类型定义在 ts 里面叫什么？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 133 天前的主题，其中的信息可能已经有所发展或是发生改变。

type ClassA = {
  prop1: string
  prop2: number
  prop3?: string
}

const a = {
  prop4: '123',
  // 这个 prop5 是函数的类型定义吗？
  prop5: (): ClassA => {
    return {
      prop1: '1',
      prop2: 2
    }
  }
}

如何理解这个 prop5 的类型定义？有没有相关文档可以学习一下？谢谢。

9 条回复 • 2024-07-21 18:46:26 +08:00

edz

133 天前

去看一眼函数类型都能知道了吧

waiaan

133 天前

@edz

没找到文档里有这种写法

Track13

133 天前

prop5: (): ClassA 这里表示 prop5 这个函数的返回值是 ClassA 的实例

sunjourney

133 天前

@Track13 #3 这就是取了名叫 ClassA ，和 Class 没半毛钱关系

NoManPlay

133 天前

箭头函数类型的几种写法
const fn1 = (): number => {
return 1
};
const fn2 = (a: number, b: number): number => {
return a + b;
};
const fn3: (a: number, b: number) => number = (a, b) => {
return a + b;
};

type FnType = (a: number, b: number) => number;
const fn4: FnType = (a, b) => {
return a + b;
};

你给出的 prop5 对应 fn1 的写法
https://www.typescriptlang.org/docs/handbook/functions.html#function-types

ruyan2013

133 天前

"prop5 的类型定义" 这么表达，似乎不太准确，

这里 prop5 是一个对象上的 key ，值为一个函数，并不是“类型定义”。这里写的 ClassA 是在强制声明一下此函数返回值符合 ClassA 的类型定义。不写也没关系，这里 ts 可以推断也符合 ClassA

nitmali

133 天前

prop5 是函数名，

ClassA 是函数返回类型，

prop5: (): ClassA => {
return {
prop1: '1',
prop2: 2
}
}
是箭头函数

Track13

133 天前

@sunjourney type ClassA 前面不是有 type 吗。这不是一个 Class ，只是类型别名。

ParkinLin

122 天前

`prop5` 是 `a` 对象的箭头方法，不是类型定义，类型定义是 `prop5` 后面的 `(): ClassA` 这部分，只不过 `prop5` 是无参箭头方法，所以把你和类型定义的语法绕进去了......（我也被坑过！！！）
一种可视化的调试是，我们直接把代码复制到 TS 的在线游乐场，编译完就只剩下下面这些代码了：
```js
const a = {
prop4: '123',
// 这个 prop5 是函数的类型定义吗？
prop5: () => {
return {
prop1: '1',
prop2: 2
};
}
};
```
可以看到，代码中被擦除的和逻辑无关的部分就是 TS 的类型定义，剩下的则是 JS 的功能逻辑。
另外，ES5 之前的函数既可以是函数，也可以是 lambda 表达式，还可以是构造函数。ES6 之后，为了区分函数在不同编程范式中的语义，JS 引入箭头函数表示 lambda ，引入 class 表示构造函数。
这里的 `prop5` 虽然看似箭头函数，但由于它是 `a` 对象的属性，所以准确的术语是“箭头方法”。
（ PS：这并不会影响我们修炼“类型体操”，只是表述更加专业。）