Front-end/TypeScript
[TypeScript] 타입스크립트 기초 (2) - 인터페이스와 타입 별칭
이안92
2021. 1. 19. 12:44
반응형
인터페이스란?
타입스크립트의 인터페이스는 항상 특정 형식을 준수하는 데이터만 받겠다는 상호간의 약속을 의미한다.
파라미터에 인터페이스를 정의하고 함수 호출할 때 파라미터에 정의한 인터페이스의 규칙을 따랐는지 확인한다.
interface User {
age: number;
name: string;
}
// 변수에 인터페이스 활용
var ian: User = {
age: 28,
name: '이안'
}
// 함수에 인터페이스 활용
function getUser(user: User) {
console.log(user);
}
const person = {
age: 28,
name: 'ian'
}
getUser(person);
함수의 전체적은 모습까지 인터페이스가 정의할 수 있다는 게 장점.
라이브러리를 만들거나 협업할 때 함수의 정의 잡을 때 사용.
// 함수의 스펙(구조)에 인터페이스 활용
interface SumFunction {
(a: number, b: number): number;
}
var sum: SumFunction;
sum = function(a: number, b: number): number {
return a + b;
}
인덱싱
배열(Array) 접근 방식. 몇번째 있는 요소에 들어가는 타입도 정해줄 수 있다.
interface StringArray {
[index: number]: string;
}
var arr: StringArray = ['a', 'b', 'c'];
arr[0]; // 'a'
딕셔너리 패턴
객체(Object) 접근 방식
interface StringRegexDictionary {
[key: string]: RegExp;
}
// 왼쪽 속성(string) 오른편 정규표현식(RegExp)
var obj: StringRegexDictionary = {
cssFile: /\.css$/,
jsFile: /\.js$/,
}
상속
extends라는 키워드를 사용해서 인터페이스를 확장한다.
// 인터페이스 확장
interface Person {
name: string;
age: number;
}
interface Developer extends Person {
//name: string;
//age: number;
language: string;
}
var ian: Developer = {
language: 'ts',
name: '이안',
age: 28
}
타입 별칭 (Type Aliases)
타입 별칭은 새로운 타입 값을 생성하는 것이 아니라 특정 타입을 참조할 수 있는 타입 변수를 의미힌다.
즉, 정의한 타입에 대해 참고 가능하도록 별칭(이름)을 부여하는 것이다.
const name: string = 'ian';
// 타입 별칭 적용
type MyName = string;
const name: MyName = 'ian';
type Developer = {
name: string;
skill: string;
}
인터페이스 vs 타입 별칭
interface Person {
name: string;
age: number;
}
type Person = {
name: string;
age: number;
}
var ian: Person = {
name: '이안',
age: 28
}
인터페이스는 확장이 가능하지만 타입 별칭은 확장이 불가능하다.
그러므로 타입 별칭보다는 인터페이스를 사용하는 것을 추천한다.
반응형