개념

• 객체 타입 정의에 사용하는 문법

상속

• extends 키워드로 타입 정의를 확장한 것
• 부모 클래스 내용을 자식 클래스가 물려받아 사용하는 것

기본 예시

• 부모: Person / 자식: Developer

class Person {
	constructor(name, age) {
		this.name = name;
        this.age = age;
	}
    
    logAge() {
    	console.log(this.age);
    }
}

class Developer extends Person {
	constructor(name, age, skill) {
    	super(name, age); // 부모에서 받아온 것은 super로 표시
        this.skill = skill;
    }
    
    logDeveloperInfo() {
    	this.logAge(); // 부모에서 가져온 메서드는 super 없이 this만 붙여 바로 사용 가능
        console.log(this.name);
        console.log(this.skill);
    }	
}

유의사항

• 부모 인터페이스에서 상속 받은 속성은 자식에서 재선언(변경)할 수 없음 (리액트의 props 개념과 유사)

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

interface Developer extends Person {
	name: number; // 부모의 것을 자식이 변경하면 에러 발생
}

중첩 가능

• 조부모 Hero를 부모 Person이 상속받고, 부모 Person을 자식 Developer가 상속 받음
  • 상속을 통해 Developer가 모든 속성을 전달 받고, 이를 통해 ironman이란 최종 변수는 세 타입의 속성을 모두 가지게 됨

interface Hero {
	power: boolean;
}

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

interface Developer extends Person {
	skill: string;
}

let ironman: Developer = {
	name: '아이언맨',
    age: 21,
    skill: '만들기',
    power: true
}

인덱싱 타입 정의

1. 배열 인덱싱 타입

interface StringArray {
	[index: number]: string; // 배열 인덱싱 방식의 타입 정의
}

let companies: StringArray = ['삼성', '네이버', '구글'];

• index: '인덱스'를 나타내는 변수
• [index: number]: 변수 index 자리에는 number 타입이 들어옴
• [index: number]: string: 변수 index(key)의 value 자리에는 string 타입이 들어옴

하지만 이런 방법보다는 let companies: string[] = ['삼성', '네이버', '구글']이라고 타입을 정의하는 게 훨씬 간편하다. (배열도 인덱싱 방식의 타입 정의가 가능하다는 예시일 뿐)

객체 인덱싱 타입

interface SalaryMap {
	[level: string]: number;
}

let salary: SalaryMap = {
	junior: 100
};

• level이 변수이기 때문에 junior 외에 mid, senior 등의 다른 속성도 사용할 수 있다.
• level(key)의 value는 number 타입이다.

이처럼 속성명을 변수화해서 key 타입을 정의하는 것을 인덱스 시그니처 방식이라고 한다.

인덱스 시그니처 장점

• 객체의 key 타입을 유연하게 정의 가능
  • 예: 타입이 같은 여러 개의 key를 여러 줄로 선언하지 않고 단 한 줄로 가능

// 객체 인덱싱을 안 쓴 경우 - 여러 줄 선언 필요
interface SalaryMap {
	junior: number;
    mid: number;
    senior: number;
    ...
}

// 객체 인덱싱을 쓰면 - key가 '변수'로 대체되기 때문에 한 줄로 선언 가능
interface SalaryMap {
	[level: string]: number;
}

인덱스 시그니처 단점

• 타입스크립트가 어떤 속성이 올지 정확히 알지 못해서 코드 자동 완성이 안 됨 (큰 단점..)

활용법

• key의 구체적 값은 모르고 타입만 아는 경우 인덱스 시그니처 사용

interface User { // 명시법과 인덱스 시그니처를 섞어서 사용한 예시
	[property: string]: string;
    id: string;
    name: string;
}

let seho: User = {
	id: '1',
    name: '세호',
};

• seho 변수를 작성할 때 타입스크립트가 id와 name만 자동완성 해줌 (property는 x)
• But [property: string]: string; 라인 덕분에 key 값과 value 값이 모두 string인 다른 속성을 계속 추가 가능

let seho: User = {
	id: '1',
    name: '세호',
    address: '판교' // 예: 추가!
};