[원티드 프리온보딩] TypeScript 1주차 - 2

Interface

• JS에는 존재하지 않는다
• 객체의 타입을 정의하고 생김새(shape, 원형)를 가지도록 할 수 있다
  • 객체의 구체적인 묘사를 위해 만들어진 문법
• TS에서의 클래스 기능은 C#에서 유래된 것이 많다
• 일부 기능은 TS에서만 존재하는 고유 문법으로 컴파일 후에 사라진다
• extends가 아닌 implements 키워드로 구현
  • 설계 구현 강제
• cf) 개방폐쇄 원칙 (Open-Closed Principle, OCP)
• 연습해 보기 1
  1. 객체 묘사 (인터페이스로)
  2. 그 객체를 묘사할 때 인터페이스 타입부터 선언
  3. 선언한 인터페이스 확장
  4. 확장한 인터페이스 구현
• 연습해 보기 2
  1. 베이스 컴포넌트(기본 클래스)와 그 베이스 컴포넌트를 확장하는 컴포넌트(파생 클래스)를 만들자
  2. 만들고 베이스 컴포넌트에 스스로 인스턴스화가 될 수 없는 방어 코드
     2-2. 확장된 클래스에서 메서드 사용 강제
  3. 해당 클래스를 타입스크립트로 전환해 보자
  4. abstract 베이스 컴포넌트 생성
  5. implements로 확장 컴포넌트 구현

// interface 선언 및 객체 묘사
interface Animal {
  name: string
}

// interface 확장(상속)
interface Person extends Animal {
  age: number
}

// 구현
const person: Person = {
  name: '사람',
  age: 10,
}

/**
 * type alias가 스펙이 올라가면서 할 줄 아는 게 늘어나고 있다
 * implements는 안 됨!!!
 */
type TPerson = {
  name: string
  age: number
}

두 가지 관점

• 객체 지향 (데이터 설명서)
• 메타 데이터
• Front-end에서의 유용한 사용 방법
  • 예) React Component Typing

추상 클래스

• 스스로 인스턴스가 될 수 없다
• interface처럼 구현이 강제되지만 extends 아닌 implements 사용

// Before (함정 덩어리!)
class Component {
  constructor() {
    // 인스턴스인지 확인
	// 인스턴스화 시도할 때 에러 던지기
  }
  
  mount() {
    
  }
  
  attachEvent() {
    
  }
}

class MyComponent extends Component {
  // 상위 컴포넌트 메서드 구현 강제
}

// After
abstract class Component {
  constructor() {
    
  }
  
  mount() {
    
  }
  
  attachEvent() {
    
  }
}

const React = new Component(); // 오류! 추상 클래스는 인스턴스 만들 수 없음!! => 인스턴스화 에러 OK

class MyComponent implements Component {
  // 상위 컴포넌트 메서드 구현 강제
  mount() {
    
  }
  
  attachEvent(){
    
  }
}