typescript - 如何从构造函数调用返回而不将属性标记为未定义？

Question

我使用导出常量的文件作为预处理器指令。现在，如果设置了该指令，我想完全剥离构造函数的主体。例如:

const MY_PREPROCESSOR_DIRECTIVE = true;

class Foo {
    someProp: string;
    constructor() {
        if (MY_PREPROCESSOR_DIRECTIVE) return;

        this.someProp = "string";
    }
}

这很好用，我使用闭包编译器进行构建，它剥离了主体，整个事情变成了:

class Foo {}

在 TypeScript 中这会导致错误，因为 someProp和otherProp “在构造函数中没有明确分配”。在 JavaScript 文件中，我在构造函数中没有收到错误，但所有属性都设置为 string | undefined :

const MY_PREPROCESSOR_DIRECTIVE = false;

class Foo {
    constructor() {
        if (MY_PREPROCESSOR_DIRECTIVE) return;

        this.someProp = "string";
    }

    myMethod() {
        if (MY_PREPROCESSOR_DIRECTIVE) return;

        this.someProp.substring(0);
//      ^^^^^^^^^^^^^------ Object is possibly 'undefined'.
    }
}

( js playground | ts playground )

有没有办法让 TypeScript 知道该指令始终为 false，这样它就不会标记 this.someProp如string | undefined ？我试图标记 return构造函数的声明为无法访问的代码，但我不确定如何实现这一点。

Answer 1

既然TS什么都不知道bout runtime MY_PREPROCESSOR_DIRECTIVE` 我认为值得使用策略模式。

所以，你有 Foo 的两个变体类(class)。一与 MY_PREPROCESSOR_DIRECTIVE = true另一个是 MY_PREPROCESSOR_DIRECTIVE = false .

const MY_PREPROCESSOR_DIRECTIVE = false;

interface Foo {
    someProp?: string;
    myMethod: () => void
}

class WithDirective implements Foo {
    someProp: string;

    constructor() {
        this.someProp = "string";
    }
    myMethod() {
        this.someProp.substring(0)
    }
}

class WithoutDirective implements Foo {
    someProp: undefined
    constructor() { }
    myMethod() { }
}

const Foo = MY_PREPROCESSOR_DIRECTIVE ? WithDirective : WithoutDirective

Playground

如果您不喜欢构建中始终有 1 个未使用的类，您可以使用类表达式:

const MY_PREPROCESSOR_DIRECTIVE = false;

interface Foo {
    someProp?: string;
    myMethod: () => void
}

const Foo =
    MY_PREPROCESSOR_DIRECTIVE
        ? class implements Foo {
            someProp: string;

            constructor() {
                this.someProp = "string";
            }
            myMethod() {
                this.someProp.substring(0)
            }
        }
        : class implements Foo {
            someProp: undefined
            constructor() { }
            myMethod() { }
        }

我个人认为第一个示例更具可读性并且更易于维护。另外，我认为这不会对您的 bundle 大小产生重大影响。