[Typescript] 인터페이스 (interface)

인터페이스 (interface)

 

인터페이스는 여러가지 타입을 갖는 프로퍼티로 이루어진, 새로운 타입을 정의하는 것과 같다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다.

 

// 인터페이스 (Interface)

// 선택적 속성 - ?
// 읽기전용 속성 - readonly

interface Userr { // 파스칼케이스
  name: string;
  age: number; // 읽기만 가능, 재할당 하려고 하면 에러 발생
  isValid?: boolean;
  // name과 age는 필수인데, isValid는 선택적 속성임을 알려준다.
  // 있어도 되고 없어도 됨
}
const Ronaldo: Userr= {
  name:'Ronaldo',
  age: 36,
  isValid: true
}
const me:Userr = {
  name: 'Kazuha',
  age: 21,
  isValid: true
}

 

인터페이스의 함수 타입 지정

// 객체 속성 타입만 지정할 수 있는 것이 아니라, 함수의 타입도 지정 가능

// 함수 타입 - 호출 시그니처(Call Signature)

interface GetName {
  (message:string) : string
}
interface User {
  name: string
  age: number
  getName:GetName
}

const Ronaldo7: User = {
  name: 'Cristiano',
  age:36,
  getName(message: string) {
    console.log(message)
    return this.name
  }
}
Ronaldo7.getName('hello~')

 

인덱스 가능 타입

// 인덱스 가능 타입 - 인덱스 시그니처 (index signature)
// 이게 없으면 인덱싱할 수 없음. 인덱싱을 하려면 인덱스 시그니처를 추가해주어야한다.
// 배열데이터나 객체데이터에 타입을 지정할 수 있는 방법

// 확장(상속)

// 배열
interface Fruits {
  [items:number]: string; // 인덱스 시그니처
}
const fruits: Fruits = ['Apple', 'Banana', 'Cherry']
console.log(fruits)

// 객체
interface Userrr {
  [key:string]: unknown; // 객체데이터의 key부분의 내용은 문자로 작성해야하고, 그것의 값은 정확히 알 수 없다는 뜻
  name: string;
  age:number;
}

const cristianoRonaldo: Userrr = {
  name: 'cristiano',
  age: 38
}
cristianoRonaldo['isValid'] = true;
cristianoRonaldo['email'] = ['siuuuu@naver.com', 'siuuuu@hanmail.net'];
console.log(cristianoRonaldo);

 

인터페이스를 타입으로 하는 객체 리터럴의 경우, 새로운 속성을 추가하려고 할 때, 오류를 출력한다. 인터페이스에 정의 되지 않은 동적 타입이 할당되는 것을 typescript는 오류로 보기 때문이다. 이를 방지하는 게 인터페이스에 인덱스 시그니처 속성을 선언하는 것. 속성 이름 대신 대괄호 안에 key 타입을 작성하면 된다.

 

인터페이스의 확장(상속)

// 인터페이스 (Interface)
// 확장(상속)

interface UserA {
  name: string;
  age: number;
}
interface UserB extends UserA { // userB가 userA의 속성을 상속 받음
  isValid: boolean;
}

const hide: UserA = {
  name:'hide',
  age: 21,
  // isValid: true // 에러 발생
}
const yoshiki: UserB = {
  name:'yoshiki',
  age: 21,
  isValid: true
}

// 두 개의 인터페이스 이름이 같은 상황
// 이름이 같은 인터페이스를 만드는 것이 가능
// 한 번 지정된 속성은 중복되는 다른 인터페이스에서 같은 타입으로 만들어야지만 문제가 발생하지 않는다

interface FullName {
  firstName: string
  lastName: string
}

interface FullName {
  middleName: string
  lastName: string
}

const fullName: FullName = {
  firstName: 'muchas',
  middleName: 'gracias',
  lastName: 'aficion'
}