Migrating to Typescript

[krazyjakee]

I have a large project and wish to start migrating to Typescript one component at a time.

I have tried --with-typescript but that requires me to rename all files at once. I would like to convert slowly ensuring that unconverted files keep their initial extension while new files adopt typescript file extensions.

How do I go about this in razzle?

[frosato-dev]

Hey, I'm also facing a hard time trying to make the with-typescript example work with jsx files to allow progressive migration of existing projects.
Does anyone have an idea of how to archive this goal ?

[krazyjakee]

Figured it out!

npm i -D @babel/preset-typescript ts-loader typescript

Add @babel/typescript to .babelrc

"presets": [
    "razzle/babel",
    "@babel/typescript"
]

Add this to razzle.config.js

config.resolve.extensions = config.resolve.extensions.concat(['.ts', '.tsx']);
config.module.rules.push({ test: /\.tsx?$/, loader: 'ts-loader' });

Create a tsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true,
        // Target latest version of ECMAScript.
        "target": "esnext",
        // Search under node_modules for non-relative imports.
        "moduleResolution": "node",
        // Process & infer types from .js files.
        "allowJs": false,
        // Enable strictest settings like strictNullChecks & noImplicitAny.
        "strict": false,
        // Disallow features that require cross-file information for emit.
        "isolatedModules": true,
        // Import non-ES modules as default imports.
        "esModuleInterop": true,
        "jsx": "react"
    },
    "include": [
        "src"
    ],
    "exclude": [
        "node_modules",
    ]
}

That's it, now you can rename extensions to .ts and .tsx to enable typescript for those files.

[inkblotty]

If you're coming here from the future, checkout the great razzle-supported typescript plugin here.