> Markdown version of [/videos/646-4-steps-from-javascript-to-typescript?t=0](https://www.wearedevelopers.com/videos/646-4-steps-from-javascript-to-typescript?t=0). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# 4 Steps from JavaScript to TypeScript

Transition your legacy JavaScript to TypeScript without breaking the build. Learn a proven four-step strategy to incrementally unlock type safety and immediate developer productivity.

- **Speakers:** Phil Nash
- **Event:** World Congress 2023
- **Published:** August 11, 2023
- **Duration:** 32:28
- **URL:** https://www.wearedevelopers.com/videos/646-4-steps-from-javascript-to-typescript

## Summary

Transitioning an existing JavaScript codebase to TypeScript delivers essential benefits like type safety and robust IDE auto-completion, but a rapid overhaul often introduces friction, build overhead, and a steep learning curve. Instead of an abrupt rewrite, engineering teams can adopt an incremental, four-step migration strategy that minimizes disruption while unlocking immediate developer productivity. The migration begins at the editor level by enabling background type-checking for standard JavaScript files. By setting checkJs globally in IDEs like VS Code, developers immediately reveal hidden type mismatches without modifying the build pipeline. From there, the TypeScript compiler can be safely integrated into the CI/CD pipeline by initializing a tsconfig.json with allowJs enabled and both strict mode and checkJs disabled. This establishes the compiler's generation step without failing existing legacy code. Once the compiler handles code outputs seamlessly, teams can activate internal static checking alongside community-maintained type definitions. Engineers can bridge the transition gap using standard JSDoc comments to document structures and enforce parameter contracts before writing a single line of actual TypeScript. While static types heavily enhance structural confidence, they do not replace rigorous business logic testing. The final transition stage involves renaming JavaScript files to TypeScript starting from application leaf nodes, migrating CommonJS requires to ES module imports, and systematically enabling compatibility flags like strictNullChecks. For engineering leads facing pushback, simply auditing an existing JavaScript repository with checkJs activated often provides transparent proof of hidden runtime errors, effortlessly demonstrating the value of gradual type adoption.

**Keywords:** javascript to typescript migration, incremental static typing, typescript compiler setup, tsconfig configuration, vs code checkjs settings, jsdoc type annotations, commonjs to es modules, strict null checks enforcement, at-types dependencies, legacy javascript refactoring, statically typed applications, codebase type safety

## Chapters

1. **Evaluating benefits and trade-offs of using TypeScript** (00:00) — Type safety and advanced tooling improve code reliability but introduce learning curves and compilation overhead.
1. **Enabling local type checking via editor settings** (07:13) — Activating local type checking in editor settings reveals existing errors before making project-wide changes.
1. **Configuring the TypeScript compiler without type checking** (11:53) — Adjusting compiler options allows existing JavaScript files to pass through the build pipeline without strict failures.
1. **Activating project checks and resolving third-party module types** (17:07) — Enabling global checking rules surfaces missing type definitions that require installing external packages from definitely typed.
1. **Generating types natively in JavaScript using JSDoc** (20:31) — Documenting variables and functions with structured comments provides immediate type inference without requiring file format conversions.
1. **Migrating individual files to native TypeScript syntax** (23:55) — Converting files gradually simplifies managing module updates while slowly enabling strict mode compiler checks globally.
1. **Summary of migration steps and building team consensus** (28:31) — Reviewing the migration framework helps developers outline the process and demonstrate direct architectural value to peers.

## Related Moments

- [The origins and early problems solved by TypeScript](https://www.wearedevelopers.com/videos/100061-typescript-features-that-changed-the-game) (from "TypeScript Features That Changed the Game")
- [Exploring the benefits of type safety and TypeScript migration](https://www.wearedevelopers.com/videos/1302-wearedevelopers-live-dishonest-charts-britcss-debugging-with-ai) (from "WeAreDevelopers LIVE - Dishonest Charts, BritCSS, Debugging with AI")
- [Safely migrating legacy JavaScript codebases to strict TypeScript](https://www.wearedevelopers.com/videos/1306-wearedevelopers-live-whats-nuxt-and-next-for-app-development-20-years-ajax-and-more) (from "WeAreDevelopers LIVE - Whats Nuxt and Next for app development, 20 years AJAX and more")
- [Evaluating TypeScript benefits and project drawbacks](https://www.wearedevelopers.com/videos/327-do-typescript-without-typescript) (from "Do TypeScript without TypeScript")
- [Deciding when to adopt or avoid TypeScript](https://www.wearedevelopers.com/videos/127-vuejs-and-typescript-working-together-like-peanut-butter-and-jelly) (from "Vuejs and TypeScript- Working Together like Peanut Butter and Jelly")
- [Gaining TypeScript benefits using JSDoc alternatives](https://www.wearedevelopers.com/videos/327-do-typescript-without-typescript) (from "Do TypeScript without TypeScript")

## Related Articles

- [Exploring TypeScript: Benefits for Large-Scale JavaScript Projects](https://www.wearedevelopers.com/magazine/554-exploring-typescript-benefits-for-large-scale-javascript-projects)
- [What is TypeScript?](https://www.wearedevelopers.com/magazine/47-what-is-typescript)
- [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine)
- [Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview](https://www.wearedevelopers.com/magazine/563-dev-digest-159-ai-pipelines-10x-faster-typescript-how-to-interview)

## Related Jobs

- [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Agile Full Stack Engineer](https://www.wearedevelopers.com/jobs/48325-agile-full-stack-engineer) at **synava GmbH**
- [Senior Full Stack Engineer](https://www.wearedevelopers.com/jobs/48289-senior-full-stack-engineer) at **Sensory-Minds GmbH**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer Frontend (all genders welcome) in the field of Water Line Integrity Solutions](https://www.wearedevelopers.com/jobs/ext/127888-software-engineer-frontend-all-genders-welcome-in-the-field-of-water-line-integrity-solutions) at **Rosenxt Group**