In a class, an unique symbol attribute is sometime lost during incremental build

[denis-migdal]

🔎 Search Terms

• unique property
• incremental build
• interface declaration merging

🕗 Version & Regression Information

• Tested with 6.0.2 and 6.0.3

⏯ Playground Link

Playground Link

💻 Code

I do not have a minimal reproductible exemple as the issue seems to come from the incremental build.

I had a class with an unique symbol property, on which I was doing interface declaration merging:

const SYMBOL: unique symbol = Symbol();

class X {

    protected attr = "ok";

    readonly [SYMBOL] = "ok";

    protected foo() {
        // use it
        this[SYMBOL];
    }
}

type T<N extends string> = Record<`add${N}`, () => void>;

interface X extends T<"hoc"> {}

const x = {} as X;
x.addhoc

🙁 Actual behavior

The following error first appeared when I set some of the public attributes as protected (the error below is edited to match the provided exemple) :

ERROR in [...]
TS7053: Element implicitly has an 'any' type because expression of type 'unique symbol' can't be used to index type 'X'.
  Property '[????.SYMBOL]' does not exist on type 'X'.
    92 |
    93 |     protected foo() {
  > 94 |         this[SYMBOL];
       |                 ^^^^^^^^^^^^^^^^
    95 |     }

I noticed that :

• The error disappear if I delete all of TS cache files.
• The error reappear if I rebuild without any changes to the files.
• The error reappear if I edit the files that defines X.
• The error does not reappear if I change other files.
• In watch mode, the error sometimes disappear and reappear when I change the files that defines X.
• The error doesn't appear in my VSC editor.

🙂 Expected behavior

No TS errors.

Additional information about the issue

I also reproduced the error with tsc --noEmit, so it doesn't seem to come from my Webpack build system.

[RyanCavanaugh]

What's the behavior in TS 7?

[denis-migdal]

Also got the error with TS7 after modifying the file:

src/core/Chart/Controller.ts:99:17 - error TS7053: Element implicitly has an 'any' type because expression of type 'unique symbol' can't be used to index type 'ChartController'.
  Property '["MWL@2026:Reactive/Observers/EventSource".MAIN_EVENT]' does not exist on type 'ChartController'.

99         trigger(this[MAIN_EVENT], origin);

I also get new errors with TS7. The one I checked seems to be a bug:

Type 'ChartDataset<"scatter">' is not assignable to type 'ChartDataset<keyof ChartTypeRegistry>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.

"scatter" is assignable to keyof ChartTypeRegistry, so I shouldn't have an error...

The new errors are quite long (cf example at the end of this comment), it becomes harder to see the changes in the error list. It could be nice to have a little summary with 2 lines per errors to avoid having to scroll when we want to quickly check if a particular error is still here:

src/core/datasets/Points.ts:21:5 - error TS2322: Type (...) is not assignable to type (...)
21     bindings: Dataset.bindings,

The error message in itself is so long, it also becomes quite hard to read.
Wouldn't it be better to write something like: property parsedDataset.dataset and parsedDataset.chartObject.animations.duration are incompatible ?

This is one error (this is even worse with line breaks in the console):

