具有泛型的打字稿初始化对象

Question

我想要的是这样的：

class ThemeExample <T> {
    static theme : T;
    static init(theme : T){
        ThemeExample.theme = theme;
    }
};

//config it 
ThemeExample.init({
    hello : 'hi'
})
//in another file access properties with auto completion
ThemeExample.theme.hello

但这不起作用。 TS2302: Static members cannot reference class type parameters.

尝试了其他一些方法，例如在函数中创建类并返回它，并在类中使用泛型函数。 仍然找不到让我初始化此配置一次的方法。 然后稍后访问主题并自动完成其他文件中的所有属性。 我需要这样的东西，请帮帮我，我太沮丧了。

Answer 1

class 的静态部分由类构造函数组成，并且只有一个这样的构造函数。它无法访问实例类型上的任何泛型参数，因为类构造函数需要能够为该泛型参数的任何可能规范创建实例。在您的ThemeExample<T> 代码中，类构造函数必须能够创建ThemeExample<string> 和ThemeExample<number> 的实例。如果您可以拥有T 类型的静态属性，则意味着它必须是bothstring 和number 以及T 的任何其他可能类型。它不起作用。

从概念上讲，您可以将ThemeExample 想象为具有名为theme 的unknown 类型的static 属性，然后当您调用ThemeExample.init("hello") 时，编译器将narrow ThemeExample 类构造函数使theme 现在是 string 类型，而不是 unknown。但是没有很好的机制来做到这一点。你可以想象写像assertion function 这样的东西会产生这样的效果：

interface ThemeExampleConstructor<T = unknown> {
  theme: T;
  init<T>(theme: T): asserts this is ThemeExampleConstructor<T>;
  new(): ThemeExample<T>;
}

declare const ThemeExample: ThemeExampleConstructor;

ThemeExample.theme.toUpperCase(); // error
ThemeExample.init("hello");
ThemeExample.theme.toUpperCase(); // okay
new ThemeExample().instanceProp.toUpperCase(); // okay

但是你不能用class 语法来做到这一点，即使你完成了这个，像这样的缩小也不能跨越文件边界甚至函数边界。没有任何机制可以让编译器看到一个文件中的ThemeExample.init("hello") 发生在另一个文件中的ThemeExample.theme.toUpperCase() 之前。所以我们根本做不到。

---

相反，我建议采用可生成新类构造函数的工厂函数。这个函数可能存在于某个库中，比如 Library/index.ts:

export function initThemeExample<T>(theme: T) {
    return class ThemeExample {
        static theme = theme;
    };
}

然后在像 userLib.ts 之类的另一个文件中，用户可以 import 从库中配置并重新导出：

import {initThemeExample} from './Library'

//config it 
export const ThemeExample = initThemeExample({
    hello: 'hi'
})

然后用户可以在所有其他文件中使用这个配置的构造函数：

import {ThemeExample} from './userLib'

//import your ThemeExaple in another file
document.write(ThemeExample.theme.hello.toUpperCase()); // HI

---

Link to StackBlitz code