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

TypeScript 中,如何定义(声明)函数的类型?

  •  
  •   Kasumi20 ·
    develon2015 · 2021-02-03 16:53:43 +08:00 · 2996 次点击
    这是一个创建于 1387 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我知道可以把函数写成变量,就可以声明函数的类型了,比如这里的 Root 组件:

    import * as React from 'react';
    
    var Root: React.FC = (props: React.PropsWithChildren<{}>) => {
        return (
            <div>
                {props.children}
            </div>
        )
    }
    
    export default () => (
        < >
            <Root>
                <div>Hello</div>
            </Root>
        </>
    )
    

    但是太丑了,该怎么写呢?

    function Root(props) {
    }
    
    第 1 条附言  ·  2021-02-04 11:13:08 +08:00

    结论:目前只能使用这种丑陋的方式了,这是js历史遗留。

    要优雅的类型,还得完全面对对象。

    第 2 条附言  ·  2021-02-04 11:20:02 +08:00

    关于什么是函数类型,这里提示一下

    type FC = (props: string) => number;
    
    export default ((a) => {
        // 很好:a被推导为string类型
    
        // 不好:没有返回正确的类型,编译器不报异常
    }) as FC;
    
    21 条回复    2021-02-05 01:27:28 +08:00
    Yadomin
        1
    Yadomin  
       2021-02-03 17:04:25 +08:00 via Android
    `function Root(props): React.FC {}`
    Kasumi20
        2
    Kasumi20  
    OP
       2021-02-03 17:06:00 +08:00
    @Yadomin 大哥,你这是定义返回类型
    Yadomin
        3
    Yadomin  
       2021-02-03 17:06:20 +08:00 via Android
    也可以写成
    const Root = (props): React.FC => {}
    meepo3927
        4
    meepo3927  
       2021-02-03 17:39:36 +08:00   ❤️ 1
    函数有类型吗
    knives
        5
    knives  
       2021-02-03 17:45:39 +08:00
    是指 props 的类型定义?可参考: https://juejin.cn/post/6884144754993397767
    Kasumi20
        6
    Kasumi20  
    OP
       2021-02-03 17:46:14 +08:00
    @meepo3927 这句话问得很哲学,我喜欢
    Justin13
        7
    Justin13  
       2021-02-03 17:50:06 +08:00 via Android
    interface 里的 function types 可以做到
    BBUG
        8
    BBUG  
       2021-02-03 17:54:37 +08:00   ❤️ 3
    不行

    明确一点,`var Root: React.FC = () => {}` 等号右边的函数声明隐式包含一个类型,左边变量类型相当于是对右边函数类型的一个约束

    一般推荐使用常规函数声明组件即可,不需要使用 React.FC
    https://github.com/typescript-cheatsheets/react/blob/main/README.md#function-components
    iamppz
        9
    iamppz  
       2021-02-03 18:25:39 +08:00
    ```
    const func: () => void = function () {
    ...
    };
    ```

    是这个意思?
    hupo0
        10
    hupo0  
       2021-02-03 18:49:35 +08:00
    ``` typescript
    interface Root {
    (props: React.PropsWithChildren<{}>): React.FC;
    }
    ```
    learningman
        11
    learningman  
       2021-02-03 21:49:51 +08:00
    函数的类型不就是函数,你想说的是返回值?
    Reapper
        12
    Reapper  
       2021-02-04 09:08:26 +08:00
    函数就是类型,除非你说返回值类型
    yazoox
        13
    yazoox  
       2021-02-04 09:38:04 +08:00
    这个 Root 的类型,就是 React.FC, 返回值是 React.Element<any, any> | null
    lanten
        14
    lanten  
       2021-02-04 09:43:53 +08:00
    其实函数类型的定义就是行参和返回值类型定义,可以直接用 typeof 推断。

    ```ts
    function foo(strArr: string[]): string {
    return strArr.join(',')
    }

    type Foo = typeof foo

    ```

    也可以用 interface 定义函数类型'

    ```ts
    interface F {
    (strArr: string[]): string
    }

    const fn: F = strArr => {
    return strArr.join(',')
    }
    ```
    1a0ma0
        15
    1a0ma0  
       2021-02-04 12:22:23 +08:00
    interface 不是可以定义嘛?
    siweipancc
        16
    siweipancc  
       2021-02-04 13:43:32 +08:00 via iPhone
    ……,你先回答我官网文档你看完了吗 :D
    Kasumi20
        17
    Kasumi20  
    OP
       2021-02-04 13:44:32 +08:00
    @siweipancc 你先回答我你看完我问题了吗?
    ljpCN
        18
    ljpCN  
       2021-02-04 14:29:15 +08:00
    14 楼正解。
    ```typescript
    function fn(arg: string): string {
    return arg;
    }
    ```
    palmers
        19
    palmers  
       2021-02-04 16:42:41 +08:00   ❤️ 1
    我知道的可以使用函数声明( Function Declaration )和函数表达式( Function Expression )
    具体可以参考这个: https://www.typescriptlang.org/docs/handbook/interfaces.html#function-types
    coffeedeveloper
        20
    coffeedeveloper  
       2021-02-04 20:01:27 +08:00   ❤️ 1
    楼上认为能申明的都是没了解实际问题的,这个问题我也困扰过。目前确实是无解的。

    比如我想申明一个函数的类型申明,有 x 、y 两个 number 参数,返回一个 number 。可以用 interface

    ```typescript
    interface NumFn {
    (x: number, b: number): number
    }
    ```

    随后希望 `function Foo` 和`function Bar`都能够基于 NumFn 这个 interface 约定来实现的话,目前确实是没法弄的,只能通过 `const foo = `来勉强达到目的。
    Sparetire
        21
    Sparetire  
       2021-02-05 01:27:28 +08:00 via Android   ❤️ 1
    怎么这么多连问题都没看懂就强答的。。还函数有类型吗都问出来了
    楼主是希望在定义函数的同时也声明函数的类型吧,注意是定义函数不是函数表达式(js 里面似乎是这么个叫法吧,有点忘了)
    显然楼主是知道函数表达式的时候该如何指定函数类型。。还一堆人搁这接口 typeof 的。。
    回到问题,目前 ts 没法做
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5610 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 02:59 · PVG 10:59 · LAX 18:59 · JFK 21:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.