인터페이스 관련 질문 드립니다 .

[강병민]

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

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

const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];

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

공부하다가 가져온 예제 코드입니다. 
위 코드에서 const shapes: Shape[] = [new Circle(5), new Rectangle(10, 5)];  부분 질문 드립니다. 
Circle과 Rectangle로 생성한 객체의 타입이 왜 Shape이 되는건지 궁금합니다. 
 
추가적으로

interface Person {
  name: string;
  age?: number; 
}
interface Developer extends Person {
  skills: string[];
}

const person: Person = {
  name: '김사람',
  age: 20
};

const expert: Developer = {
  name: '김개발',
  skills: ['javascript', 'react']
};

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

이 코드에서도 person,expert가 왜 Person타입이 되는건지도 궁금합니다. 
expert는 Developer 타입이고 , Developer 타입은 Person타입을 확장해서 skill 이라는 속성을 추가적으로 가지고 있는데 
왜 Person 타입이 되는건지 모르겠습니다 ㅠㅠ

[codingapple]

첫째는

class Circle implements Shape
class Rectangle implements Shape 
적어놔서 그런듯요 

둘째는 타입 infer기능 버그같은거라 
명확히 타입지정해서 쓰면 별일 없습니다

[강병민]

첫번째는 둘 다 Shape 를 implements 해서 그렇다는 걸로 이해하면 될까요??
두번째는 잘 이해가 안됩니다 ㅠㅠ

[codingapple]

넴 
타입스크립트의 infer 시스템이 이상해서 그럴 뿐입니다 타입직접 넣어서 씁시다

[글쓴이]

글