몽땅뚝딱 개발자
[TypeScript] 인터페이스 본문
◽ 예제
인터페이스는 '상호간의 약속'으로 특정 형식으로 지정해준다.
interface User {
age: number;
name: string;
}
변수에 인터페이스를 활용해보자.
const thor: User = {
age: 50000,
name: '토르'
}
함수에 인터페이스를 활용해보자.
// 함수에 인터페이스 활용
function getUser(user: User) {
console.log(user);
}
API의 스펙을 지정하는 것에 가장 많이 사용한다.
// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction {
(a: number, b: number): number;
}
let sum: SumFunction;
sum = function (a: number, b: number): number {
return a + b;
}
오브젝트에 속성을 일일이 지정하지 않고 그때 그때 임의로 구해서 사용하는 인덱싱을 사용해보자.
// 인덱싱
// 속성이름이 정해져있지 않고 임의로 구해서 사용할 수 있도록 한다.
interface StringArray {
[index: number]: string;
}
let arr: StringArray = ['a', 'b', 'c']
arr[0] = 'e'
딕셔너리 패턴을 사용해보자.
// 딕셔너리 패턴
// key: 'sth', string: '/abc/'
// 자바스크립트는 RegExp라는 예약어를 제공하고 있다.
interface StringRegexDictionary {
[key: string]: RegExp
}
let obj: StringRegexDictionary = {
cssFile: /\.css$/,
jeFile: /\.js$/,
}
// 이렇게 사용할 수 있다.
Object.keys(obj).forEach((value) => {
console.log(value);
})
상속을 사용해보자.
// 인터페이스 확장
// 인터페이스를 상속받아 사용하는 것
interface Person {
name: string,
age: number
}
interface Developer extends Person{
language: string;
}
const thor: Developer = {
name: 'thor',
age: 50000,
language: '아스가르드어'
}
출처
'Development > Typescript' 카테고리의 다른 글
[TypeScript] 이넘(Enum) (0) | 2022.06.06 |
---|---|
[TypeScript] 유니온 타입 vs 인터섹션 타입 (0) | 2022.06.06 |
[TypeScript] 변수와 함수의 타입 정의 (0) | 2022.06.06 |
[Typescript] playground (0) | 2022.06.06 |
[TypeScript] 설정파일 (0) | 2022.06.06 |
Comments