Parameter properties of imported TypeScript classes don't get set

Describe the bug Parameter properties of classes defined in TypeScript modules are accepted as valid syntax but don’t get set as expected. Instead, they remain undefined.

To Reproduce

File foo.stories.tsx:

import {Foo} from "./Foo";

const f = new Foo("foo");

File foo.tsx:

export class Foo {
    constructor(public state: string) {
        console.log("State before:", this.state);
        this.state = state;
        console.log("State after:", this.state);
    }
}

Expected behavior The console output should read

State before: "foo"
State after: "foo"

but in reality it is

State before: undefined
State after: "foo"

FWIW, if I don’t set this.state manually like I do above, it will remain undefined. (I.e., f.state in the story will also be undefined.) Also, if I move the class from foo.tsx to foo.stories.tsx, the issue will go away.

System

$ npx sb@next info

Environment Info:

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
  Binaries:
    Node: 14.15.4 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 6.14.10 - /usr/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
    Firefox: 85.0
  npmPackages:
    @storybook/addon-actions: ^6.1.16 => 6.1.16 
    @storybook/addon-essentials: ^6.1.16 => 6.1.16 
    @storybook/addon-links: ^6.1.16 => 6.1.16 
    @storybook/react: ^6.1.16 => 6.1.16 

Additional context This issue looks somewhat similar – maybe we’re looking at same cause here?

Post scriptum I’m new to Storybook, so I’m not sure what the state of the TypeScript support is. (This issue is saying that “Storybook is not meant to support TypeScript”, whereas the docs state that

Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.

So what is it?

Also, as I don’t want to run into similar issues in the future, can I somehow configure Storybook to use the TS compiler instead of Babel?

[fingerartur]

The issue is still present in "@storybook/react": "^6.3.4" would you consider increasing the priority on this? It can cause big problems for anybody using typescript.

PS: @duarten Great job with your workaround, thank you.

[duarten]

@Alecell you could filter the plugins array, but it’s probably simpler to just add the @babel/plugin-transform-typescript to the plugins, which is what I’m doing:

// main.js
babel: async options => ({
    ...options,
    presets: [
        ["@babel/preset-env", { shippedProposals: true }],
        "@babel/preset-typescript",
        ["@babel/preset-react", { runtime: "automatic" }],
    ],
    plugins: ["@babel/plugin-transform-typescript", ...options.plugins],
}),