Typescript Type或Lint，以防止意外地将实际函数呈现到JSX中，而不是执行后的返回值

Question

我希望找到一个解决方案，以防止我犯下以下错误：

export function scratch_1 (props: scratch_1Props): ReactElement | null {
    function renderA (): string {
        return "A";
    }

    function renderB (): string {
        return "B";
    }

    function renderC (): string {
        return "C";
    }

    function render (): ReactElement | null {
        return (
            <div className={cx(styles._)}>
                {renderA()}
                {renderB()}
                {renderC} //BUG
            </div>
        );
    }

    return render();
}

注意renderC应该是renderC() 。 这不是世界末日，但是每隔一段时间就会使我感到烦恼的5分钟混乱的调试。

我希望有一个简单的linter解决方案，尽管我可以想象这有点困难，因为有时候有人可能希望将对函数的引用作为对组件的支持，所以那里可能存在一些重叠。

但是我可以想象有人真正喜欢类型和jsx组件子类的人，可能会有更多的元解决方案。 我对jsx中的子类型的智能强制执行不太满意。

Answer 1

tslint即用tslint看起来是不可能的。 您可以按照说明创建自己的起毛规则。

另一个解决方案可能是更改您编写JSX的方式。 公平地说，这并不能真正解决您所希望的问题。 基本上，只需将render{X}函数的输出存储到内联const 。 这样可以防止将功能签名分配给仅应分配字符串的内容。

您可以通过许多不同的方式执行非常相似的操作，但这是出于说明目的而编写的方式（我更改了某些东西的值，因为我无法为其输入类型，例如组件的className ）：

import * as React from "react";

export function scratch_1 (props: {}): React.ReactElement | null {
    function renderA (): string {
        return "A";
    }

    function renderB (): string {
        return "B";
    }

    function renderC (): string {
        return "C";
    }

    function joinThoseRenders(): string {
        return [renderA(), renderB(), renderC()].join("\n");
    }

    function render (): React.ReactElement | null {
        const stringyJoe: string = joinThoseRenders();

        return (
            <div className={""}>
                {stringyJoe}
            </div>
        );
    }

    return render();
}