-
Notifications
You must be signed in to change notification settings - Fork 5
5. 인터페이스와 타입 별칭
Woo-Dong93 edited this page Nov 19, 2020
·
1 revision
- 상호간의 약속
- 타입을 interface를 통해 미리 정의 및 활용
- 중복 제거 및 생산성 증가
- 변수에 인터페이스 활용
interface User {
age: number;
name: string;
}
// 변수에 인터페이스 활용
var seho: User = {
age: 33,
name: '세호'
}
- 함수에 인터페이스 활용
interface User {
age: number;
name: string;
}
// 함수에 인터페이스 활용
function getUser(user: User) {
console.log(user);
}
const capt = {
name: '캡틴',
age: 100
}
getUser(capt);
// 함수의 스펙(구조)에 인터페이스를 활용
// 라이브러리 만들 때 유용합니다.
interface SumFunction {
(a: number, b:number): number;
}
var sum: SumFunction;
sum = function(a: number, b:number): number {
return a + b;
}
- 배열 및 인덱싱 활용
interface StringArray {
[index: number]: string;
}
var arr: StringArray = ['a', 'b', 'c'];
//arr[0] = 10; //에러 발생
- 딕셔너리 패턴
// 딕셔너리 패턴
interface StringRegexDictionary {
[key: string]: RegExp;
}
var obj: StringRegexDictionary = {
// sth: /abc/,
cssFile: /\.css$/,
jsFille: /\.js$/
}
obj['cssFile'] = 'a'; //에러 발생( 일반 문자열이 들어갔기 때문이다. )
// key값들을 가져와 forEach 돌릴 때에 value값이 추론되어집니다. ( 마우스 오버시 string)
Object.keys(obj).forEach(function(value) {})
- 인터페이스 확장
interface Person {
name: string;
age: number;
}
interface Developer {
name: string;
age: number;
language: string;
}
// 위와 같이 중복된 인터페이스 정의가 있다면 상속을 통해 중복을 제거합니다.
interface Devaloper extends Person {
language: string;
}
// language만 입력시 에러 발생 : 상속받은 프로퍼티도 정의를 해줘야 하기 때문이다.
var captain: Devaloper = {
language: 'hi',
age: 100,
name: '우동'
}
- 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미합니다.
- 새로운 타입 값을 하나 생성하는 것이 아니라 정의한 타입에 대해 나중에 쉽게 참고할 수 있게 이름을 부여하는 것을 의미합니다.
- VSCode 상의 프리뷰 상태로 다른 타입과 어떤 차이점이 있는지 확인할 수 있습니다.
type MyName = string;
const name: MyName = 'capt';
- 인터페이스와 비슷한 구조로도 정의할 수 있습니다.
type Developer = {
name: string;
skill: string;
}
-
프리뷰의 차이점
- 인터페이스 ( Ctrl을 누르고 Persons 타입을 누르게 되면 상세히 볼 수 있으며 그 타입으로 이동가능합니다. )
- 타입 별칭
- 큰 차이점은 타입의 확장 가능 / 불가능 여부입니다.
- 인터페이스는 확장이 가능한데 반해 타입 별칭은 확장이 불가능합니다.
- 결국 확장이 용이한 인터페이스로 선언하는 것이 가장 좋습니다.