Typescript의 인터페이스

급변하는 기술 시장에서 살아남기 위해 Typescript 공부를 시작하였습니다...
과연 저는 살아남을 수 있을까요?!

👀 들어가기에 앞서...

타입스크립트에는 인터페이스라는 특수한 기능이 있는데요,
이번에는 다소 생소한 이 개념에 대해 알아보았습니다.

👀 인터페이스란?

이 인터페이스를 사용하면 객체의 구조를 마치 타입처럼 정의하여 사용할 수 있습니다.
인터페이스를 활용하면 비슷한 형태의 여러 객체를 생성할 수 있습니다.

물론 여기 예제가 있습니다.

//인터페이스는 구조만 정의할 뿐, 값을 정의하지 않습니다.
interface Student { //보통 대문자로 표현합니다.
	id:number;
    name: string;
	major:string;
    
    introduce(phrase:string):void;
    //메서드는 void 타입으로 정의합니다.
}

//인터페이스를 활용하면 아래와 같이 사용할 수 있습니다.
let student1:Student; //객체의 구조.타입을 인터페이스를 활용해 정의합니다.
student1={
  id:20230123,
  name:'Jin',
  major:'front-end',
  introduce(phrase:string){
    console.log(`학과: ${student1.major}/ 학번: ${student1.id}/ 이름: ${student1.name} / 한마디: ${phrase}`);
  }
}

그리고 이 인터페이스는 자바스크립트로 컴파일 되지 않으며,
개발 단계에서 유용하게 사용할 수 있습니다.

👀 인터페이스의 기능

▶ 읽기 전용

그리고 인터페이스에서는 readonly를 사용하여 해당 속성이 한 번만 설정되고 이후에 읽기 전용으로 사용되도록 설정할 수 있습니다. (private, public은 안됩니다!)

interface Student { 
	readonly id:number;
    name: string;
	major:string;
    
    introduce(phrase:string):void;
    
}

▶ 선택 적용

여러 객체를 생성할 때, 몇몇 객체에만 예외적으로 속성을 추가하거나 제외시키고 싶을 때가 있습니다.
예를 들어 몇몇 Student 객체에만 nickname 속성을 넣고 싶다던지요.

이 때 인터페이스는 속성을 선택적으로 적용할 수 있습니다.

interface Student { 
	readonly id:number;
    name: string;
  	nickname?: string, //? 를 사용하면 이 속성은 모든 객체가 반드시 가지고 있지않아도 됩니다. 
    introduce(phrase:string):void;
    
}

▶ 확장하기

인터페이스는 extends를 사용해 확장도 가능합니다.

interface StudentInfomation { 
	id:number;
    name: string;
    introduce(phrase:string):void;
}

interface StudentMajor extends StudentInfomation{
  major: string;
  printMajor(major:string):void;
}

let student1:Student={
  id:20230123,
  name:'Jin',
  major:'front-end',
  introduce(phrase:string){
    console.log(`학번: ${student1.id}/ 이름: ${student1.name} / 한마디: ${phrase}`);
  },
  printMajor(major:string){
    console.log(`학과: ${student1.major}/ 학번: ${student1.id}/ 이름: ${student1.name}`);
  }
}

▶ 함수 타입 대체하기

함수도 객체이므로 인터페이스를 사용할 수 있습니다.
아래는 기존에 배웠던 함수 타입으로 나타낸 예제입니다.

type fnMultiple=(num1:number, num2:number)=>number;

이를 인터페이스로 다음과 같이 표현할 수 있습니다.

interface fnMultiple{
  (num1:number, num2:number):number;
}

👀 굳이 인터페이스를 사용하는 이유

객체의 구조를 정의할 때는 주로 인터페이스를 사용합니다!

사용자 정의 타입, 유니언 타입 등을 사용할 수도 있기는 합니다만,
인터페이스를 사용하면 다음과 같은 장점이 있습니다.

• 인터페이스를 사용한 객체가 여러 개 있어도 쉽고 빠르게 구조를 파악할 수 있습니다.
• 상속과 다르게, implements 구문을 통해 한 클래스에 여러 인터페이스를 사용할 수 있습니다.

interface StudentInfomation { 
	id:number;
    name: string;
    introduce(phrase:string):void;
}

interface StudentMajor {
  major: string;
  printMajor(major:string):void;
}

//implements 구문을 통해 한 클래스에 여러 인터페이스를 사용할 수 있습니다.
//그리고 인터페이스를 사용함으로써 이 클래스에 위 인터페이스에 있는 프로퍼티, 메서드가 있음을 바로 알 수 있습니다.
class Student implements StudentInfomation, StudentMajor{
  //생략...
}

😝 마무리

오늘은 인터페이스에 대해 알아보았습니다.
이렇게 개념으로만 보면 어렵지 않을 것 같지만...
과연 프로젝트에서 잘 쓸 수 있을지 앞으로 저의 행보가 기대되는 군요!😂

저는 다음 시간에도 살아남을 수 있을까요?!

• 참고:
  • Typescript 공식문서: https://www.typescriptlang.org/docs/handbook/basic-types.html
  • 【한글자막】 Typescript :기초부터 실전형 프로젝트까지 with React + NodeJS
    https://www.udemy.com/course/best-typescript-21/