Phil Nash
4 Steps from JavaScript to TypeScript
#1about 4 minutes
Evaluating the pros and cons of TypeScript adoption
Consider the benefits of type safety and improved tooling against the costs of a learning curve and build overhead before migrating a project.
#2about 3 minutes
Step 1: Enable TypeScript type checking for JavaScript files
Use editor settings like `checkJs` or a `// @ts-check` comment to get immediate type feedback on your JavaScript code without any build changes.
#3about 5 minutes
Step 2: Introduce the TypeScript compiler with a minimal setup
Add TypeScript as a dependency and configure `tsconfig.json` with non-strict settings like `allowJs` to compile existing JavaScript without errors.
#4about 3 minutes
Step 3: Enable build-time type checking for JavaScript files
Activate `checkJs` in your `tsconfig.json` to enforce type safety during the build and install necessary `@types` packages for dependencies.
#5about 4 minutes
Leverage JS Doc for type safety in JavaScript
Add types to your JavaScript project using JS Doc comments, allowing TypeScript to provide strong typing without converting files to `.ts`.
#6about 5 minutes
Step 4: Incrementally convert JavaScript files to TypeScript
Gradually rename `.js` files to `.ts` one at a time, updating syntax from CommonJS to ES Modules and adding explicit types as you go.
#7about 2 minutes
Recap of the four-step JavaScript to TypeScript migration
Review the complete migration path, from enabling editor checks and introducing the compiler to incrementally converting files and adding types.
#8about 2 minutes
How to convince your team to adopt TypeScript
Demonstrate the value of TypeScript by enabling `checkJs` on an existing project to reveal hidden type-related issues as a practical proof point.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
32:12 MIN
Strategies for migrating large codebases to TypeScript
WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more
22:24 MIN
Why TypeScript is essential for building large applications
Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
29:20 MIN
Why readable code and developer happiness trumped TypeScript
Coffee with Developers: David Heinemeier Hansson
00:41 MIN
The benefits of using TypeScript with Svelte
Svelte ♥ TypeScript and so will you
03:20 MIN
Why JavaScript and TypeScript dominate modern development
Modern Headless Commerce with Vendure
38:46 MIN
Evaluating the strengths and limitations of TypeScript
Don't compromise on speedy delivery nor type-safety by choosing TypeScript
13:27 MIN
Why Microsoft is rewriting the TypeScript compiler in Go
WeAreDevelopers LIVE - the weekly developer show with Chris Heilmann and Daniel Cranney
02:09 MIN
Approaching the live pair programming challenge
Coffee with Developers - Jonathan Tang
Featured Partners
Related Videos
43:27Do TypeScript without TypeScript
Simone Sanfratello
37:18Building software that scales with Typescript
Tal Joffe
29:44Don't compromise on speedy delivery nor type-safety by choosing TypeScript
Jens Claes
48:56All you need is types
Tal Joffe
31:13Lies we Tell Ourselves As Developers
Stefan Baumgartner
29:30Where we're going we don't need JavaScript - Programming with Type Annotations
Peter Kröner
28:44Advanced Typing in TypeScript
Lars Hupel
28:20Svelte ♥ TypeScript and so will you
Ivan Hofer
From learning to earning
Jobs that call for the skills explored in this talk.
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
Frontend Developer (Angular)
Picnic Technologies B.V.
Amsterdam, Netherlands
Intermediate
Senior
CSS
RxJS
JavaScript
Fullstack TypeScript Developer - Angular / Node.js (remote)
PDR.cloud GmbH
Remote
Intermediate
CSS
RxJS
REST
Azure
+12