In this note, we’ll cover the basics of TypeScript, including variables and types, functions, object-oriented programming, and more.
In TypeScript, you can declare variables using let and const keywords, similar to modern JavaScript. TypeScript extends JavaScript’s variable types. You assign types to variables using the : syntax.
let username: string = 'John Doe';
let age: number = 30;
let isSubscriber: boolean = true;If you try to assign a value of a different type to a variable, TypeScript will throw an error.
Notice the syntax for defining types after the variable name. This is called Type Annotations. It involves specifying the type of a variable after its name using a colon (:).
TypeScript offers several basic types that cover the majority of use cases:
Number: Represents numeric values.
let age: number = 25;String: Represents sequence of characters.
let name: string = 'John';Boolean: Represents true or false.
let isHappy: boolean = true;Any: Represents any type, a way to opt-out of type-checking.
let item: any = { id: 1, name: 'Item' };Beyond basic types, TypeScript offers advanced types to handle more complex scenarios:
We will cover these advanced types in more detail in subsequent notes.
TypeScript uses type annotations to explicitly specify the type of a variable, and type inference when the type is implied by the value it is assigned. When you don’t specify a type, TypeScript will infer it based on the initial value.
let age = 30; // TypeScript infers the type as number
let name: string = 'John'; // Explicit type annotation as stringIn TypeScript, you can specify the types of parameters and the return type of a function, enhancing reliability and readability:
function greet(name: string): string {
return `Hello, ${name}!`;
}In this function, name is expected to be a string, and the function is expected to return a string.
Pay attention to the syntax for defining types for parameters and return values. The syntax is similar to defining types for variables. Here is the same function in arrow function syntax:
const greet = (name: string): string => `Hello, ${name}!`;TypeScript allows function parameters to be optional by appending a ? to the parameter name. You can also assign default values to parameters, which will be used if no value is provided for that parameter.
function greet(name: string = 'Guest', age?: number): string {
return `Hello, ${name}! ${age ? `I see you're ${age}.` : ''}`;
}In this example, name is a required parameter with a default value of 'Guest', and age is an optional parameter.
TypeScript supports object-oriented programming concepts such as classes, interfaces, inheritance, access modifiers, and polymorphism. Let’s explore these concepts briefly!
Interfaces in TypeScript are used to define the structure of an object, acting like a contract that specifies the properties and methods that a class must have.
interface Person {
name: string;
age: number;
greet(): void;
}Notice the syntax for defining interfaces. They are similar to defining objects but without values. Moreover, each property or method is followed by a colon and its type. You must use semicolons to separate properties and methods.
Interfaces can extend other interfaces to inherit their properties and methods:
interface Employee extends Person {
position: string;
}Interfaces can be implemented by classes to ensure they adhere to a specific structure.
Classes in TypeScript are blueprints for creating objects. Here is an example of a simple class:
class User {
constructor(public name: string) {}
greet() {
console.log(`Hi, I am ${this.name}!`);
}
}Classes can implement interfaces to ensure they adhere to a certain structure.
class User implements Person {
constructor(public name: string, public age: number) {}
greet() {
console.log(`Hi, I am ${this.name}, ${this.age} years old`);
}
}A class can have a constructor method that initializes the object’s properties. The public keyword in the constructor parameters automatically creates and initializes properties with the same name.
Access modifiers control the accessibility of the members of a class. The three access modifiers in TypeScript are:
class User {
private password: string;
constructor(public username: string, password: string) {
this.password = password;
}
}Inheritance is a fundamental concept of Object-Oriented Programming that allows one class (subclass or derived class) to inherit properties and methods from another class (base or super class). Inheritance allows for code reusability and can establish a relationship between the parent and the child class.
Here is a simple example in TypeScript, where the Dog class inherits from the Animal class:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance} meters.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog('Buddy');
dog.bark(); // Output: Woof! Woof!
dog.move(10); // Output: Buddy moved 10 meters.Polymorphism is another core principle of Object-Oriented Programming in TypeScript, allowing methods to do different things based on the object it is acting upon. In simple words, polymorphism allows one interface to be used for different data types.
Here is an example of polymorphism in TypeScript, where the makeSound method behaves differently for instances of the Dog and Cat classes, even though they share the same interface:
interface Animal {
makeSound(): void;
}
class Dog implements Animal {
makeSound() {
console.log('Woof! Woof!');
}
}
class Cat implements Animal {
makeSound() {
console.log('Meow! Meow!');
}
}
const myAnimal: Animal = new Dog();
myAnimal.makeSound(); // Output: Woof! Woof!
const anotherAnimal: Animal = new Cat();
anotherAnimal.makeSound(); // Output: Meow! Meow!In this example, both Dog and Cat classes implement the Animal interface but provide different implementations for the makeSound method, demonstrating polymorphism.
You might have noticed that TypeScript syntax is similar to Java or C++. Recognizing these similarities can help you leverage your knowledge of other languages when working with TypeScript. However, while there are many similarities, TypeScript is still JavaScript under the hood. Understanding the differences and nuances between TypeScript and those traditional object-oriented programming languages will help you write more effective TypeScript code.
I recommend reading the official TypeScript documentation on TypeScript for Java/C# Programmers for a more in-depth comparison.