In TypeScript, interfaces can be thought of as customizable blueprints that define the shape of a particular set of data. They are analogous to the function of objects in JavaScript, playing a crucial role in ensuring the type safety of our application. With interfaces, we have an efficient way to describe complex data structures or even simple structures that have multiple types of parameters.

Being a statically typed super-set of JavaScript, TypeScript offers more in-depth type-checking and compile-time safety through interfaces. When an object defines its type according to an interface, any changes to this object that do not conform to the interface will trigger an error.

TypeScript enhances JavaScript objects by enforcing type safety, offering a clear structure and predictability in object creation and manipulation. An object in TypeScript is an instance that contains a set of key-value pairs, where keys are strings (or Symbols) and values can be of any type. The beauty of TypeScript comes from its ability to define these types explicitly or through interfaces, ensuring that objects adhere to a specific structure.

For instance, objects can be annotated directly with types:

TypeScript
Copy to clipboard
1let user: { name: string; age: number; } = {
2  name: "Alice",
3  age: 30,
4};

This object structure ensures that user always has a name of type string and an age of type number, offering compile-time type checking and intellisense benefits.

Defining TypeScript interfaces is straightforward. These interfaces enforce type checking on JavaScript objects. Here is an example:

TypeScript
Copy to clipboard
1interface Car {
2  color: string;
3  model: string;
4  manufacturer: string;
5}
6
7let car: Car = {
8  color: "red",
9  model: "sedan",
10  manufacturer: "Toyota",
11};
12console.log(car); // Outputs: {color: "red", model: "sedan", manufacturer: "Toyota"}

For every property in the interface, we use the property: type; line.

Data in typed objects can be accessed just like in regular JavaScript objects using either dot notation (object.property) or bracket notation (object["property"]). Here's an example:

TypeScript
Copy to clipboard
1console.log(car.color); // Outputs: "red"
2console.log(car["model"]); // Outputs: "sedan"

Dot notation directly accesses properties, while bracket notation is useful when variables or keys contain special characters or spaces.

Interfaces are used to enforce type safety, therefore, modifying or adding values depends on the properties defined within the interface:

TypeScript
Copy to clipboard
1car.color = "blue"; // changing the existing property value
2console.log(car.color); // Outputs: "blue"
3
4car.propellant = "electric"; // This would throw an error!
5console.log(car.propellant);

Attempting to add a new property that is not defined in the Car interface triggers an error because propellant is not specified in the Car interface.

Unlike JavaScript, TypeScript interfaces are static, meaning they do not allow the removal of properties. Once an interface is defined, its structure cannot be altered. However, optional properties can be defined:

TypeScript
Copy to clipboard
1interface Car {
2  color: string;
3  model: string;
4  manufacturer: string;
5  propellant?: string;
6}

Optional properties are denoted by ?.

Great job! You've learned the basics of TypeScript interfaces. Now, it's high time to apply these concepts to practice exercises. These exercises will solidify your understanding and prepare you for more in-depth topics. Let's move on to practice!