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?
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 ?
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.
If you're coming here from the future, checkout the great razzle-supported typescript plugin here.
Most helpful comment
Figured it out!
npm i -D @babel/preset-typescript ts-loader typescript
Add
@babel/typescript
to .babelrcAdd this to razzle.config.js
Create a tsconfig.json
That's it, now you can rename extensions to .ts and .tsx to enable typescript for those files.