Introduction to TypeScript

Learning objectives#

• Explain what TypeScript adds to JavaScript
• Understand that types are checked at compile time and removed at runtime
• Read a simple type annotation
• Know where TypeScript is used

Explanation#

TypeScript (TS) is a superset of JavaScript made by Microsoft: every valid JavaScript file is already valid TypeScript. TS adds one thing on top — types.

A type describes what a value can be: a number, a string, an object with certain properties. You write it after a colon: let age: number = 25.

The TypeScript compiler (tsc) checks your code and then removes all the types, producing plain JavaScript that runs anywhere JavaScript runs. Types cost nothing at runtime.

The big win is feedback while you type: your editor underlines a typo in a property name, a missing argument or a possible undefined before you even save the file. Autocomplete becomes far smarter too.

Syntax#

1let name: string = 'Asha';
2function add(a: number, b: number): number { return a + b; }

Code example: A bug JavaScript misses, TypeScript catches#

1interface User {
2  name: string;
3  email: string;
4}
5

6function sendWelcome(user: User): string {
7  return `Welcome, ${user.name}! We sent a mail to ${user.emial}`;
8  //                                                   ~~~~~
9  // ✗ Error: Property 'emial' does not exist on type 'User'. Did you mean 'email'?
10}
11

12sendWelcome({ name: 'Asha' });
13//          ~~~~~~~~~~~~~~~~
14// ✗ Error: Property 'email' is missing in type '{ name: string; }'

The code does not compile. TypeScript reports both bugs — the misspelled property and the missing email — before the code ever runs. Plain JavaScript would have printed “…mail to undefined”.

This example is illustrative. Copy or download it and run it in your own environment; the expected output is shown above.

Step-by-step explanation#

1. interface User describes the shape of a user object.
2. user: User says the function expects exactly that shape.
3. : string after the parentheses says the function returns a string.
4. The typo user.emial is caught because User has no such property.
5. The call is caught because the object is missing email.

Real-world use case#

Common mistakes#

Best practices#

• Start new projects in TypeScript with strict mode on
• Let your editor (VS Code) show errors as you type
• Add types at boundaries: function parameters, API responses, props
• Learn to read error messages — they usually say exactly what is wrong

Remember this#

Practice exercise#

1function area(width: number, height: number): number {
2  return width * height;
3}
4area(5, 4);        // ✓ 20
5area('5', 4);      // ✗ Argument of type 'string' is not assignable to parameter of type 'number'

Mini quiz#

Want more? Practise all TypeScript MCQs · TypeScript interview questions

Related topics#

My notes#

Saved in this browser.