FE/Typescipt

[Typescript] Interface

따봉치치 2023. 9. 1. 18:35
728x90

 

인터페이스
  • 선택적 속성 ?
  • 읽기 전용 속성 readonly
interface User {
	name : string
	readonly age : number: string
	isValid?: boolean
}

const IU : User {
	name : 'IU',
	age : 12,
//isValid 속성은 선택적이므로 오류가 뜨지 않음
}

IU.age = 22 // readonly로 작성되었기 때문에 오류발생

 

 

호출 시그니처(Call Signature)

함수의 타입 지정

 

interface GetName { //호출 시그니처
	(message : string) : string
}

interface User {
	name : string
	age : number
	getName : GetName
	// getName : (message:string) => string //만약 함수를 재사용하지 않는다면 이런식으로 타입 지정해도됨
}

const IU : User = {
	name : 'IU',
	age : 12,
	getName(message : string) {
		console.log(message)
		return this.name
	}
}

IU.getName('Hello~')

 

 

인덱스 시그니처(Index Signature)

 

배열

interface Fruits {
	[item : number] : string
}

const fruits : Fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits[1])

 

객체

객체에 속성을 추가할 때 사용할 수 있음

interface User {
	[key : string] : unknown
	name : string
	age : number
}

const IU : User = {
	name : 'IU',
	age : 23
}

IU['isValid'] = true
IU['emails'] = ['thsh@gmail.com']

 

 

확장(상속)

 

interface FullName {
	firstName : string
	lastName : string

}

interface FullName {
	middleName : string
	lastName : string

}

const fullName : FullName {
	firstName : 'Tomas'
	middleName : 'Sean'
	lastName : 'Connery'
}
  • 인터페이스 이름을 중복되게 작성할 수 있음
  • 이때 속성의 이름이 겹칠 경우 속성의 타입은 동일하게 작성해 줘야 함
728x90