[ts] 인터페이스(interface) 알아보기

옵션 속성?🤔

인터페이스에 정의되어 있는 속성을 모두 사용하지 않아도 된다.
옵션 속성 ?를 사용하면 선택적으로 사용할 수 있다.

interface 인터페이스_이름 {
	속성? : 타입;
}

🌱객체에 접근하기

let obj = {};

const obj = {
	name: "kim"
}

console.log(user.name) 으로 확인하면 에러가 나온다.

그 이유는 첫번째, user에 대한 type, 즉 빈 객체만 선언해주어 name에 접근할 수 없다.

둘째, js와 ts의 코드 동작은 독립적이다. 타입이 오류를 발생시켜도 자바스크립트 런타임 동작에서

문제가 없다면 문제없이 실행된다. 그래서 이 부분에선 name으로 콘솔에 출력되는 것을 확인해볼 수 있다.

🌱 object 형식으로 interface만들기

type Score = "A" | "B" | "C" | "F";

 interface User{
     name: string;
     age: number;
     gender? :string;
     ///gender는 있어도 되는 옵션 속성 설정
   	 [hi:number] : Score;
     readonly birthYear?: number; // 할당만 가능하고 이후에 수정이 불가능하다. 
}

 let user : User = {   //User로 타입 지정
    name: "Gd",
    age: 30,
    1:"A",
   	birthYear: 12, //할당

 }

🌱 함수 만들기

interface Add{
     (num1:number):number;
  ///
 }


 const add:Add = (x) =>{
     return x
 }

🌱 클래스정의하기 (implements 사용하기)

 interface Car{
     color: string;
     wheels?: number;
     start?():void;
 }

 class Bmw implements Car {
     color
     constructor(c:string){
         this.color = c;
         console.log(this.color)
     }
 }

 const b = new Bmw("red")

🌱 interface는 확장이 가능하다

 interface Car{
     color: string;
     wheels?: number;
     start?():void;
 }


 interface Benz extends Car{
     door:number;

 }

 const c : Benz = {
     door: 4,
     color: "Red",
     //wheels?: 4, // ?가 붙은 객체는 가져올 수 없다.
     //start?():void;

}