Skip to main content

js-to-typescript

A JS-to-TypeScript converter takes plain JavaScript code and rewrites it as TypeScript by adding type annotations — function parameter types, return types, variable types, JSDoc → TS type upgrades, and basic generic inference. Useful for incremental migration of legacy JS codebases to TS, learning TS by seeing how JS maps to typed equivalents, and one-off file conversions. The ZTools JS to TypeScript Converter uses TypeScript's own compiler API for inference, plus heuristics for tricky cases (callbacks, untyped object literals). Output isn't production-ready without review — manual type tightening is always required, but the converter saves 60–80% of the typing effort.

Use cases​

Legacy JS → TS migration​

A 10k-line JS codebase needs migration. Run files through the converter; review and tighten output. Saves weeks.

Learning TypeScript​

Paste familiar JS, see what TS would look like. Learn types by seeing them applied to your own code instead of contrived examples.

Sharing snippets in TS-only environments​

StackOverflow / blog post requires TS; you wrote in JS. Quick convert + manual polish.

JSDoc → real types​

Existing code has rich JSDoc. Tool converts @param \{string\} name to name: string. Native TS is more reliable for tooling.

How it works​

  1. Paste JS — ES6+ syntax. CommonJS, ES modules, browser globals all handled.
  2. Set strictness — Lenient (any where unclear) or strict (force explicit types).
  3. Convert — TypeScript compiler infers types from usage. JSDoc annotations promoted to TS types.
  4. Review — Output highlights inferred-as-any locations + suggests tightening. NEVER ship without manual review.
  5. Copy / download — .ts file ready for tsc compile.

Examples​

Input: function add(a, b) \{ return a + b; \}

Output: function add(a: number, b: number): number \{ return a + b; \} — types inferred from + operator usage.

Input: const fetchUser = async (id) => \{ ... \} with JSDoc @param \{string\} id

Output: const fetchUser = async (id: string): Promise<User> => \{ ... \} (with User interface inferred from return).

Input: JS callback arr.map(x => x * 2)

Output: TS: arr.map((x: number): number => x * 2) — types pulled from arr type.

Frequently asked questions​

Will it convert any JS?

Most. Edge cases: dynamic typeof patterns, runtime-built objects, prototype manipulation may need manual types. Plain functional code converts cleanly.

Is the output production-ready?

No — manual review is mandatory. Inferred types may be too loose (e.g. any[] where User[] is correct). Treat output as "85% of the way there".

JSDoc vs new TS types — which wins?

JSDoc upgraded to TS types. If both exist (rare), TS wins.

Will it preserve comments?

Yes — non-JSDoc comments preserved verbatim. JSDoc may be removed if its info is now redundant with the TS type.

Generics?

Some inferred for obvious cases (function identity<T>(x: T): T \{ return x; \}). Most generics need manual annotation.

React JSX → TSX?

Tool handles JSX → TSX conversion + adds prop types where it can infer.

Tips​

  • Always run tsc --strict after conversion — catches loose types the tool missed.
  • Tighten any to specific types in your review pass — that's where TS value comes from.
  • For file-by-file migration, set allowJs: true in tsconfig so JS and TS files coexist.
  • JSDoc-rich code converts much cleaner than untyped JS — invest in JSDoc before migrating.
  • For React, consider migrating components last — types propagate from leaf to root.

Try it now​

The full js-to-typescript runs in your browser at https://ztools.zaions.com/js-to-typescript — no signup, no upload, no data leaves your device.

Open the tool ↗

Last updated: 2026-05-06 · Author: Ahsan Mahmood · Edit this page on GitHub