• Migrating a Babel project to TypeScriptIf you’re building a web application today, you’re probably using the popular tool Babel to take advantage of the latest EcmaScript features (async/await, classes, destructuring, object spread, etc.) As your app grows, you might want better tooling to help with refactoring, autocompletion and possibly type…
• It was the case for us at Pleo, so we looked at switching from Babel to TypeScript.Progressive migrationOne major requirement we had before taking the leap was ensuring that we could slowly move towards TypeScript files but keep our existing JavaScript code without having to modify everything at once.
• We’ll set checkJs: false because we don’t want TypeScript to start type checking our JS files just yet.We’ll switch the babel-loader with a TypeScript loader (we chose awesome-typescript-loader) in our webpack configuration.
• You made it, babel is replaced with TypeScript!Converting files to TypeScriptNow that our development stack is ready, let’s take advantage of the great features of TypeScript.
• This means better autocompletion on props, and no runtime errors or warnings!With this file by file JS-TS migration we can now benefit from all the amazing features it has to offer like better code completions, strong type validations, go to definition and a lot more!

@palashv2: Migrating a Babel Project to TypeScript: #react #reactjs #angularjs #javascript #ui…

Migrating a Babel project to TypeScriptIf you’re building a web application today, you’re probably using the popular tool Babel to take advantage of the latest EcmaScript features (async/await, classes, destructuring, object spread, etc.) As your app grows, you might want better tooling to help with refactoring, autocompletion and possibly type safety. It was the case for us at Pleo, so we looked at switching from Babel to TypeScript.Progressive migrationOne major requirement we had before taking the leap was ensuring that we could slowly move towards TypeScript files but keep our existing JavaScript code without having to modify everything at once. Since TypeScript now supports transpiling JavaScript, we can do this easily!Making the switchTo get started today with TypeScript, we will setup our project and update our webpack configuration.We’ll start by installing typescript.npm install –save-dev typescriptTo setup the TypeScript compiler we’ll need to create a tsconfig.json. Here are the minimal required settings:The important part is allowJs: true because we’ll use TypeScript to transpile our JS files, just like Babel is doing. We’ll set checkJs: false because we don’t want TypeScript to start type checking our JS files just yet.We’ll switch the babel-loader with a TypeScript loader (we chose awesome-typescript-loader) in our webpack configuration. We’ll also add sourcemap-loader to keep our sourcemaps. We’ll add .ts and .tsx as extensions to be resolved, but we’ll keep .js and .jsx since we don’t want to migrate all of our files at once.Next, we install awesome-typescript-loader and sourcemap-loader.npm install –save-dev awesome-typescript-loader sourcemap-loaderAnd update our webpack.config.js file like this:We can now…