FEWV minutes of TypeScript Interfaces

» What are Interfaces?

1. In TypeScript, an interface is a way to define a shape of an object.

2. It’s a TypeScript specific concept that allows us to define the structure of an object, including its properties and methods, without actually implementing them.

3. Interfaces can be used to describe the types of objects, functions, or classes.

4. They provide a way to specify the expected shape of an object, and TypeScript can use this information to check that an object conforms to the interface.

5. Interface are defined using interface keyword followed by it’s name.

6. Let’s understand Interfaces with example:

interface Person {
  firstName: string;
  lastName: string;
}

7. In this example, we define an interface named “Person” that specifies two properties: firstName and lastName, both of type string.

8. We can use this interface to define objects that conform to this interface, Like this:

const person1: Person = {
  firstName: "John",
  lastName: "Doe",
};

9. Here, we create an object person1 that conforms to the Person interface. It has the required properties.

» Error in Interface

10. If we try to create an object that does not conform to the Person interface, TypeScript will raise a compilation error.

const person2: Person = {
  firstName: "Jane",
};
// Property 'lastName' is missing in type '{ firstName: string; }' but required in type 'Person'.

11. In the above example, person2 is an object which only has firstName as its property but person2 is requried to have firstName and lastName as its properties.

12. And if we try to add other property which is not in interface, TypeScript will also throw an error.

interface Person {
  firstName: string;
  lastName: string;
}

const person3: Person = {
  firstName: "Miles",
  age: 25,
};

// Type '{ firstName: string; age: number; }' is not assignable to type 'Person'.
// Object literal may only specify known properties, and 'age' does not exist in type 'Person'.

13. Here in above example, in object person3 we have a additional property of age, and person3 does not conform to Person interface.

» Optional Properties in Interafce

1. In TypeScript, we can define optional properties in an interface by using the question mark (?) operator.

2. To define an optional property, add the question mark (?) character after the property name in the interface declaration.

3. For example:

interface Book {
  title: string;
  pages?: number;
}

4. In the above example, the pages property is optional, meaning that it can be present or absent in objects that implement the Person interface.

5. For Example: If pages property is present, its alright.

const book: Book = {
  title: "Harry Potter",
  pages: 300,
};
//Ok

6. If pages property is absent, then also its Ok.

const book2: Book = {
  title: "80,000 Hours",
};
//Ok

» Read-Only Properties in Interface

1. In TypeScript, we can define read-only properties in an interface by using the readonly keyword.

2. To define a read-only property, add the readonly keyword before the property name in the interface declaration.

3. We may sometimes want to block user from reassigning properties of object, so TypeScript allows us to add a readonly modifier before property name, so that that propety should not be set to a different value.

4. For Example:

interface Car {
  readonly model: string;
  year: number;
}

5. In the above example, the model property is read-only, meaning that it can only be set when the object is created and cannot be changed afterwards.

» Combining both optional and read-only properties.

1. We can also combine both optional and read-only properties in an interface. Like this:

interface Book {
  title: string;
  readonly author: string;
  publishedDate?: Date;
}

2. In the above example, the author property is read-only and the publishedDate property is optional.

» Interface members as Functions.

1. In TypeScript, you can define interface members as functions using either the property syntax or the method syntax.

» 1. Property Syntax

1. Using the property syntax, we can define a function as a property of the interface. The function should have a signature that includes the input parameters and the return type. Here’s an example:

interface MyInterface {
  myFunction: (param1: number, param2: string) => boolean;
}

2. In this example, the MyInterface interface defines a property myFunction that takes two input parameters, a number and a string, and returns a boolean value.

» 2. Method Syntax

1. Using the method syntax, we can define a function as a method of the interface. The function should have a signature that includes the input parameters and the return type, and should be defined within a method declaration. Here’s an example:

interface MyInterface {
  myMethod(param1: number, param2: string): boolean;
}

2. In this example, the MyInterface interface defines a method myMethod that takes two input parameters, a number and a string, and returns a boolean value.

3. Both the property syntax and the method syntax can be used to define functions within an interface in TypeScript. The choice between the two will depend on the specific use case and design of our application.

» Difference between Method and Property declarations.

1. Methods cannot be declared as readonly; properties can.

2. We can use any of the way to define a function, it does not affect our code.

» Extending Interfaces

1. In TypeScript, interfaces can be extended using the extends keyword. This allows us to create new interfaces that inherit properties and methods from existing interfaces.

2. Here’s an example of extending an interface:

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

interface Dog extends Animal {
  breed: string;
}

3. In the above example, the Dog interface extends the Animal interface, which means that the Dog interface inherits the name, age from the Animal interface. The Dog interface also adds a new property breed.

4. To use the Dog interface, we can create an object that implements the Dog interface, Like this:

const myDog: Dog = {
  name: "Rio",
  age: 3,
  breed: "Lab",
};

5. In this example, the myDog object implements the Dog interface, which means it must have all the properties and methods defined in the Dog interface, as well as the properties and methods inherited from the Animal interface.

I hope this cleared - Interface in TypeScript and its various properties. Thank You!!😊