src/core/datasets/Points.ts:21:5 - error TS2322: Type '{ type: (dataset: ChartDataset<keyof ChartTypeRegistry>, type: keyof ChartTypeRegistry) => void; parsedData: (dataset: ChartDataset<keyof ChartTypeRegistry>, parsedData: unknown) => void; color: (dataset: ChartDataset<keyof ChartTypeRegistry>, color: string) => void; } & Record<never, never>' is not assignable to type 'Partial<PropertiesBindings<NoInfer<{ data: ParsedData; parsedData: ParsedData; color: string; type: "scatter"; }>, ChartDataset<"scatter">>> & Record<never, never>'.
  Type '{ type: (dataset: ChartDataset<keyof ChartTypeRegistry>, type: keyof ChartTypeRegistry) => void; parsedData: (dataset: ChartDataset<keyof ChartTypeRegistry>, parsedData: unknown) => void; color: (dataset: ChartDataset<keyof ChartTypeRegistry>, color: string) => void; } & Record<never, never>' is not assignable to type 'Partial<PropertiesBindings<NoInfer<{ data: ParsedData; parsedData: ParsedData; color: string; type: "scatter"; }>, ChartDataset<"scatter">>>'.
    Types of property 'parsedData' are incompatible.
      Type '(dataset: ChartDataset<keyof ChartTypeRegistry>, parsedData: unknown) => void' is not assignable to type 'PropertyBinding<NoInfer<{ data: ParsedData; parsedData: ParsedData; color: string; type: "scatter"; }>, ChartDataset<"scatter">, ParsedData>'.
        Types of parameters 'dataset' and 'chartObject' are incompatible.
          Type 'ChartDataset<"scatter">' is not assignable to type 'ChartDataset<keyof ChartTypeRegistry>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
            Type 'ChartDataset<"scatter">' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<keyof ChartTypeRegistry>> & ChartDatasetProperties<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[]>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
              Type 'ChartDataset<"scatter">' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
                Types of property 'animation' are incompatible.
                  Type 'false | _DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined'.
                    Type '_DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined'.
                      Type '_DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>' is not assignable to type '_DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>'.
                        Types of property 'duration' are incompatible.
                          Type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
                            Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
                              Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined'.
                                Types of parameters 'ctx' and 'ctx' are incompatible.
                                  Type 'ScriptableContext<"radar">' is not assignable to type 'ScriptableContext<"line">'.
                                    Types of property 'dataset' are incompatible.
                                      Type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"radar">> & ChartDatasetProperties<"radar", (number | null)[]>' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"line">> & ChartDatasetProperties<"line", (number | Point | null)[]>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
                                        Type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"radar">> & ChartDatasetProperties<"radar", (number | null)[]>' is not assignable to type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
                                          Types of property 'animation' are incompatible.
                                            Type 'false | _DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined'.
                                              Type '_DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>' is not assignable to type 'false | _DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }> | undefined'.
                                                Type '_DeepPartialObject<AnimationSpec<"radar"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>' is not assignable to type '_DeepPartialObject<AnimationSpec<"line"> & { onProgress?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; onComplete?: (this: Chart<keyof ChartTypeRegistry, (number | BubbleDataPoint | Point | [number, number] | null)[], unknown>, event: AnimationEvent) => void; }>'.
                                                  Types of property 'duration' are incompatible.
                                                    Type 'number | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined'.
                                                      Type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined' is not assignable to type 'number | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined'.
                                                        Type '(ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined' is not assignable to type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined'.
                                                          Types of parameters 'ctx' and 'ctx' are incompatible.
                                                            Type 'ScriptableContext<"line">' is not assignable to type 'ScriptableContext<"radar">'.
                                                              Types of property 'dataset' are incompatible.
                                                                Type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"line">> & ChartDatasetProperties<"line", (number | Point | null)[]>' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"radar">> & ChartDatasetProperties<"radar", (number | null)[]>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
                                                                  Type '_DeepPartialObject<{ type: "line"; } & LineControllerDatasetOptions & FillerControllerDatasetOptions> & _DeepPartialObject<PluginDatasetOptionsByType<"line">> & ChartDatasetProperties<"line", (number | Point | null)[]>' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
                                                                    Types of property 'borderWidth' are incompatible.
                                                                      Type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined) | undefined' is not assignable to type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.
                                                                        Type '(ctx: ScriptableContext<"line">, options: AnyObject) => number | undefined' is not assignable to type 'number | readonly (number | undefined)[] | ((ctx: ScriptableContext<"radar">, options: AnyObject) => number | undefined) | undefined'.

21     bindings: Dataset.bindings,

[RyanCavanaugh]

What exactly is the defect, in TS7, that you are reporting?

[denis-migdal]

I reported 3 things:

1. an issue with the incremental build (with TS 6.0.2, 6.0.3, and 7.0.2).
2. what seems to be a regression in 7.0.2, that I noticed when answering your previous question.
3. the fact that the errors messages are quite hard to read when they are too long.

I assume you want more information about 2.

Type 'ChartDataset<"scatter">' is not assignable to type 'ChartDataset<keyof ChartTypeRegistry>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.

keyof ChartTypeRegistry is "bar"|"line"|"scatter"|"bubble"|"pie"|"doughnut"|"polarArea"|"radar".
So "scatter" is assignable to keyof ChartTypeRegistry.

