From JavaScript to TypeScript: Project Setup, Compiler and a Safe First Migration

1. Start with JavaScript that already works

export function fullName(user) {
  return `${user.firstName} ${user.lastName}`;
}

export function ageNextYear(user) {
  return user.age + 1;
}

2. Add TypeScript locally

npm install --save-dev typescript
npx tsc --init

3. Understand tsc versus Babel

Some build tools can strip TypeScript syntax without doing a full type check. Keep a dedicated type-check command in CI when your bundler is not using tsc for that responsibility.

4. Rename one file, then type the inputs

type User = {
  firstName: string;
  lastName: string;
  age: number;
};

export function fullName(user: User) {
  return `${user.firstName} ${user.lastName}`;
}

export function ageNextYear(user: User) {
  return user.age + 1;
}

5. Turn on useful strictness

{
  "compilerOptions": {
    "strict": true,
    "noEmit": true,
    "target": "ES2022",
    "module": "ESNext"
  }
}

6. Replace any with a real decision

7. Runtime data needs runtime checks

function isUser(value: unknown): value is { name: string; age: number } {
  if (!value || typeof value !== 'object') return false;
  const item = value as Record<string, unknown>;
  return typeof item.name === 'string' && typeof item.age === 'number';
}

const data: unknown = await response.json();
if (!isUser(data)) throw new Error('Invalid user response');

8. Migrate boundaries before internals

1. 1
   API models

   Type request and response shapes first.

2. 2
   Shared domain objects

   Users, products, payments, exam records.

3. 3
   Utility functions

   Small functions are easy to migrate and test.

4. 4
   UI components

   Move props and state once shared data types are stable.

5. 5
   Strictness cleanup

   Reduce casts and temporary any types after the app compiles.

9. Let JavaScript and TypeScript coexist when needed

TypeScript can support gradual adoption. In large systems, a mixed period can be healthier than a big-bang rewrite. Use allowJs/checkJs deliberately if it fits your build, and keep the migration plan visible.

10. Migration checklist

KEEP READING

You can also read

Suggestions use topic similarity, and — when you enable it — your reading history stored only on this device.

ProgrammingTypeScript in Minutes: Types, Functions, Classes and Interfaces8 min read →ProgrammingC Programming from Scratch: A Beginner Roadmap from Variables to Pointers15 min read →ProgrammingHow to Learn Coding in the AI Era Without Skipping the Fundamentals9 min read →ProgrammingHow to Get Better at Programming: A Practical Practice System9 min read →GCE Study GuideCameroon GCE Past Papers: A Complete O-Level and A-Level Study Guide15 min read →