Typescript
[Typescript] 인터페이스(interface)
joy_lee
2022. 7. 11. 20:19
인터페이스(interface)
인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있습니다.
- 객체의 스펙(속성과 속성의 타입)
- 함수의 파라미터
- 함수의 스펙(파라미터, 반환 타입 등)
- 배열과 객체를 접근하는 방식
- 클래스
참고(https://joshua1988.github.io/ts/guide/interfaces.html#%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4)
인터페이스 사용 예시는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
|
// 반복되는 타입을 하나의 인터페이스로 간단하게 표현할 수 있다.
interface User {
age: number;
name: string;
}
var seho: User = {
age: 33,
name: "세호"
}
|
ㄷcs |
인터페이스를 생성하지 않았다면 새로운 변수를 만들 때마다 { age: number, name: string } 으로 타입을 명시해줘야 한다.
인터페이스 User를 만들었기 때문에 간단하게 타입을 지정할 수 있다.
함수와 인터페이스
함수의 인자의 타입을 인터페이스로 명시할 수 있다. 정해진 데이터 타입이 아닌 경우에는 에러로 간주해 개발자에게 알려준다.
|
1
2
3
4
5
6
7
8
9
10
11
|
// 함수에 인터페이스 활용
// 특정 형식을 준수하는 데이터만 입력받음을 명시함
function getUser(user: User) {
console.log(user);
}
const capt = {
name: "캡틴",
};
// 인자가 명시된 형식을 따르는지 확인해줌
getUser(capt); // 에러로 처리해 VSCode에서 빨간 밑줄을 쳐준다
|
cs |
또한 인터페이스를 가지고 함수의 구조를 명시할 수도 있다.
|
1
2
3
4
5
6
7
8
9
10
|
// 함수의 스펙(구조)에 인터페이스를 활용
interface SumFunction {
(a: number, b: number): number;
}
// 함수의 인자의 타입과 반환 값의 타입을 정한다 var sum: SumFunction;
sum = function (a: number, b: number) {
return a + b;
};
|
cs |
강의
타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의
타입스크립트를 시작하는 분들을 위한 강의입니다. 최신 자바스크립트 문법을 모르는 분들도 쉽게 배울 수 있도록 교과 과정을 구성하였습니다. 어렵게만 느껴지는 타입스크립트를 입문자 관
www.inflearn.com