Classes in TypeScript: User and Expense
TypeScript Classes#
A class is an object-oriented programming (OOP) concept that allows for the instatiation (or creation) of objects. In TypeScript, the name of a class is the name of the default constructor (the function called when creating objects of the class) as well as the name of the type of the objects that are created by the constructor.
In the example below, we declare a class User
containing two public properties and one public method:
class User {
name: string; // public property
age: number; // public property
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
// public method
printUserInfo() {
console.log(`name: ${this.name}, age: ${this.age}`);
}
}
The User
constructor takes two parameters: name
and age
. The type of the parameters has to match the given signature or we'll get an error from the TypeScript compiler. The signature of a function consists of the function name, parameter names, parameter types, and function return type. Below we show correct and incorrect usage of our User
class:
let mike: User; // mike is type User
mike = new User(); // Error: constructor needs 2 parameters
mike = new User(1, 2); // Error: first parameter should be type string
mike = new User('Michael', 32); // OK
mike.printUserInfo(); // name: Michael, age: 32
mike.name; // 'Michael'
mike.age; // 32
Notice we set the type of mike
to be User
. By doing so, we get type checking for the public properties and methods defined in the User
class.
A common pattern that we'll use in FinanceMe is to set internal class properties to private so they are not accessible outside of the class. In order to access the properties, methods are defined for retrieving and updating those properties:
class User {
private name: string;
private age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
getName() {
return this.name;
}
getAge() {
return this.age;
}
printUserInfo() {
console.log(`name: ${this.name}, age: ${this.age}`);
}
}
const katie = new User('Katherine', 35);
katie.name; // Error: 'name' is a private property
katie.age; // Error: 'age' is a private property
katie.getName(); // 'Katherine'
katie.getAge(); // 32
Methods that retrieve properties are conventionally called getters while methods that update properties are called setters.
Here we are referencing the language-agnostic concept of setters and getters and not the JavaScript feature that uses the
get
andset
keywords for intercepting property access/updates in classes.
We dive further into classes and object-oriented patterns later in the book.
Expense Class#
Now that we have a basic understanding of classes in TypeScript, we can implement our first class, Expense
.
The Expense
class is responsible for representing an expense, which consists of four things:
A label
An amount
A date
A unique ID
The label, amount, and date will be passed to the Expense constructor when creating new Expense
objects. The unique ID will not be passed to the constructor. Instead, we will assign each Expense
object a unique ID upon creation.
This page is a preview of Beginners Guide to TypeScript