패스트캠퍼스 TypeScript 강의 Ch 5. Interfaces 복습 내용
참고링크
📕 Interface 정리
📌 Interface 개념
타입스크립트에서 타입을 만들어내는 방식을 의미하며, 인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진 새로운 타입을 사용자가 정의할 수 있게 해준다. (외부적으로 사용방식이 드러나게 작성되어 있는 형태)
📌 Interface의 기본 형태와 사용방식
interface Person {
name: string;
age: number;
}
function hello(person: Person): void {
console.log(`안녕하세요! ${person.name} 입니다. 나이는 ${person.age}살 입니다.`);
}
const p: Person = {
// const p: { name: string; age: number; } ={ 라고 작성해야 하지만 인터페이스 활용시 단순하게 작성 가능
name: 'Haryun',
age: 25
};
hello(p); // 안녕하세요! Haryun 입니다. 나이는 25살 입니다. 위의 함수 hello()는 Person 타입을 가지는 인자를 받는다.
(npx tsc 명령어 실행 후 js 파일을 확인해보면 인터페이스는 컴파일 타임에만 필요하다는 것을 확인 할 수 있다.)
📌 Optional property
항상 필요한 속성이 아닌 상황에따라 사용유무가 변경되는 속성
방식 1) ?
interface Person {
name: string;
age?: number;
}
function hello(person: Person): void {
console.log(`안녕하세요! ${person.name} 입니다.`);
}
hello({name: 'Haryun'}); // 안녕하세요 'Haryun' 입니다. age는 선택적 속성이기때문에 작성하지 않아도 에러가 발생하지 않음
hello({name: 'Haryun', age: 25}); // 안녕하세요 'Haryun' 입니다.속성명 뒤에 ? 기호를 표기하여 사용하며, 정의된 속성 이외에 별도 속성 추가시 엄격한 제어가 가능하다.
방식 2) Indexable property
interface Person {
name: string;
age: number;
[index: string]: any;
}
function hello(person: Person): void {
console.log(`안녕하세요! ${person.name} 입니다.`);
}
const p1: Person = {
name: 'Haryun',
age: 25,
dog: ['Komma', 'Kamma'] // [index: string]: any에 대응하는 부분
};
const p2: Person = {
name: 'Harin',
age: 23,
sister: p1 // type을 any로 지정하였기때문에 p1도 들어갈 수 있음
};
hello(p1);
hello(p2);
?를 사용한 방식은 해당 속성의 존재 유무를 확인하지만 indexable property 방식은 사용자가 속성명을 직접 지정하고, 지정된 타입의 값을 할당할 수 있게 해준다. (사용자가 직접 속성을 추가하는 형식이라면 가장 먼저 해당 방식을 이용하자!)
📌 인터페이스에 함수를 정의하기
interface Person {
name: string;
age: number;
hello(): void;
}
// 방식 1)
const p1: Person = {
name: 'Haryun',
age: 25,
hello: function(): void {
console.log(`안녕하세요! ${this.name} 입니다.`);
}
}
// 방식 2)
const p2: Person = {
name: 'Harin',
age: 23,
hello(): void { // 이때 함수의 인자에 this: Person을 작성하여 this의 타입을 직접적으로 지정할 수도 있음(별도 객체를 대상으로 사용하는 경우 작성)
console.log(`안녕하세요! ${this.name} 입니다.`);
}
}주의!
const p3: Person = {
name: 'Hakseong',
age: 29,
hello: (): void => {
console.log(`안녕하세요! ${this.name} 입니다.`);
} // error
}화살표 함수내에서의 this는 해당 객체를 가르키지 않고, global this를 의미하기때문에 에러가 발생한다.
📌 인터페이스를 이용해 클래스 생성하기
interface IPerson {
name: string;
age?: number;
hello(): void;
}
class Person implements IPerson {
name: string;
age?: number | undefined;
constructor(name: string) {
this.name = name;
}
// class 구현시 name의 타입만 지정되어 있고 내용이 정의되어있지 않기때문에 에러가 발생 (age는 선택속성이므로 제외)
// 이를 해결하기 위해 constructor를 활용하여 내용을 구현해야함
hello(): void {
console.log(`안녕하세요! ${this.name} 입니다.`);
}
}
const person: IPerson /* 생략가능 */ = new Person('Haryun');
person.hello();implements한 인터페이스의 내용을 바탕으로 클래스를 생성할 수 있다. (해당 인터페이스의 속성을 만족해야함)
