Adding Methods to Interfaces

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 43 of 73.

TypeScript interfaces allow you to define these behaviors by including method signatures alongside property definitions.

A method signature in an interface specifies the name of a method, its parameters, and its return type, without providing the actual implementation. This creates a contract that any object conforming to the interface must fulfill:

interface Person {
  name: string;
  age: number;
  greet(): string;  // Method signature
}

let user: Person = {
  name: "Alice",
  age: 30,
  greet() {
    return `Hello, I'm ${this.name}`;
  }
};

The method signature greet(): string tells TypeScript that any object implementing the Person interface must have a greet method that takes no parameters and returns a string. The actual implementation can vary between different objects, but the signature must match exactly.

Challenge

Easy

Create an interface named Calculator with the following properties and methods:

brand of type string
model of type string
isScientific of type boolean
add method that takes two number parameters and returns a number
getInfo method that takes no parameters and returns a string

Create an interface named BankAccount with the following properties and methods:

accountNumber of type string
balance of type number
isActive of type boolean
deposit method that takes a number parameter and returns void
getBalance method that takes no parameters and returns a number

Using your interfaces, create the following variables:

Create a variable named myCalculator of type Calculator with brand "Casio", model "FX-991EX", isScientific true, an add method that returns the sum of its two parameters, and a getInfo method that returns "[brand] [model]"
Create a variable named savingsAccount of type BankAccount with accountNumber "SAV-12345", balance 1500, isActive true, a deposit method that adds the parameter to the balance, and a getBalance method that returns the current balance

Print the following outputs on separate lines:

Call the getInfo method on myCalculator and print the result
Call the add method on myCalculator with arguments 15 and 27, and print the result
Call the getBalance method on savingsAccount and print the result
Call the deposit method on savingsAccount with argument 250
Call the getBalance method on savingsAccount again and print the result
Print the isScientific property of myCalculator

Try it yourself

// TODO: Write your code here
// Create the Calculator interface with the required properties and methods
// Create the BankAccount interface with the required properties and methods
// Create the myCalculator variable of type Calculator
// Create the savingsAccount variable of type BankAccount
// Print all the required outputs

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Introduction To TypeScript

3Data Structure: Arrays & Tuple

Typed Arrays 'readonly' Modifier for Arrays What is a Tuple?Declaring and Accessing Tuples Destructuring Tuples Readonly Tuples Multi-dimensional Typed Arrays Spread Operator with Arrays Recap: Arrays and Tuples

6Typing Objects and Interfaces

Inline Object Type Annotations Type Aliases for Objects Introduction to Interfaces Interfaces vs. Type Aliases Optional & Readonly Props Extending Interfaces and TypesAdding Methods to InterfacesRecap: Defining Object Shapes

9Generics: A First Look

The Problem Generics Solve Creating Generic Identity Func Using a Generic Function Generic Arrays Generic Interfaces Recap: Generic Function Prac