TypeScript - interface, TypeAlias

interface
클래스 또는 객체를 위한 타입을 지정할 때 사용하는 문법이다.

interface Shape {
  getArea(): number;
}

class Circle implements shape {
  radius: number;
  
  constructor(radius: number) {
    this.radius = radius;
  }
  
  getArea() {
    return this.radius * this.radius * Math.PI;
  }
}

class Rectangle implements Shape {
  width: number;
  height: number;
  constructor(width:number, height:number) {
    this.width = width;
    this.height = height;
  }
  getArea() {
    return this.width * this.height;
  }
}

const circle = newCircle(5);
const rectangle: Rectangle/*여기는 생략해도 되고 써도 된다.*/ = newRectangle(2, 5);

const shapes: Shape[] = [circle, rectangle];

shapes.forEach(shape => {
  console.log(shape.getArea());
})

2) interface를 가지고 객체의 타입도 지정해줄 수도 있다.

interface Person {
  name: string;
  age?/*여기에 '?'가 들어간것은 인터페이스에 age가 있을수도 있고 없을수도 있다는 소리다.*/ : number;
}

interface Developer extends Person{
  //name: string;	위와 같기 때문에 extends Person으로 위의 값을 상속받을 수 있다.
  //age?: number;
  skills: string[];
}

const person: Person = {
  name: 'Simon',
  age: 20,
}

const expert: Developer = {
  name: 'Sim'
  skills: ['Javascript', 'Typescript', 'react']
};

이렇게 우리는 interface를 사용해서 객체의 타입을 지정할 수 있다.

TypeAlias
위의 경우를 TypeAlias를 통해서 써줄 수 있다.

type Person = {
  name: string;
  age?: number;
}

type Developer = Person & /*여기서'&'는 위에서 객체의 값을 상속받는 역할을 한다.*/{
  skills: string[];
}

const person: Person = {
  name: 'Simon',
  age: 20,
}

const expert: Developer = {
  name: 'Sim'
  skills: ['Javascript', 'Typescript', 'react']
};

이렇게 되면 위에 우리가 작성한 interface와 똑같이 작동하는 코드가 된다.

💡 또한 TypeAlias를 통해서 interface에서는 못하는 몇가지를 해줄 수 있다.

type Person = {
  name: string;
  age?: number;
}

type Developer = Person & /*여기서'&'는 위에서 객체의 값을 상속받는 역할을 한다.*/{
  skills: string[];
}

const person: Person = {
  name: 'Simon',
  age: 20,
}

const expert: Developer = {
  name: 'Sim'
  skills: ['Javascript', 'Typescript', 'react']
};

type People = Person[];
const people: People = [person, expert];

type Color = 'red' | 'orange' | 'yellow';
const color: Color = 'orange';

💡또한 interface와 TypeAlias를 쓰려면 둘 중 하나를 일관성 있게 써야한다.