Typescript 기초 문법 - 인터페이스

인프런 강의 Part 5. TS - 인터페이스

 

07. 인터페이스 기본

사용하는 이유 : 인터페이스는 이름을 붙혀줌으로써 재사용이 가능하다.

 

- 객체 데이터의 타입 지정

interface User {
 name: string
 readonly age: number // 읽기전용 속성, 수정 불가
 inValid?: boolean // 선택적 속성
}

 

08. 함수의  타입 지정

// 호출 시그니처 (call signature)

// 함수 타입 지정하기
interface GetName {
(msg: string): string // 인터페이스 내부에 소괄호로 시작하여 인터페이스를 작성하는 방식: 호출 시그니처
}

// 매개변수 msg의 type은 string이고 string type을 반환한다.

(msg:string)=> string // 이 것과 같은 뜻이다.

 

- 인덱스 가능 타입

: 배열이나 객체 데이터의 타입을 지정하는 인터페이스 방식

인덱싱: 객체 데이터 속성을 줄떄 전표기법(.)이 아닌 대괄호 표기법([]) 을 사용하는 것

 

// 인덱스 시그니처 (index signature)

ex 1) 배열 데이터의 타입 지정하기
interface Fruits {
 [item: number]: string
} // 인덱스 시그니처 문법
 // item 은 요소의 순서 ( 0,1,2 )
 const fruits: Fruits = ['apple,'banana',cherry'] 

fruits[1] // fruits 라는 배열 데이터의 첫번째 아이템에 대괄호 표기법으로 인덱싱을 한다.

ex 2) 객체 데이터의 타입 지정하기
interface User {
[key: string]: unknown // 객체 데이터에 값을 할당하는 것이 가능하다.
name: string
age: number
}

const heropy: User = {
name: 'Heropy',
age: 85
}

// heropy 라는 객체 데이터에 대괄호 표기법 인덱싱을 통해 값을 할당
heropy['isValid'] = true
heropy['emails'] = ['aa@co','bb@co']
console.log(heropy)

ex 3) 
interface Payload {
 [key: string]: unknown
}

function logValues(payload: Payload){
for (const key in payload) {
 console.log(payload[key])
}
}

logValues(heropy)// 여기서 heropy의 타입도 [key: string] : unknown 이 포함되어 있어야 logValues의 매개변수로 쓰일 수 있음

 

- 확장(상속)

extends 키워드를 통해서 확장(상속) 가능

 

ex 1)

interface UserA {
 name: string
 age: number
}

interface UserB extends UserA { // UserA의 인터페이스 내용을 상속받아서 쓸 수 있다. 
 inValid: boolean
}

const heropy: UserA = {
 name: 'Heropy',
 age: 85,
 inValid: true // error 발생, 사용 불가
}

const neo: UserB = {
 name: 'Neo',
 age: 102
 isValid: true
}


ex 2)

interface FullName {
 firstName: string
 lastName: string
}

interface FullName { // 동일한 이름의 인터페이스를 만드는 것 가능하다.
 middleName: string  // 속성을 추가로 작성할 수 있다.
 lastName: boolean  // error, 하지만 기존 속성의 타입은 동일해야 한다.
}

const fullName: FullName = {
 firstName: 'Tomas',
 middleName: 'Sean',
 lastName: 'Connery'
}