타입스크립트(TS) (2) 인터페이스, 타입 별칭

 

인터페이스(Interface)

인터페이스를 하나의 타입으로 하여 객체 데이터 할당 가능

이름은 파스칼케이스로 작성 (첫글자 대문자)

중괄호 안에 각 속성에 대한 타입을 명시. 재사용 가능

객체 데이터는 인터페이스의 모든 속성을 맞는 타입의 데이터로 가져야 함

interface User {
  name: string
  age: number
  isValid: boolean
}
const cado: User = {
  name: 'Cado',
  age: 5,
  isValid: true
}

 

? : 선택적 속성

readonly : 읽기 전용 속성

interface User {
  name: string
  readonly age: number //읽기 전용 속성. 할당연산자로 값을 바꿀 수 없음
  isValid?: boolean //선택적 속성. 지정하지 않아도 됨
}
const cado: User = {
  name: 'Cado',
  age: 5,
  // isValid: true
}
cado.age = 22 //오류 발생 (읽기 전용 속성)

 

 

함수 타입 - 호출 시그니처(call signature)

interface GetName {
  //호출 시그니처 - 함수 타입 지정. 소괄호 사용
  //매개변수 타입, 반환 데이터 타입 지정
  (message: string): string
}
interface User {
  name: string
  age: number
  getName: GetName
}
const cado: User = {
  name: 'Cado',
  age: 5,
  getName(message: string) {
    console.log(message)
    return this.name
  }
}
cado.getName('cado!')

 

 

인덱스 가능 타입 - 인덱스 시그니처(index signature)

- 배열, 객체

//배열
interface Fruits {
  //인덱스 시그니처 - 대괄호 사용
  [item: number]: string
  //아이템을 지정하는 키는 숫자, 각 아이템에 할당된 값은 문자
}
const fruits: Fruits = ['Apple','Banana','Cherry']
console.log(fruits[1]) //Banana

//객체
interface User {
  [key: string]: unknown //각 아이템을 식별하는 것은 string, 각 아이템의 데이터 타입은 unknown(무엇이 올지 모름)
  name: string
  age: number
}
const cado: User = {
  name: 'Cado',
  age: 5
}
cado['isValid'] = true
cado['emails'] = ['abc@gmail.com', 'def@naver.com']
console.log(cado) //name, age, isValid, emails를 속성으로 갖는 객체 데이터

 

 

인터페이스 확장 (상속)

interface UserA {
  name: string
  age: number
}
interface UserB extends UserA {
  //UserA의 모든 속성(name, age) 상속받음
  isValid: boolean
}
const cado: UserB = {
  name: 'cado',
  age: 5,
  isValid: true
}

//인터페이스는 동일한 이름으로 여러 개 만들 수 있음
//중복되는 인터페이스 부분에서 특정 속성의 타입 추가 작성 가능
//단 기존에 존재하는 속성을 그대로 적을 때는 타입도 그대로 적어야 함
interface FullName {
  firstName: string
  lastName: string
}
interface FullName {
  middleName: string
  lastName: string
}
const fullName: FullName = {
  firstName: 'avo',
  middleName: 'cado',
  lastName: '5'
}

 

---

 

타입 별칭(Alias)

- 타입에 별명을 부여. 단일, union, intersection 등 다양한 타입 지정 가능

- type 별명 = 타입

type TypeA = string
type TypeB = string | number | boolean

//User type은 객체 or 튜플 타입
type User = {
  name: string
  age: number
  isValid: boolean
} | [string, number, boolean]

const userA: User = {
  name: 'cado',
  age: 5,
  isValid: true
}
const userB: User = ['nana', 4, false]

type TypeA = string
type TypeB = string | number | boolean
function someFunc(param: TypeB): TypeA {
  switch(typeof param) {
    case 'string':
      return param.toUpperCase()
    case 'number':
      return param.toFixed(2)
    default:
      return 'boolean'
  }
}

 

객체데이터 만들 때 타입별칭 vs 인터페이스?

//타입별칭은 할당 연산자(=) 필요
type TypeUser = {
  name: string
  age: number
  isValid: boolean
}
interface InterfaceUser {
  name: string
  age: number
  isValid: boolean
}

 

기능적 차이는 없음

굳이 권장하자면 인터페이스를 권장한다고 하네요... (인터페이스는 객체 데이터를 전제하니까 근데 걍 그게그거)