V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
waiaan
V2EX  ›  TypeScript

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

  •  
  •   waiaan · 168 天前 · 1682 次点击
    这是一个创建于 168 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
        1
    edz  
       168 天前
    去看一眼函数类型都能知道了吧
    waiaan
        2
    waiaan  
    OP
       168 天前
    @edz

    没找到文档里有这种写法
    Track13
        3
    Track13  
       168 天前
    prop5: (): ClassA 这里表示 prop5 这个函数的返回值是 ClassA 的实例
    sunjourney
        4
    sunjourney  
       168 天前
    @Track13 #3 这就是取了名叫 ClassA ,和 Class 没半毛钱关系
    NoManPlay
        5
    NoManPlay  
       168 天前   ❤️ 1
    箭头函数类型的几种写法
    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
        6
    ruyan2013  
       168 天前
    "prop5 的类型定义" 这么表达,似乎不太准确,

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

    ClassA 是函数返回类型,

    prop5: (): ClassA => {
    return {
    prop1: '1',
    prop2: 2
    }
    }
    是箭头函数
    Track13
        8
    Track13  
       168 天前
    @sunjourney type ClassA 前面不是有 type 吗。这不是一个 Class ,只是类型别名。
    ParkinLin
        9
    ParkinLin  
       158 天前
    `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:这并不会影响我们修炼“类型体操”,只是表述更加专业。)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3097 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 13:42 · PVG 21:42 · LAX 05:42 · JFK 08:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.