[TypeScript] 타입스크립트 인터페이스

1. 인터페이스

인터페이스는 타입과 비슷합니다.

	타입	인터페이스
확장	& 연산자로 타입 결합	extends로 다른 인터페이스 상속 가능
선언 병합	X	O (같은 이름 인터페이스는 자동 합침)
유연성	유니온, 튜플 등 더 복잡한 타입 표현 가능	객체 타입에 적합

 

1-1. 선택적 프로퍼티

age에 선택적 속성을 주겠습니다.

interface Person {
  name: string,
  age?: number
};

const person: Person = {
  name: "a"
}

 

1-2. 읽기 전용 프로퍼티

프로퍼티를 읽기 전용으로 사용할 수 있습니다.

interface Person {
  name: string,
  readonly age?: number
};

const person: Person = {
  name: "a",
  age: 20
}

person.age = 15; // 에러

 

1-3. 호출 시그니처와 메서드 시그니처

호출 시그니처와 메서드 시그니처를 사용할 수 있습니다.

interface Person {
  name: string;
  age: number;
  getName1: () => void; // 호출
  getName2(): void; // 메서드
}

let person: Person = {
  name: "a",
  age: 1,
  getName1: () => {
    return "a";
  },
  getName2: () => {
    return "b";
  },
};
console.log(person.getName1());
console.log(person.getName2());

 

	호출 시그니처 (Call Signature)	메서드 시그니처 (Method Signature)
용도	함수 타입 정의	객체 내 메서드 정의
위치	변수나 매개변수, 반환값 타입 정의시 사용	객체 타입 정의에서 메서드 속성 정의 시 사용
문법	(a: number, b: number) => number	add(a: number, b: number) : number
사용 예시	type Fn = (a: string) => void	type obj = { say(msg: string): void }

 

1-4. 오버로딩

함수 표현식으론 오버로딩이 불가능 합니다.

 

interface Calc {
  add(a: number, b: number): void;
  add(a: number, b: number, c: number): void;
  add: (a: number, b: number, c: number, d: number) => void; // 에러
}

 

그 이유는 구현부가 없는 선언 시그니처만 오버로드 대상이 되기 때문입니다.

 

add: (...) => void; 는 속성에 함수 타입을 직접 지정한 것입니다.

이 경우 add 라는 속성이 정확히 그 하나의 시그니처만 가진다고 인식합니다.

( (a, b) => {} 형태는 자바스크립트로 컴파일되고 단일 함수만 존재하기 때문에 )

 

이미 위에서 add(...)로 두 개의 오버로드 시그니처가 선언되었기 때문에

마지막 줄은 중복 선언이자 충돌입니다.

 

이렇게 작성하면 됩니다.

interface Calc {
  add(a: number, b: number): void;
  add(a: number, b: number, c: number): void;
}
const calc: Calc = {
  add: (a: number, b: number, c?: number) => {
    if (typeof c === "number") {
      console.log(a + b + c);
    } else {
      console.log(a + b);
    }
  },
};

calc.add(1, 2); // 3
calc.add(1, 2, 3); // 6