關於 class 構造函數中未初始化變量的 TypeScript 錯誤

Question

TypeScript 抱怨未初始化的 class 屬性，即使它似乎已正確分配。

這是一個最小的可重現示例：

type Config = {
    color: string;
}

class Toto {
    color: string;

    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

TypeScript操場

編譯器在color屬性定義下划線並拋出以下錯誤：

屬性“顏色”沒有初始化程序，也沒有在構造函數中明確分配。

問題似乎與使用setConfig方法設置color的值有關，因為以下代碼不會產生編譯器錯誤：

type Config = {
    color: string;
}

class Toto {
    color: string;

    constructor(config: Config) {
        this.color = config.color;
    }
}

這個問題是我希望能夠在 class 實例的生命周期內使用setConfig方法將 class 屬性設置為不同的值。 我不想為了解決 TS 編譯器問題而在構造函數和setConfig方法中重復相同的代碼。

有誰知道為什么編譯器看不到在構造函數中正確設置了 class 變量？

Answer 1

如果您作為開發人員確定color不會 go 在構造函數中未初始化，您只需告訴編譯器就是這種情況：

type Config = {
    color: string;
}

class Toto {
    color!: string;

    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

! 告訴編譯器這個變量不會是! 用來。

當然，在理想情況下，編譯器將能夠檢測到間接設置，但我認為這目前是不可能的。

游樂場鏈接

Answer 2

TypeScript 不允許這樣做，因為即使Toto class 是子類， setConfig方法也可能被覆蓋：

class SubToto extends Toto {
    setConfig() {
        // Do nothing
    }
}

因此，兩種可能的方法是：

1. 直接在構造函數中設置值，並在setConfig中重復代碼：

class Toto {
    color: string;

    constructor(config: Config) {
        this.color = config.color;
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

這有重復代碼的缺點。

2. 為屬性設置初始空值。

class Toto {
    color: string | null = null;

    constructor(config: Config) {
        this.setConfig(config)
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}

這樣做的缺點是現在必須在 class 方法的其他地方使用之前檢查該屬性是否為空。

Answer 3

您可以這樣做，因為最初顏色是未定義的。 或將其初始化為private color: string = ''; .

type Config = {
    color: string;
}

class Toto {

    private color: string|undefined;
    
    constructor(config: Config) {
        this.setConfig(config);
    }

    setConfig(config: Config) {
        this.color = config.color;
    }
}