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
'FE > Typescipt' 카테고리의 다른 글
[Typescript] tsconfing.json 구성 옵션 (0) | 2023.09.01 |
---|---|
[Typescript] Generic (0) | 2023.09.01 |
[Typescript] Class (0) | 2023.09.01 |
[Typescript] 함수 (0) | 2023.09.01 |
[Typescript] Type (0) | 2023.09.01 |