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. 타입스크립트 타입 시스템

믹스인(Mixin)

TypeScript (그리고 JavaScript) 클래스는 엄격하게 단일 상속만 지원합니다. 그래서 아래와 같이 할 수 없습니다:

class User extends Tagged, Timestamped { // 오류 : 다중 상속 불가
}

재사용 가능한 구성요소로 클래스를 구성하는 다른 방법은 믹스인(mixin)이라 부르는 간단한 부분 클래스들로 클래스를 구성/조립하는 것입니다.

아이디어는 단순한데, 클래스 A가 클래스 B를 확장 해서 그 기능을 받는 것이 아니라 함수 B가 클래스 A 를 받고 기능이 추가된 새 클래스를 반환하는 것입니다. 함수 B가 믹스인입니다.

믹스인은 다음과 같은 함수입니다

  1. 생성자(constructor)를 받음,

  2. 생성자 확장하여 새 기능을 추가한 클래스 생성

  3. 새 클래스 반환

전체 내용이 나오는 예제

// 모든 믹스인에 필요
type Constructor<T = {}> = new (...args: any[]) => T;

////////////////////
// 예제 믹스인
////////////////////

// 속성을 추가하는 믹스인
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

// 속성과 메소드를 추가하는 믹스인
function Activatable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    isActivated = false;

    activate() {
      this.isActivated = true;
    }

    deactivate() {
      this.isActivated = false;
    }
  };
}

////////////////////
// 클래스를 조립하는 예제
////////////////////

// 간단한 클래스
class User {
  name = '';
}

// Timestamped 적용된 User
const TimestampedUser = Timestamped(User);

// Timestamped와 Activatable이 적용된 User
const TimestampedActivatableUser = Timestamped(Activatable(User));

////////////////////
// 조립된 클래스 사용
////////////////////

const timestampedUserExample = new TimestampedUser();
console.log(timestampedUserExample.timestamp);

const timestampedActivatableUserExample = new TimestampedActivatableUser();
console.log(timestampedActivatableUserExample.timestamp);
console.log(timestampedActivatableUserExample.isActivated);

이 예제를 분해해봅시다.

생성자를 받음

믹스인은 클래스를 받고 새 기능을 더해서 확장시킵니다. 그러므로 무엇이 생성자(constructor) 인지 정해야 합니다. 쉬움:

// 모든 믹스인에 필요
type Constructor<T = {}> = new (...args: any[]) => T;

클래스를 확장하여 반환

아주 쉬움:

// 속성을 추가하는 믹스인
function Timestamped<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    timestamp = Date.now();
  };
}

이게 전부입니다 🌹

Previous예외 처리NextJSX

Last updated 3 years ago

Was this helpful?