TypeScript Deep Dive
  • README
  • 시작하기
    • 왜 타입스크립트인가
  • 자바스크립트
    • 비교 연산자
    • 참조 연산자
    • Null vs. Undefined
    • this
    • 클로저
    • Number
    • Truthy
  • 미래의 자바스크립트
    • 클래스
      • 즉시실행함수
    • 화살표 함수
    • 나머지 연산자
    • let
    • const
    • 비구조화 할당
    • 전개 연산자
    • for...of
    • 이터레이터
    • 템플릿 리터럴
    • 프로미스
    • 제네레이터
    • Async Await
  • 프로젝트
    • 컴파일러 제어
      • tsconfig.json
      • 파일 경로 지정
    • 선언
    • 모듈화
      • 파일을 이용한 모듈화
      • globals.d.ts
    • 네임스페이스
    • 동적 표현식 가져오기
  • Node.js 시작하기
  • Browser 시작하기
  • 타입스크립트 타입 시스템
    • 자바스크립트 마이그레이션 가이드
    • @types
    • 주변 선언
      • 파일 선언
      • 변수
    • 인터페이스
    • 열거형(Enums)
    • lib.d.ts
    • 함수
    • 콜러블(Callable)
    • 타입 표명(Type Assertion)
    • 신선도(Freshness)
    • 타입 가드
    • 리터럴(Literal)
    • 읽기 전용(readonly)
    • 제네릭
    • 타입 인터페이스
    • 타입 호환성
    • Never 타입
    • 구별된 유니온
    • 인덱스 서명(Index Signature)
    • 타입 이동하기
    • 예외 처리
    • 믹스인(Mixin)
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • 타입스크립트 에러
    • 에러 메세지
    • 공통 에러
  • NPM
  • 테스트
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • ESLint
    • Changelog
  • 팁
    • 문자열 Enums
    • 타입 단언
    • 상태 저장 함수
    • 커링
    • 제네릭 타입 예시
    • 객체 타입 설정
    • 유용한 클래스
    • Import / Export
    • 속성 Setters
    • outFile 주의사항
    • 제이쿼리 팁
    • 정적 생성자
    • 싱글톤 패턴
    • 함수 파라미터
    • 토글 생성
    • Import 여러개 하기
    • 배열 생성
    • 생성자에서 타입정의
  • 스타일 가이드
  • 타입스크립트 컴파일러 구조
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page
  • 인터페이스
  • 클래스는 인터페이스를 구현할 수 있습니다.
  • 팁

Was this helpful?

  1. 타입스크립트 타입 시스템

인터페이스

인터페이스

인터페이스는 자바스크립트 런타임 환경에서는 전혀 영향을 주지 않습니다. 인터페이스는 타입스크립트에서 변수의 구조로 선언됩니다

다음 두가지는 동등한 선언이며 하나는 인라인 주석을 사용하고 두번째는 인터페이스를 사용합니다.

// Sample A
declare var myPoint: { x: number; y: number }

// Sample B
interface Point {
    x: number
    y: number
}
declare var myPoint: Point

Sample B의 장점은 누군가가 myPoint 라이브러리에 빌드 된 라이브러리를 작성하여 새 멤버를 추가한다는 것입니다. 기존의 myPoint 선언에 쉽게 추가 할 수 있습니다.

// Lib a.d.ts
interface Point {
    x: number; y: number;
}
declare var myPoint: Point;

// Lib b.d.ts
interface Point {
    z: number;
}

// Your code
var myPoint.z; // Allowed!

위의 코드가 허용이 되는 이유는 타입스크립트의 인터페이스는 개방형이기 때문입니다. 이것은 인터페이스를 사용하여 자바스크립트의 확장성을 모방하는 타입스크립트의 핵심 원리입니다.

클래스는 인터페이스를 구현할 수 있습니다.

만약 누군가가 interface에서 객체의 구조를 따라야 하는 클래스를 사용하려면 implements 키워드를 사용해서 호환성을 보장할 수 있습니다.

interface Point {
    x: number
    y: number
}

class MyPoint implements Point {
    x: number
    y: number // Same as Point
}

기본적으로 implements로 외부의 인터페이스를 연결한 경우 변경으로 인해 코드베이스에 컴파일 오류가 발생해도 쉽게 동기화 할 수 있습니다.

interface Point {
    x: number
    y: number
    z: number // New member
}

class MyPoint implements Point {
    // ERROR : missing member `z`
    x: number
    y: number
}

implements는 클래스 instances의 구조를 제한합니다.

var foo: Point = new MyPoint()

그리고 foo: Point = MyPoint와 같은 것은 다릅니다.

팁

모든 인터페이스를 쉽게 구현할 수 있는 것은 아닙니다.

인터페이스는 자바스크립트에 존재할 수 있는 임의의 구조를 선언하도록 설계되었습니다. new로 무언가를 호출 할 수 있는 다음 인터페이스를 고려하십시요.

interface Crazy {
    new (): {
        hello: number
    }
}

기본적으로 다음과 같이 작성합니다.

class CrazyClass implements Crazy {
    constructor() {
        return { hello: 123 }
    }
}
// Because
const crazy = new CrazyClass() // crazy would be {hello:123}

인터페이스를 이용해서 모든 자바스크립트를 선언하고 심지어 타입스크립트에서 안전하게 사용 할 수도 있습니다. 타입스크립트 클래스를 사용하여 구현할 수 있는 것은 아닙니다.

Previous변수Next열거형(Enums)

Last updated 2 years ago

Was this helpful?