💫TS:: ✨강력한 Interface!

TypeScript의 핵심 원칙 중 하나는 타입 검사가 값의 형태에 초점을 맞추고 있다는 것인데, TypeScript에서, 인터페이스(interface)는

• 이런 타입들의 이름을 짓는 역할을 하고
• 코드 안의 계약을 정의하는 것뿐만 아니라
• 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다.

---

첫 번째 인터페이스 (Our First Interface)

어떻게 인터페이스가 동작하는지 확인하는 가장 쉬운 방법은 간단한 예제로 확인하기!

// interface 사용 전
// printLabel 함수는 string 타입 label을 갖는 객체를 하나의 매개변수를 갖는다
function printLabel(labeledObj: { label: string }) {
  console.log(labeledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

// interface 사용 후
// 문자열 타입의 프로퍼티 label을 가진 인터페이스로 작성
interface LabeledValue {
  label: string;
}

function printLabel(labeledObj: LabeledValue) {
  console.log(labeledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

Optional Properties

인터페이스의 모든 프로퍼티가 필요한 것은 아니다. 어떤 조건에서만 존재하거나 아예 없을 수도 있다.

선택적 프로퍼티들은 객체 안의 몇 개의 프로퍼티만 채워 함수에 전달하는 “option bags” 같은 패턴을 만들 때 유용하다!

interface PaintOptions {
  shape: Shape;
  xPos?: number;
  yPos?: number;
}

function paintShape(opts: PaintOptions) {
  // ...
}

const shape = getShape();
paintShape({ shape });
paintShape({ shape, xPos: 100 });
paintShape({ shape, yPos: 100 });
paintShape({ shape, xPos: 100, yPos: 100 });

---

Readonly properties

일부 프로퍼티들은 객체가 처음 생성될 때만 수정 가능해야 할 때 사용.

interface Point {
  readonly x: number;
  readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // 오류!

---

인덱스 타입 (Index Types)

인터페이스에서 속성 이름을 구체적으로 정의하지 않고 값의 타입만 정의하는 것을 인덱스 타입이라 한다.

interface SquareConfig {
  color?: string;
  width?: number;
  [propName: string]: any;
}

let squareOptions = { color: "red", width: 100 };
let mySquare = createSquare(squareOptions);

---

Extending Types

클래스처럼, 인터페이스들도 확장(extend)이 가능하다.

확장(extend)은 한 인터페이스의 멤버를 다른 인터페이스에 복사하는 것을 가능하게 해주는데, 재사용성 높은 컴포넌트로 쪼갤 때 유연하게 할 수 있다.

// 예제 1
interface BasicAddress {
  name?: string;
  street: string;
  city: string;
  country: string;
  postalCode: string;
}

interface AddressWithUnit extends BasicAddress {
  unit: string;
}

// 예제 2
interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

interface ColorfulCircle extends Colorful, Circle {}

const cc: ColorfulCircle = {
  color: "red",
  radius: 42,
};

---

교차 타입 (Intersection Types)

interfaces를 사용하면 다른 유형을 확장하여 다른 유형에서 새 유형을 구축할 수 있다. Intersection Types은 &연산자를 사용하여 정의한다.

interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}

type ColorfulCircle = Colorful & Circle;

참고 자료: typescript-kr.github.io