In TS 6, ChartDataset<"scatter"> is resolved as:

_DeepPartialObject<{type: "scatter";} & LineControllerDatasetOptions>
& _DeepPartialObject<PluginDatasetOptionsByType<"scatter">> & ChartDatasetProperties<"scatter", (number | Point | null)[]>

And ChartDataset<keyof ChartTypeRegistry> is resolved as:

(               _DeepPartialObject<{type: "bar";} & BarControllerDatasetOptions>
              | _DeepPartialObject<{type: "line";} & LineControllerDatasetOptions & FillerControllerDatasetOptions>
              | _DeepPartialObject<{type: "scatter";} & LineControllerDatasetOptions>
              | _DeepPartialObject<{type: "bubble";} & BubbleControllerDatasetOptions>
              | _DeepPartialObject<...> | _DeepPartialObject<...> | _DeepPartialObject<...> | _DeepPartialObject<...>
) & _DeepPartialObject<...> & ChartDatasetProperties<...>

However, TS 7 is trying to compare ChartDataset<"scatter"> and ChartDataset<"radar"> for no reasons (x: A|B = a as A doesn't need a to be assignable to B, being assignable to A is enough).

Type 'ChartDataset<"scatter">' is not assignable to type '_DeepPartialObject<{ type: "radar"; } & RadarControllerDatasetOptions & FillerControllerDatasetOptions>' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.

For reference:

export interface ChartTypeRegistry {
  bar: {
    chartOptions: BarControllerChartOptions;
    datasetOptions: BarControllerDatasetOptions;
    defaultDataPoint: number | [number, number] | null;
    metaExtensions: {};
    parsedDataType: BarParsedData,
    scales: keyof CartesianScaleTypeRegistry;
  };
  line: {
    chartOptions: LineControllerChartOptions;
    datasetOptions: LineControllerDatasetOptions & FillerControllerDatasetOptions;
    defaultDataPoint: ScatterDataPoint | number | null;
    metaExtensions: {};
    parsedDataType: CartesianParsedData;
    scales: keyof CartesianScaleTypeRegistry;
  };
  scatter: {
    chartOptions: ScatterControllerChartOptions;
    datasetOptions: ScatterControllerDatasetOptions;
    defaultDataPoint: ScatterDataPoint | number | null;
    metaExtensions: {};
    parsedDataType: CartesianParsedData;
    scales: keyof CartesianScaleTypeRegistry;
  };
  bubble: {
    chartOptions: unknown;
    datasetOptions: BubbleControllerDatasetOptions;
    defaultDataPoint: BubbleDataPoint;
    metaExtensions: {};
    parsedDataType: BubbleParsedData;
    scales: keyof CartesianScaleTypeRegistry;
  };
  pie: {
    chartOptions: PieControllerChartOptions;
    datasetOptions: PieControllerDatasetOptions;
    defaultDataPoint: PieDataPoint;
    metaExtensions: PieMetaExtensions;
    parsedDataType: number;
    scales: keyof CartesianScaleTypeRegistry;
  };
  doughnut: {
    chartOptions: DoughnutControllerChartOptions;
    datasetOptions: DoughnutControllerDatasetOptions;
    defaultDataPoint: DoughnutDataPoint;
    metaExtensions: DoughnutMetaExtensions;
    parsedDataType: number;
    scales: keyof CartesianScaleTypeRegistry;
  };
  polarArea: {
    chartOptions: PolarAreaControllerChartOptions;
    datasetOptions: PolarAreaControllerDatasetOptions;
    defaultDataPoint: number;
    metaExtensions: {};
    parsedDataType: RadialParsedData;
    scales: keyof RadialScaleTypeRegistry;
  };
  radar: {
    chartOptions: RadarControllerChartOptions;
    datasetOptions: RadarControllerDatasetOptions & FillerControllerDatasetOptions;
    defaultDataPoint: number | null;
    metaExtensions: {};
    parsedDataType: RadialParsedData;
    scales: keyof RadialScaleTypeRegistry;
  };
}

[denis-migdal]

Note: If you want to explore it, theses are the types from chart.js@4.5.1.