> 웹 프론트엔드 > JS 튜토리얼 > TypeScript의 인터페이스와 유형

TypeScript의 인터페이스와 유형

Linda Hamilton
풀어 주다: 2024-11-17 06:26:03
원래의
674명이 탐색했습니다.

Interface vs Type in TypeScript

TypeScript는 JavaScript에 정적 타이핑을 추가하여 코드에 새로운 수준의 안정성과 유지 관리성을 제공하는 강력한 언어입니다. 유형 정의를 활성화함으로써 TypeScript는 개발 경험을 향상시켜 코드를 디버그하고 읽기 쉽게 만듭니다. 많은 기능 중에서 TypeScript는 변수, 객체, 클래스 등 데이터의 모양을 정의하기 위한 인터페이스와 유형 구성을 모두 제공합니다. 유사점을 공유하지만 각각은 고유한 장점을 갖고 있으며, 언제 다른 것을 사용해야 하는지 알면 코드를 더욱 깔끔하고 효율적으로 만들 수 있습니다.

인터페이스

TypeScript의 초기 버전에 도입된 인터페이스는 객체 지향 프로그래밍(OOP) 개념에서 영감을 받았습니다. 이를 통해 간단한 방법으로 개체 모양을 정의할 수 있으며 재사용 및 확장 가능한 개체 유형을 생성하기 위한 최고 수준의 구성을 제공합니다.

기본 인터페이스 예

interface Car {
    brand: string;
    color: string;
}
로그인 후 복사
로그인 후 복사

인터페이스 상속

인터페이스의 주요 장점 중 하나는 상속입니다. 인터페이스는 다른 인터페이스를 확장하여 기존 구조를 기반으로 쉽게 구축할 수 있습니다.

interface Person {
    name: string;
}

interface User extends Person {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };
로그인 후 복사

클래스용 인터페이스

인터페이스는 클래스의 구조나 "계약"을 정의하고 클래스가 가져야 하는 메서드와 속성을 지정하는 데에도 탁월한 선택입니다.

interface Printable {
    print: () => void;
}

class Cart implements Printable {
    print() {
        console.log('Item has been added.');
    }
}
로그인 후 복사

인터페이스 선언 병합

인터페이스는 병합될 수 있습니다. 동일한 이름을 가진 여러 인터페이스가 동일한 범위에서 선언되면 하나로 병합됩니다. 이는 도움이 될 수 있지만 과도하게 사용하면 복잡성이 발생할 수 있습니다.

interface User {
    name: string;
}

interface User {
    age: number;
}

const user: User = { name: 'Gerald', age: 30 };
로그인 후 복사

참고: 병합 선언은 신중하게 사용하세요. 과도한 병합은 의도하지 않은 부작용으로 인해 인터페이스를 이해하고 디버깅하기 어렵게 만들 수 있습니다.

유형

인터페이스의 대안으로 TypeScript는 더 유연하고 객체뿐만 아니라 다양한 유형을 나타낼 수 있는 type 키워드도 제공합니다. 유형을 사용하면 공용체, 교차점, 별칭 기본 유형까지 정의할 수 있습니다.

유형이 있는 결합 유형

예를 들어 type은 인터페이스가 처리할 수 없는 공용체 유형을 허용합니다.

type Id = string | number;
로그인 후 복사

유형 선언 제한 사항

인터페이스와 달리 유형은 선언 병합을 지원하지 않습니다. 유형을 다시 선언하려고 하면 오류가 발생합니다.

type User = {
    name: string;
};

// Error: Duplicate identifier 'User'
type User = {
    age: number;
}
로그인 후 복사

유형 구성

type은 기존 유형에서 새로운 유형을 구성하는 데도 이상적이므로 복잡한 데이터 구조를 정의하는 강력한 도구입니다.

interface Car {
    brand: string;
    color: string;
}
로그인 후 복사
로그인 후 복사

언제 각각을 사용해야 합니까?

  • 객체와 클래스의 구조를 정의할 때 인터페이스를 사용하세요. 인터페이스는 상속에 더 나은 유연성을 제공하고 TypeScript의 유형 검사와 원활하게 작동합니다.
  • 유형을 사용하세요 공용체, 교차점, 기본 유형 별칭에 대해 또는 복잡하고 재사용 가능한 유형을 만들어야 하는 경우

결론

인터페이스와 유형 모두 TypeScript에 귀중한 기능을 제공합니다. 각각의 장점을 이해하면 모든 상황에 적합한 도구를 선택하여 코드를 더 깔끔하고, 이해하기 쉽고, 유지 관리하기 쉽게 만들 수 있습니다. TypeScript의 타이핑 시스템의 강력한 기능을 활용하여 프로젝트에 제공되는 명확성과 안전성을 즐겨보세요!

위 내용은 TypeScript의 인터페이스와 유형의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:dev.to
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