이재승님의 실전 리액트 프로그래밍을 읽고 정리한 내용입니다.
인터페이스
자바에서 인터페이스는 클래스를 구현하기 전에 필요한 메서드를 정의하는 용도로 쓰인다. 타입스크립트에서는 좀 더 다양한 것들을 정의하는데 사용할 수 있다.
1. 객체 타입 정의하기
인터페이스로 타입을 정의할 때는 interface 키워드를 사용한다.
interface Person {
name: string;
age: number;
}
const p1: Person = { name: 'Mia', age: 23};
const p2: Person = { name: 'Dan', age: 'twelve'}; // 타입 에러선택 속성
선택 속성은 객체에서 없어도 되는 속성을 말한다. 앞서 배웠듯이 선택 속성은 물음표 기호를 사용한다.
interface Person {
name: string;
age?: number;
}
const p1: Person = {name: 'ryan'};물음표 기호를 사용하선택 지 않고 undefined를 유니온 타입으로 추가하면 선택 속성과 달리 명시적으로 age 속성을 입력해야 한다.
interface Person {
name: string;
age: number | undefined;
}
const p1: Person = {name: 'ryan'}; // 타입 에러
const p2: Person = {name: 'ryan', age: undefined};읽기 전용 속성
객체에서 읽기 전용 속성은 값이 변하지 않는 속성을 말한다. readonly키워드를 사용한다. 아래와 같이 변수를 정의하는 시점에는 값을 할당할 수 있지만 값을 수정하려고 하면 컴파일 에러가 발생한다.
interface Person {
readonly name: string;
age?: number;
}
const p1: Person = {name: 'ryan'};
p1.name = 'apeach'; // 컴파일 에러정의되지 않은 속성값 처리
보통은 객체가 인터페이스에 정의되지 않은 속성값을 가지고 있어도 할당이 가능하다. 단, 리터럴로 값을 초기화하는 경우 인터페이스에 정의되지 않은 속성값이 있으면 타입 에러가 발생한다.
interface Person {
readonly name: string;
age?: number;
}
const p1: Person = {
name: 'mia';
birthday: '1995-08-01'; // 타입 에러
};
const p2 = {
name: 'david';
birthday: '1997-04-14';
};
const p3: Person = p2;Person 인터페이스에 정의되지 않은 속성을 리터럴로 입력하면 타입 에러가 일어난 것을 볼 수 있다. p2는 Person 인터페이스에 정의되지 않은 속성을 포함하지만 p3 타입이 p2 타입을 포함하는 더 큰 타입이기 때문에 타입 에러가 발생하지 않는다.
2. 인덱스 타입 정의하기
인터페이스에서 이름을 구체적으로 정의하지 않고 값의 타입만 정의하는 것을 인덱스 타입이라고 한다.
interface Person {
readonly name: string;
age: number;
[key: string]: string | number;
}
const p1: Person = {
name: 'mike',
birthday: '1997-01-01',
age: '25', // 타입 에러
};age는 명시적으로 숫자로 정의했기 때문에 타입 에러가 발생한다.
여러 개의 인덱스를 정의하는 경우
자바스크립트에서는 속성 이름에 숫자와 문자열을 사용할 수 있고, 속성 이름에 숫자를 사용하면 문자열로 변환된 후 사용된다. 따라서 타입스크립트에서는 숫자인 속성 이름의 값이 문자열로 할당 가능한지 검사한다.
interface YearPriceMap {
[year: number]: A;
[year: string]: B;
}속성 이름이 숫자인 A 타입은 B 타입에 할당 가능해야 한다.
interface YearPriceMap {
[year: number]: number;
[year: string]: string | number;
}
const yearMap: YearPriceMap = {};
yearMap[1998] = 1000;
yearMap[1998] = 'abc'; // 타입 에러
yearMap['2000'] = 1234;
yearMap['2000'] = 'million';인터페이스로 할 수 있는 것들
인터페이스로 함수 타입 정의하기
// 함수 타입을 인터페이스로 정의하기
interface GetInfo {
(name: string, age: number): string;
}
const getInfo: GetInfo = function (name, age) {
const nameText = name.substr(0, 10);
const ageText = age >= 35 ? 'senior' : 'junior';
return `name: ${nameText}, age: ${ageText}`;
};
getInfo('mia', 26);
// 'name: mia, age: junior'인터페이스로 함수를 정의할 때는 속성 이름 없이 정의한다.
// 함수 타입에 속성값 추가하기
interface GetInfo {
(name: string, age: number): string;
totalCall: number;
}
const getInfo: GetInfo = function (name, age) {
getInfo.totalCall += 1;
console.log(`totalCall: ${getInfo.totalCall}`);
};
getInfo.totalCall = 0;
getInfo('mia', 26);
// 'totalCall: 1'인터페이스로 클래스 구현하기
리액트에서 클래스형 컴포넌트가 있지만 리액트 훅이 나오면서 상대적으로 중요도가 떨어졌으므로 거의 쓸 일이 없다고 봐도 된다.
interface Person {
name: string;
age: number;
isYoungerThan(age: number): boolean;
}
class SomePerson implements Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
isYoungerThan(age: number) {
return this.age < age;
}
}인터페이스 확장하기
interface Person {
name: string;
age: number;
}
interface Korean extends Person {
isLiveInSeoul: boolean;
}Person 인터페이스를 확장해서 Korean 인터페이스를 만든다.
interface Person {
name: string;
age: number;
}
interface Programmer {
techStack: string;
}
interface Korean extends Person, Programmer {
isLiveInSeoul: boolean;
}위와 같이 여러 개의 인터페이스를 확장하는 것도 가능하다.
인터페이스 합치기
교차 타입을 사용하면 여러 인터페이스를 하나로 합칠 수 있다. 교차 타입은 교집합과 같은 기능을 한다.
interface Person {
name: string;
age: number;
}
interface Product {
name: string;
price: number;
}
type PP = Person & Product;
const pp: PP = {
name: 'a',
age: 23,
price: 1000,
};타입 PP는 합쳐진 두 인터페이스 Person과 Product의 모든 속성값을 포함한다. 교차 타입이 교집합과 같은 기능을 한다고 했는데 왜 name 속성 외에도 포함할까? 이는 속성의 교집합이 아니라 가질 수 있는 타입의 값에 대한 교집합이기 때문이다.
