[type script] 인터페이스

인터페이스란, 상호간에 정의한 약속 혹은 규칙을 말한다.

예를 들면) 객체의 속성과 그 타입, 함수의 매개변수 및 그 스펙, 배열과 객체를 접근하는 방식, 클래스 등

 

let person = { name: 'Capt', age: 28};

function logAge(obj: { age: number }) {
	console.log(obj.age); // 28
}

logAge(person); // 28

logAge()가 받는 매개변수 형태는 age를 속성으로 갖는 객체.

 

interface personAge {
  age: number;
}

function logAge(obj: personAge) {
  console.log(obj.age);
}
let person = { name: 'Capt', age: 28 };
logAge(person);

logAge()는 personAge라는 객체를 파라미터로 받는데, 그 personAge는 age라는 number타입의 프로퍼티를 가지고 있다.
출력값은 28.

 

옵션 속성

여기서 인터페이스를 사용할 때 정의되어 있는 속성을 꼭 모두 사용하지 않아도 된다.

interface 인터페이스_이름 {
  속성?: 타입;
}

interface personAge {
    name: string;
    age?: number;
}

function logAge(obj: personAge) {
    console.log(obj.name);
}

let person = {name:'Capt'};
logAge(person);

logAge는 personAge라는 객체를 파라미터로 받고있고, 그 personAge는 string타입인 name 프로퍼티와 number타입의 age?프로퍼티를 가지고 있다.
이때 age를 옵션 속성(=?)으로 선언했기 때문에 인자의 타입으로 선언해도 객체에는 age 속성이 존재하지 않는다.

장점은

단순히 인터페이스를 사용할 때 속성을 선택적으로 적용할 수 있다는 것뿐만 아니라, 인터페이스에 정의되어 있지 않은 속성에 대해서 인지시켜줄 수 있다는 장점이 있다. -> 추가는 자유로운데, 없는 속성에 대해서는 더욱 엄격하게 제어할 수 있다.

interface CraftBeer {
  name: string;
  hop?: number;
}

function brewBeer(beer: CraftBeer) {
  console.log(beer.from); // Error: Property 'from' does not exist on type 'Beer'
}

읽기 전용 속성

readonly 속성인데, 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다. 

interface CraftBeer {
  readonly brand: string;
}
// 처음 생성시에만 값을 할당하고 그 이후로는 변경을 불가능하게 하기 위해! (== const)

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

그렇기 때문에 인터페이스로 객체를 선언하고 나서 수정하려고 하면 오류가 발생한다.

읽기 전용 배열

배열을 선언할 때 readonlyArray<T> 타입을 사용하면 읽기 전용 배열을 생성할 수 있다.

let arr: ReadonlyArray<number> = [1,2,3];

arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error
arr = [10, 20, 30]; // error

객체 선언과 관련된 타입 확인

인터페이스를 이용해 객체를 선언할 때 좀 더 엄밀한 속성 검사를 진행한다.

interface Person {
    name?: string;
}

function print(person: Person) {
    console.log(person.name);
}

let person = {nam : 'sol'}; // error: Object literal may only specify known properties, but 'nam' does not exist in type 'Person'. Did you mean to write 'name'?

// 타입 추론을 무시하고 싶다면
let person = {nam : 'sol'};
print(person as Person); // undefined

여기서 undefined가 출력되는 이유는, 인터페이스에서 정의된 속성이 아니기 때문이다.

 

만약 인터페이스 내에 정의하지 않은 속성들을 추가로 사용하고 싶을 때는 아래처럼 사용한다.

interface Person {
    name?: string;
  	[propName: string]: any;
  // 정의되지 않은 속성들을 추가로 사용 가능!
}

함수 타입

interface login {
  (username: string, password: string): boolean;
}
// login 인터페이스는 string 타입의 매개 변수를 받고 boolean 타입을 return 하는 함수만 정의가 가능!

let loginUser: login = function(id: string, pw: string) {
    console.log('로그인 했습니다.');
    return true;
}

let logoutUser: login = function(id: string, pw: string) {
    console.log('로그아웃 했습니다.');
    return true;
}

클래스 타입 (implements)

클래스가 일정 조건을 만족하도록 타입 규칙을 정할 수 있다.

interface user {
  username: string; 
  print(name: string): void;
}

class Login implements user {
    username: string = 'sol';
    print(name: string) {
        console.log(name);
    }   
    constructor() {}
}

---

참고한 블로그

https://velog.io/@soulee__/TypeScript-Interface-2

[TypeScript] 인터페이스 (Interface) #2