Lære Interfaces and Structural Typing | Migrating and Integrating TypeScript in Real Projects

Understanding how to use interfaces is essential for writing robust and maintainable TypeScript code. Interfaces in TypeScript allow you to define a contract for the shape of objects and classes, ensuring that any implementation adheres to a specific structure. This concept is closely tied to structural typing, which means that TypeScript checks types based on their actual structure and properties, not just their names.

An interface in TypeScript describes the expected properties and types an object should have. Unlike type aliases, which can represent any type (including primitives, unions, or intersections), interfaces are specifically designed to describe the shape of objects and can be extended or implemented by classes. This makes interfaces especially useful for defining contracts that multiple objects or classes must follow.

Consider a situation where you want to enforce a certain structure for a configuration object passed to a function. By defining an interface, you can ensure that only objects with the required properties and types are accepted.


              123456789101112131415161718
            
interface ConfigOptions {
  url: string;
  timeout: number;
  retries?: number; // Optional property
}

function initialize(config: ConfigOptions) {
  console.log(`Connecting to ${config.url} with timeout ${config.timeout}`);
  if (config.retries) {
    console.log(`Retries allowed: ${config.retries}`);
  }
}

// Valid usage:
initialize({ url: "https://api.example.com", timeout: 5000, retries: 3 });

// Invalid usage (will cause a TypeScript error):
// initialize({ url: "https://api.example.com" }); // missing timeout

In this example, the ConfigOptions interface defines the required and optional properties for a configuration object. The initialize function enforces that only objects matching this structure can be passed in, helping you catch errors at compile time.

Interfaces become even more powerful in real-world scenarios where you need to enforce consistency across multiple modules. Suppose you are integrating with various payment gateways in your application and want to ensure that all gateway configurations follow the same contract.


              1234567891011121314151617181920212223242526
            
// paymentGatewayConfig.ts
export interface PaymentGatewayConfig {
  apiKey: string;
  endpoint: string;
  currency: string;
  sandboxMode?: boolean;
}

// stripeModule.ts
import { PaymentGatewayConfig } from "./paymentGatewayConfig";

const stripeConfig: PaymentGatewayConfig = {
  apiKey: "sk_test_123",
  endpoint: "https://api.stripe.com",
  currency: "USD",
  sandboxMode: true
};

// paypalModule.ts
import { PaymentGatewayConfig } from "./paymentGatewayConfig";

const paypalConfig: PaymentGatewayConfig = {
  apiKey: "api_paypal_456",
  endpoint: "https://api.paypal.com",
  currency: "EUR"
};

By defining the PaymentGatewayConfig interface, you guarantee that all payment gateway modules adhere to the same configuration structure. This reduces bugs, improves code readability, and makes refactoring or integrating new gateways much easier.

You might wonder when to use interfaces and when to use type aliases, since both can describe object shapes. The main difference is that interfaces are specifically designed for object contracts and can be extended or implemented, while type aliases are more flexible and can represent any type, including unions and intersections.

Study More

Study more: Use interfaces when you want to define contracts for object shapes or class implementations, especially when you plan to extend or implement them across your codebase. Use type aliases for more complex type compositions, such as unions, intersections, or when working with primitives.

1. What is the main purpose of an interface in TypeScript?

2. How does structural typing work in TypeScript?

Var alt klart?

Tak for dine kommentarer!

Sektion 2. Kapitel 3

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain the difference between interfaces and type aliases in more detail?

How do I extend an interface in TypeScript?

Can you show an example of a class implementing an interface?

Awesome!

Completion rate improved to 7.14

Stryg for at vise menuen