TS returns an absurd type when using an inherited getter (I guess there is some kind of cache issue or something ???)

[denis-migdal]

🔎 Search Terms

none

🕗 Version & Regression Information

• This is the behavior in every version I tried, and I reviewed the FAQ for entries about _________
• I was unable to test this on prior versions because _______

⏯ Playground Link

https://github.com/denis-migdal/ChartsHTML/tree/a3e327add27253fdb5961249b0184fef5a2e8a1a

💻 Code

// components/index.ts
export default class GraphComponent {
     #chart?: ChartHTML;
     get chart() {
        return this.#chart!;
    }
}

// components/value.ts
export default class Value extends GraphComponent {
    foo() {
         this.chart // <- GraphComponent.chart: GraphComponent (WTF???)
    }
}

🙁 Actual behavior

TS returns GraphComponent as the type of GraphComponent.chart

🙂 Expected behavior

TS should returns ChartHTML as this is the type returned by the getter...

Additional information about the issue

My project is bigger than that, so I assume there must be somewhere an issue with some kind of cache ???
I use TS 5.3.3 with Webpack 5.88.2.

tsconfig (of the larger project):

{
  "exclude": ["node_modules", "build", "dist", "tests", "libs/*/tests", "src", "postcss.config.js", "webpack.config.js"],
  "compilerOptions": {
    "outDir": "./dist/build/",
    "baseUrl": "./",
    "paths": {
      "*": ["libs/KeyLib/*", "libs/*", "src/*", "src2/*"]
    },
    "sourceMap": true,
    "alwaysStrict": true,

    "strict": true,
		"noErrorTruncation": true,
		"exactOptionalPropertyTypes": true,
		"noFallthroughCasesInSwitch": true,
		"noImplicitOverride": true,
		"noImplicitReturns": true,
    "allowImportingTsExtensions": true,

    "module": "esnext",
    "target": "esnext",
    "allowJs": true,
    "resolveJsonModule": true,
    "moduleResolution": "node",
    "incremental": true,
  }
}

Webpack config of the larger project :

// https://www.typescriptlang.org/docs/handbook/project-references.html

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const ForkTsCheckerNotifierWebpackPlugin = require('fork-ts-checker-notifier-webpack-plugin');


module.exports = function(config, src, {workers} = {}) {

	config.module.rules.push({
		test: /\.tsx?$/,
		use: [{
				loader: 'swc-loader',
				//loader: 'ts-loader',
				options: {
					//transpileOnly: true, // Build time : 20sec to 10sec...
					//experimentalWatchApi: true,
				},
			},],
		exclude: [ /node_modules/ ]
	});

	config.plugins.push(
		new ForkTsCheckerWebpackPlugin({ //20sec to 12sec
			typescript: {
				build: true, // 12 to 9.5 sec
				mode: 'write-references',
				//profile: true
			}
		}),
		new ForkTsCheckerNotifierWebpackPlugin({ excludeWarnings: true }),
	);

	config.resolve = {
		extensions: ['.tsx', '.ts', '.js'], //TODO: move...
		modules: [
			'./libs/KeyLib/',
			'./libs/',
			src,
			'./node_modules',
		],
		alias: {
			'@stdlib': '@stdlib/stdlib/lib/node_modules/@stdlib/'
		},
		fallback: { //TODO: move...
            "fs": false,
            "path": false,
            "crypto": false
        },
	}

	const WORKER_PREFIX = 'TS.Worker.';

	config.entry.main.push( `${src}/index.ts` );

	for(let worker_name in workers) {
		config.entry[`${WORKER_PREFIX}${worker_name}`] = workers[worker_name][0];
	}

	config.output.filename = (chunk) => {

		let {runtime} = chunk;

		if( runtime === "main" )
			return `index.js`;

		let worker_name = runtime.slice(WORKER_PREFIX.length);

		return `${workers[worker_name][1]}/index.js`;
	}
};

I am myself very confused by this issue...

[denis-migdal]

Okay, even worse, inside a method of GraphComponent :

this.chart.getValue(content); <- property "getValue" doesn't exist on type "GraphComponent".
         ^-- (property) GraphComponent.chart: ChartHTML

[denis-migdal]

I found the issue... I was doing a : import type ChartHTML from './'; instead of import type ChartHTML from '../';

The fact the type name changed got me really confused.