TypeScript 인터페이스 마스터하기: 실제 사례가 포함된 종합 가이드

TypeScript에서 인터페이스는 객체의 모양을 정의하는 데 사용되는 강력한 도구입니다. 유형 검사를 시행하여 생성한 객체가 특정 구조를 준수하는지 확인합니다. 인터페이스가 일반적으로 사용되는 다양한 사례와 예를 살펴보겠습니다.

1. 객체 모양 정의

인터페이스는 객체의 구조를 정의하는 데 자주 사용됩니다. 이렇게 하면 인터페이스에 부착된 모든 개체가 특정 속성을 갖게 됩니다.

interface User {
  name: string;
  age: number;
  email: string;
}

const user: User = {
  name: "John Doe",
  age: 30,
  email: "john.doe@example.com"
};

2. 선택적 속성

인터페이스를 사용하면 ?를 사용하여 선택적 속성을 정의할 수 있습니다. 상징. 이는 객체가 해당 속성을 가질 수도 있고 갖지 않을 수도 있음을 의미합니다.

interface Product {
  id: number;
  name: string;
  description?: string; // Optional property
}

const product: Product = {
  id: 1,
  name: "Laptop"
};

3. 읽기 전용 속성

속성을 읽기 전용으로 정의할 수 있습니다. 즉, 초기화 후에는 변경할 수 없습니다.

interface Config {
  readonly apiUrl: string;
  timeout: number;
}

const config: Config = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// config.apiUrl = "https://newapi.example.com"; // Error: Cannot assign to 'apiUrl' because it is a read-only property.

4. 함수 종류

인터페이스를 사용하여 함수의 모양을 정의하고 매개변수 유형과 반환 유형을 지정할 수 있습니다.

interface Login {
  (username: string, password: string): boolean;
}

const login: Login = (username, password) => {
  return username === "admin" && password === "admin123";
};

console.log(login("admin", "admin123")); // true

5. 인터페이스 확장

인터페이스는 다른 인터페이스를 확장하여 기존 인터페이스를 결합하여 복잡한 유형을 생성할 수 있습니다.

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

interface Employee extends Person {
  employeeId: number;
  department: string;
}

const employee: Employee = {
  name: "Alice",
  age: 28,
  employeeId: 12345,
  department: "Engineering"
};

6. 클래스에서 인터페이스 구현

클래스는 인터페이스 구조를 준수하면서 인터페이스를 구현할 수 있습니다.

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  makeSound() {
    console.log("Woof! Woof!");
  }
}

const dog = new Dog("Buddy");
dog.makeSound(); // Woof! Woof!

7. 인덱싱 가능한 유형

인터페이스는 특정 유형의 동적 키가 있는 속성을 가진 객체를 설명할 수 있습니다.

interface StringArray {
  [index: number]: string;
}

const myArray: StringArray = ["Hello", "World"];
console.log(myArray[0]); // Hello

8. 하이브리드형

인터페이스는 기능과 속성이 있는 객체로 작동하는 객체를 정의할 수 있습니다.

interface Counter {
  (start: number): void;
  interval: number;
  reset(): void;
}

const counter: Counter = (function (start: number) {
  console.log("Counter started at", start);
} as Counter);

counter.interval = 1000;
counter.reset = () => {
  console.log("Counter reset");
};

counter(10);
console.log(counter.interval); // 1000
counter.reset();

9. 인터페이스 병합

TypeScript를 사용하면 동일한 인터페이스의 여러 선언을 병합할 수 있으며 이는 대규모 코드베이스나 라이브러리로 작업할 때 유용합니다.

interface Box {
  height: number;
  width: number;
}

interface Box {
  color: string;
}

const myBox: Box = {
  height: 20,
  width: 15,
  color: "blue"
};

TypeScript의 인터페이스는 객체 모양을 정의하고 적용하는 유연하고 강력한 방법을 제공하여 강력한 유형 검사와 명확하고 유지 관리 가능한 코드를 가능하게 합니다.

위 내용은 TypeScript 인터페이스 마스터하기: 실제 사례가 포함된 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!