Typescript 인터페이스(Interface)

Typescript 인터페이스

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

타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다

• 객체의 스펙(속성과 속성의 타입)
• 함수의 파라미터
• 함수의 스펙(파라미터 타입, 반환 타입 등)
• 배열과 객체를 접근하는 방식
• 클래스

인터페이스 사용해보기

먼저 인터페이스를 사용하지 않은 경우와 해당 코드를 인터페이스로 정의한 코드로 예를 들어보자

//함수에 전달할 24살 홍길동이라는 person객체를 만들었다
const person = {
    name : '홍길동',
    age : 24
}

// obj라는 매개변수로 받고 해당 매개변수의 속성중 age라는 특정 속성의 타입이 number지정되어있다
function helloMsg(obj: {age: number})
{
    console.log(obj.age);
}

// 맨위에서 만든 홍길동 객체를 helloMsg 전달하여 호출한다
helloMsg(person)

대표적인 데이터 타입들을 알아보자

• String : 자바스크립트 변수의 타입이 문자열인 경우 하기 코드와 같이 선언한다

  let name: string = "bts"; // 문자열의 값을 갖는다
  

• Number: 자바스크립트 변수의 타입이 숫자인 경우 하기 코드와 같이 선언한다

  let count: number = 5; // 정수중 값을 갖는다
  

• Boolean: 자바스크립트 변수의 타입이 진위값인 경우 하기 코드와 같이 선언한다

  let isLoggedIn: boolean = true; // true, false 중 값을 갖는다
  

• Array: 자바스크립트 변수의 타입이 배열인 경우 하기 코드와 같이 선언한다

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

• Tuple: 자바스크립트 변수의 타입이 배열이며 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열인 경우 하기 코드와 같이 선언한다

  let arr: [string, number] = ['bts', 14];
  

• Any: 기존에 자바스크립트로 구현되어 있는 웹 서비스 코드에 타입스크립트를 점진적으로 적용할 때 활용하면 좋은 타입, 단어 의미 그대로 모든 타입에 대해서 허용한다

  let str: any = 'hi';
  let num: any = 10;
  let arr: any = ['a', 2, true];
  

• Void: 반환 값이 없는 함수의 반환 타입, 아래와 같이 return이 없거나 return이 있더라도 반환하는 값이 없으면 함수의 반환 타입을 void로 지정한다

  function printSomething(): void {
    console.log('sth');
  }
    
  function returnNothing(): void {
    return;
  }
  

Typescript 함수

[함수 기본타입] 기존의 자바스크립트에 타입만 추가되는 형태로 아래와 같다

// a와 b라는 파라미터를 받으며 해당 파라미터는 number 데이터 타입만 들어올 수 있다
// 리턴값 역시 타입이 number로 리턴하는 값은 number 데이터 타입이어야한다
function sum(a: number, b: number): number {
  return a + b;
}

타입스크립트는 함수의 파라미터를 모두 필수 값으로 간주한다 따라서 기본적으로 함수의 매개변수를 설정하면 undefined, null 타입이라도 파라미터로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다

매개변수는 존재하지만 안넘기고 싶은 파라미터라면 아래와 같이 ? 키워드를 사용할 수 있다

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

[ES6 Rest문법이 적용된 함수]

Rest문법을 모른다면 👉🏻ES6 공식DOC 에서 자바스크립트의 Rest문법을 참고하자

  function sum(a: number, ...nums: number[]): number {
    const totalOfNums = 0;
    for (let key in nums) {
      totalOfNums += nums[key];
    }
    return a + totalOfNums;
  }