TypeScript 인터페이스 마스터 하기(인덱싱 타입, 상속)

TypeScript 인터페이스란?

TypeScript에서 인터페이스(Interface)는 객체의 구조를 정의하기 위해 사용되는 일종의 계약(contract)입니다. 인터페이스는 특정 타입에 대한 요구사항을 명시하며, 해당 요구사항을 충족하는 객체는 인터페이스를 구현(implement)한다고 표현합니다.

인터페이스는 타입 체크를 위해 사용되며, 코드의 가독성과 재사용성을 높여줍니다. 인터페이스를 사용하여 객체의 구조를 명시적으로 선언하면, 해당 인터페이스를 준수하는 객체는 인터페이스에 정의된 프로퍼티와 메서드를 구현해야 합니다.

---

객체 타입 정의

객체의 속성과 들어갈 데이터 타입을 정확하게 정의할 수 있다.

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

---

함수 타입 정의

위에서 말했던 객체를 함수의 파라미터, 반환값으로 사용 가능하다.

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

function (person: Person) :number {
	return person.age;
}

---

인터페이스 옵션

옵션 속성은 인터페이스에서 프로퍼티를 선택적으로 지정할 수 있는 기능입니다. ? 기호를 해당 프로퍼티 이름 뒤에 붙여 옵션 속성으로 지정할 수 있습니다.

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

function logAge(person: Person) :number {
	return person.age;
}

let captain :Person = {age: 100};

logAge(captain);

---

인터페이스 상속

extends 예약어를 사용하면 상속할 수 있습니다. 또한 상속은 여러번 할 수도 있습니다.

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

interface Developer extends Person{
	skill: string;
}

상속시 주의할점!!
반드시 상위 인터페이스 타입과 호환이 되어야 합니다. 만약 상위에서 name을 string으로 정의했다면, 하위에서 name을 number등 다른 타입으로 재정의할 수 없습니다.

interface Person {
	name: string;
  	age: number;
}
interface Developer extends Person{
	skill: string;
  	//불가능
  	name: number;
}

---

인덱싱 타입 정의

객체와 배열은 타입스크립트로 인덱싱 타입을 지정할 수 있습니다. TypeScript는 인덱스 시그니처(Index Signature)라고 하는 특별한 구문을 제공합니다.

인덱싱이란?
아래의 동작 자체를 의미합니다.

• 객체 : 특정 속성에 접근
• 배열 : 인덱스로 특정 요소에 접근

인덱스 시그니처를 통해 인덱스 타입과 요소의 타입을 의미합니다.

1. 배열은 무조건 인덱스 타입이 number로 정의가 되어야 합니다.

2. 객체는 프로퍼티에 대한 동적인 접근을 정의하는 데 사용됩니다. 일반적으로, 객체의 프로퍼티 이름(인덱스 타입)은 문자열 또는 숫자로 인덱싱됩니다.

숫자와 객체 인덱싱 정의

interface StringArray {
  	//숫자를 인덱싱 타입으로 지정 할 경우 배열의 타입으로 가능
	[index: number] : string;
}
interface StringNotArray {
  	//숫자가 아닌 값을 인텍스 타입으로 지정할 경우 배열의 타입으로 더이상 불가능
  	//대신 객체의 타입으로 사용가능합니다.
	[index: string] : string;
}

const companiesArray: StringArray = ['삼성', '구글', '네이버'];
const companiesArrayError: StringNotArray = ['삼성', '구글', '네이버']; //오류
const companiesObject: StringNotArray = {Junior: 'ju1'}; //가능

객체 프로퍼티 동적 접근 정의

interface MyObject {
  [key: string]: number;
}

const obj: MyObject = {
  foo: 1,
  bar: 2,
};

console.log(obj.foo); // 출력: 1
console.log(obj['bar']); // 출력: 2

주의할점!
인덱스 시그니처를 사용하면 해당 프로퍼티의 타입이 정해지지 않기 때문에, IDE나 편집기에서 자동완성 기능을 사용할 수 없습니다. 이는 타입스크립트가 해당 프로퍼티에 대한 정보를 추론할 수 없기 때문입니다.

자동완성 기능은 IDE나 편집기가 코드 작성 도중에 사용자에게 가능한 옵션을 보여주고, 오타나 잘못된 사용을 방지하는 데 도움을 줍니다.

따라서 확실히 프로퍼티의 타입과 숫자가 정해져 있지 않을 경우에만 인덱스 시그니처를 사용해야 합니다.