TypeScript：处理既不涉及状态也不涉及props 的this组件属性

你问过两个相关的问题:setTheme和netInfoSubscription.

你有几个 Select :

方法语法

你的setTheme是一个方法，所以你可以把它写成一个，然后在构造函数中使用bind:

export default class App extends React.PureComponent<{},IAppState>  {
    constructor(props) {
        // ...
        this.setTheme = this.setTheme.bind(this);
        // ...
    }

    setTheme(theme: string) {
        // ...
    }
}

这样做的一个优点是setTheme在App.prototype上，这有时有助于单元测试(可以模拟).

这适用于setTheme人，但不适用于netInfoSubscription人；为此，您需要以下其他选项之一.

属性声明(包括方法)

您可以将setTheme写为属性(当然，netInfoSubscription也是属性):

export default class App extends React.PureComponent<{},IAppState>  {
    setTheme = (theme: string) => {
        // ...
    };
    netInfoSubscription?: SubscriptionType;
    // Or:
    netInfoSubscription: SubscriptionType | null = null;
}

对于setTheme，因为这是一个箭头函数，所以不需要绑定.它关闭的上下文中有this个引用正在构造的实例.

对于netInfoSubscription，因为我们在实例构建期间没有它的值，所以有两个选项:

• 使用?表示该属性是可选的.
• 使用值为null的联合类型，直到/除非我们有订阅.

请注意，这两种情况中的任何一种都意味着netInfoSubscription可以是代码中的undefined(或null).对于you不知道(但TypeScript不知道)的地方，可以将其抓取到一个局部常量并进行断言:

someMethod() {
    // If we *know* (from the logic) that we have the subscription now
    const { netInfoSubscription } = this;
    assertNotNullish(netInfoSubscription);
    // ...here you can use `netInfoSubscription`'s value, and TypeScript will understand
    // that we now know it has one
    // ...
}

assertNotNullish是我的标准实用程序函数之一，如下所示:

const assertNotNullish: <T>(value: T | undefined | null) => asserts value is T = (value) => {
    if (value == null) { // Checks `null` and `undefined`
        throw new Error(`Expected value to be non-nullish`);
    }
};

Playground link

Note:你could只使用non-null assertion operator，但我不会.使用assertNotNull这样的东西可以判断你所断言的是真的.使用非空断言运算符则不会，它只会告诉TypeScript假定断言为真.

接口

您可以定义一个接口:

interface AppInstanceMembers {
    setTheme: (theme: string) => void;
    netInfoSubscription?: SubscriptionType;
    // ...
}
// ...
export default class App extends React.PureComponent<{},IAppState> & AppInstanceMembers {
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^^^^^
    constructor(props) {
        // ...
        this.setTheme = (theme/* You don't have to repeat the type here*/) => {
            // ...
        };
        // ...
    }
    // ...
}

这告诉TypeScript在App上预期setTheme(可能是netInfoSubscription)(这在构造函数中是可以满足的).但这确实意味着你必须重复setTheme的某些部分.

如前所示，在you从逻辑(但TypeScript不知道)知道netInfoSubscription不会为空的地方，可以使用assertNotNullish.