Behavior difference: `.state` emit is missing on react component

[hkleungai]

Summary as below.

The table layout is similar to the previous ones in #4332 and #4254. Looks like tsgo over prioritize certain "buggy" behaviour based on .ts file handling, causing this kind of unexpected changes from TS 6 now being surfaced to .js files under tsgo transpilation.

	tsc	tsgo
Outside ctor, .js	✅ .state is emitted	✅ .state is emitted
Outside ctor, .ts	✅ .state is emitted	✅ .state is emitted
Inside ctor, .js	✅ .state is emitted	❌ .state is not emitted
Inside ctor, .ts	❌ .state is not emitted	❌ .state is not emitted

---

Steps to reproduce

1. Start a plain new project
   • "@types/prop-types": "^15.7.15",
   • "@types/react": "^19.2.17",
   • "@typescript/native-preview": "7.0.0-dev.20260619.1",
   • "typescript": "6.0.3"
2. Run npx tsgo --init to get the default tsconfig. Turn on these flags as well.
   • "allowJs": true,
   • "checkJs": true,
   • "stableTypeOrdering": true,
3. Add the below files. Run npx tsc & npx tsgo to see the difference.

/** ========> src/mainJs.js <======== */
import React from 'react';
import PropTypes from 'prop-types';

export class C1 extends React.Component {
    static propTypes = {
        text: PropTypes.string.isRequired,
    }

    state = { count: 0 };
}

export class C2 extends React.Component {
    static propTypes = {
        text: PropTypes.string.isRequired,
    }

    constructor() {
        super({});
        this.state = { count: 0 };
    }
}

/** ========> src/mainTs.ts <======== */
import React from 'react';
import PropTypes from 'prop-types';

export class C1 extends React.Component {
    static propTypes = {
        text: PropTypes.string.isRequired,
    }

    state = { count: 0 };
}

export class C2 extends React.Component {
    static propTypes = {
        text: PropTypes.string.isRequired,
    }

    constructor() {
        super({});
        this.state = { count: 0 };
    }
}

Behavior with typescript@6.0

/** ========> dist/mainJs.d.ts <======== */
export class C1 extends React.Component<any, any, any> {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    constructor(props: any);
    constructor(props: any, context: any);
    state: {
        count: number;
    };
}
export class C2 extends React.Component<any, any, any> {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    constructor();
    state: {
        count: number;
    };
}
import React from 'react';
import PropTypes from 'prop-types';

/** ========> dist/mainTs.d.ts <======== */
import React from 'react';
import PropTypes from 'prop-types';
export declare class C1 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    state: {
        count: number;
    };
}
export declare class C2 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    constructor();
}

Behavior with tsgo

/** ========> dist/mainJs.d.ts <======== */
import React from 'react';
import PropTypes from 'prop-types';
export declare class C1 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    state: {
        count: number;
    };
}
export declare class C2 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    constructor();
}

/** ========> dist/mainTs.d.ts <======== */
import React from 'react';
import PropTypes from 'prop-types';
export declare class C1 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    state: {
        count: number;
    };
}
export declare class C2 extends React.Component {
    static propTypes: {
        text: PropTypes.Validator<string>;
    };
    constructor();
}

[nikelborm]

Does typescript@6.0 actually add imports to the end of the file, like shown in your code snippet for dist/mainJs.d.ts? If so, this is VERY surprising.

made with https://semanticdiff.com/

[hkleungai]

Does typescript@6.0 actually add imports to the end of the file

No, I purposely name these files with js/ts suffix on purpose.

I am trying to show the transpiler doing different things on different file extensions. But since main.js and main.ts in src folder will always map to the same main.d.ts file, adding suffix manually to the source file name will help make it easier for myself to visualize for the situation.

[nikelborm]

No, I purposely name these files with js/ts suffix on purpose.

I'm not talking about suffixes, I mean import statements. In your 6.0 snippet

import React from 'react';
import PropTypes from 'prop-types';

is at the end of the file. My screenshot shows it as well: the blue line connecting the old place and the new one in tsgo

[hkleungai]

Ohh, that. I believe it is existing tsc behaviors on js file, before tsgo happens.