Introduction to TypeScript

Learning Goals

• Understand what TypeScript is and how it compares to JavaScript
• Learn the benefits of using TypeScript in development
• Get familiar with TypeScript’s type system, including basic types, functions, and interfaces
• Understand how TypeScript can help prevent common JavaScript errors

Vocab

• TypeScript: A typed superset of JavaScript that compiles to plain JavaScript.
• Static Type Checking: The process of verifying the type correctness of a program at compile-time.
• Transpiling: The process of converting TypeScript code into JavaScript code.
• Type Annotation: A way to explicitly declare the type of a variable or function parameter.
• Interface: A TypeScript structure that defines the shape of an object, specifying its properties and their types.

Introduction to TypeScript

TypeScript is a superset of JavaScript that introduces static type definitions. This means that TypeScript code must be transpiled into JavaScript before it can be executed by a browser or Node.js. TypeScript provides all the features of JavaScript but adds optional static typing, which can help catch errors early in the development process.

Why Use TypeScript?

1. Type Safety: TypeScript’s type system helps catch type-related errors at compile time, rather than at runtime.
2. Enhanced IDE Support: With TypeScript, you get better code completion, navigation, and refactoring support.
3. Better Documentation: Types serve as documentation, making it easier to understand and use code written by others.
4. Scalability: TypeScript is particularly useful for large codebases, where it can help manage complexity.

Comparing JavaScript and TypeScript

JavaScript is dynamically typed, meaning variable types are determined at runtime. TypeScript, on the other hand, allows for static type checking, where types are checked at compile-time.

let greeting = "Hello, world!";
greeting = 42; // No error in JavaScript, but might cause issues later
console.log(greeting); // Outputs: 42

let greeting: string = "Hello, world!";
greeting = 42; // Error in TypeScript
console.log(greeting); // Outputs: 42

Type Annotations

TypeScript allows you to annotate variables with types including all of the standard data types you have used in JavaScript like strings, numbers, booleans, arrays, and objects. This helps catch type errors at compile time.

Here are some examples of type annotations in TypeScript:

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;
let hobbies: string[] = ["reading", "hiking"];
let person: { name: string; age: number } = { name: "Bob", age: 30 };

let title = "TypeScript Basics";
let duration = 60;
let isComplete = false;

let score: number = "high";

let id: any = 101;
id = "E101"; // No error

Union Types

In addition to type annotation, TypeScript also supports union types. Union types allow a variable to hold more than one type. Let’s take a look at an example:

let id: number | string;
id = 101; // Valid
id = "E101"; // Also valid

In this example, the id variable can be either a number or a string. This can be great for when you want to store different types in a single variable.

TypeScript with Functions

TypeScript also allows you to specify the types of function parameters and return values. Let’s take a look at an example:

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

let sum = add(5, 10); // Correct usage
let result = add("5", 10); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

Note that in the above TypeScript function add, we are defining a function that takes two parameters, a and b, both of which are of type number. The function is also specified to return a value of type number. If we try to pass in a string for the second parameter, TypeScript will throw an error.

function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}!`;
}

console.log(greet("Alice"));
console.log(greet("Bob", "Hi"));

Interfaces

Interfaces in TypeScript define the shape of an object. They specify what properties an object should have and their types.

interface Person {
  name: string;
  age: number;
}

let student: Person = {
  name: "John",
  age: 21
};

Complex Interface Example

In TypeScript, interfaces can be used to define more complex objects that include nested properties and arrays. Let’s consider an example of an interface for a Course object that includes details about the course, the instructor, and the list of students enrolled.

interface Course {
  title: string;
  details: {
    description: string;
    duration: number;
  };
  instructor: string;
  students: string[];
}

let course: Course = {
  title: "TypeScript Basics",
  details: {
    description: "A course that introduces TypeScript",
    duration: 60
  },
  instructor: "John Doe",
  students: ["Alice", "Bob"]
};

Here is what is happening in the above example:

• The Course interface defines the shape of a Course object. It includes properties for the title, details, instructor, and students.
• The details property is an object that contains the description and duration of the course.
• The students property is an array of strings that represent the names of the students enrolled in the course.

The above example is a simple example of an interface. In a real-world application, you might have additional interfaces for an Instructor and a Student.

interface Student {
  name: string;
  courses: string[];
}

let student: Student = {
  name: "Alice",
  courses: ["TypeScript Basics", "Advanced TypeScript"]
};

interface Instructor {
  name: string;
  courses: string[];
}

let instructor: Instructor = {
  name: "Jane Eyre",
  courses: ["TypeScript Basics", "Advanced TypeScript"]
};

interface Course {
  title: string;
  details: {
    description: string;
    duration: number;
  };
  instructor: string;
  students: string[];
}

interface AdvancedCourse extends Course {
  isAdvanced: boolean,
  prerequisites: string[],
}

let advancedCourse: AdvancedCourse = {
  title: "Advanced TypeScript",
  details: {
    description: "A course that introduces advanced TypeScript concepts",
    duration: 90
  },
  instructor: "Jane Doe",
  students: ["Charlie", "Dave"],
  isAdvanced: true,
  prerequisites: ["TypeScript Basics"]
};

Conclusion

TypeScript offers powerful tools to write safer and more robust code compared to JavaScript. By understanding and using its type system, interfaces, and advanced features like generics, developers can catch errors early, improve code readability, and manage large codebases more effectively.

• TypeScript Handbook
• TypeScript Playground
• TypeScript for Beginners