[TS] interface & class

 

목차

1. interface란?

2. interface 사용

3. 선택적 프로퍼티

4. 읽기 전용 프로퍼티

5. 인터페이스 클래스 타입

 

1. interface란?

타입스크립트에서 인터페이스는 두시스템 사이에 상호간에 정의한 통신규약이며 선언만 존재합니다. 타입을 미리 선언해주는 장치로서 사용할 수 있다. 미리 개발할 때 서로 공통적으로 사용할 부분을 미리 선언을 할 때 사용한다. 사용목적은 클래스와 함수간의 일관성을 유지할 수 있도록 하기 위함이다.

 

2.interface 특징

- ES6(자바스크립트)가 지원하지 않는 TypeScript 에서만 사용

- 컴파일 후에 사라진다 (자바스크립트에서 지원하지 않기 문이다)

- interface 간에 다중상속이 가능

 

interface  예시

// 인터페이스명은 대문자로 표기
interface IUser {
  name: string; // name 문자열
  age: number; // age 숫자
  fn1() : void; // fn1은 void 타입
}

// 인터페이스 자체를 타입으로 줘서 객체 생성
const user : IUser = {
  name : "Jaka",
  age : 33,
  fn1: ()=> {console.log("Hello World")};
};

// 매개변수를 인터페이스 타입으로 받기
function fn1(a: IUser): void{
  console.log(`${a.name} 은 ${a.age}살이야.`)
};

fn1(user); // jaka는 33살이야
person.fn1(); // Hello World

 

3. 선택적 프로퍼티 (Optional Properties)

인터페이스에 있는 속성을 다 사용해야 한다면 코드의 유연성이 사라질 수 있다. 이를 해결하기 위한 방법으로 우리는 선택적 프로퍼티라는 것을 사용할 수 있다. 문법은 (:) 전에 '?'를 넣어주면 된다. 아래의 코드로 예제를 보자

interface ICoffee {
  name : string;
  flavor?: string;
}

function orderCoffee(coffee: ICoffee){
  consolel.log(coffee.name);
}

let myCoffee = { name : "latte" }; // flavor는 명시 안함 
orderCoffee(myCoffee); // latte

interface ICustomer {
  name : string;
  age : number;
  tel? : string;
}

let customer : ICustomer = {
  name : "jaka",
  age : 30
}

customer.name = "jaka2";
customer.tel = "123-4567"; // 선택적 프로퍼티가 있으면 값을 나중에 추가할 수 있다.
customer.address = "서울"; // 정의되지 않은 속성을 마음대로 넣을수는 없음

 

4. 읽기 전용 프로퍼티 (readonly)

readonly는 인터페이스로 객체를 처음 생성할 때만 값을 할당하고 그 이후에는 변경할 수 없는 속성을 의미한다. 변하지 않는 값 const와 비슷하다고 생각하면 된다. 다음 예제를 보자.

interface Book {
  title : string;
  year : number;
  readonly writer : string; // 읽기 속성 전용
}

let book : Book = {
  title : "콩쥐팥쥐",
  year : 2002,
  writer : "김철수"
};

book.writer = "철수"; // Error 이후에는 수정이 불가능

 

5. 인터페이스 클래스 타입

인터페이스로 클래스를 정의하는 경우, implemets를 사용하면 된다.

interface IUser {
  name : string;
  getName() : string;
}

// IUser 인터페이스를 Implements 하면 User 클래스의 프로퍼티 구조는 반드시 IUser에 정의 된대로 따라야한다.
// 즉, 반드시 name, getNmae() 클래스에 기본값으로 구현해야 한다

class User implements IUser {
  name: string;
  
  constructor(name: string){
    this.name = name;
  }
  
  getName() {
    return this.name;
  }
}

const jaka = new User("jaka");
jaka.getName(); // jaka