object 타입 지정 - interface과 type

크롱·2023년 7월 24일
0

TypeScript

목록 보기
9/25

Object에서 typeinterface 키워드로 타입변수 생성가능합니다.
interface는 class처럼 생겼습니다.

🕺 interface


type Square = {color: string, width:number}
let 네모 :Square= {color:'red',width:100}

-----------------------------------------------------
    
interface Square {
  color : string,
  width : number
}

let 네모 :Square ={color:'red',width:100}

extends로 복사

extends 문법은 interface 여기에 복사해달라는 뜻입니다.

interface Student {
  name :string,
}
interface Teacher extends Student {
  age :number
}

let 학생 :Student = {name:'lu'}
let 선생 :Teacher = {name:'ko',age:30}

🧍‍♀️ type에선 &기호

&기호 intersection type
두 타입을 전부!!! 만족하는 타입이다.

type Animal = { 
  name :string 
} 
type Cat = Animal & { age: number }

let 냐옹 :Cat = {name:'냐옹',age:4}




👭 type vs interface

차이점
interface는 중복선언 가능
type은 중복선언 불가능

interface Student {
	name : string
}
interface Student {
	score : number
}
두개가 합쳐진다 ! 자동extends 처럼.
//Student {name:string,score:number}

💃 연습문제

1번

interface 이용해서 간단하게 타입을 만들어봅시다

interface Product {
	brand :string,
  	serialNumber :number,
  	mode : string[]
}

let 상품 :Product = { 
  brand : 'Samsung', 
  serialNumber : 1360, 
  model : ['TV', 'phone'] 
}

2번

array 안에 object 여러개가 필요합니다.
쇼핑몰 장바구니를 구현하려고 하는데
이렇게 생긴 object들이 잔뜩 들어갈 수 있는 array는 어떻게 타입을 지정해야할까요?

interface Cart {
  product : string,
  price : number
}

let 장바구니 :Cart[] = 
    [ { product : '청소기', price : 7000 },
     { product : '삼다수', price : 800 } ];


또는
interface 물품 {
  product: string;
  price: number;
}

type 장바구니 = [물품, 물품];
let 장바구니1: 장바구니 = [
  { product: '청소기', price: 7000 },
  { product: '삼다수', price: 800 },
];

3번

위에서 만든 타입을 extends 해봅시다.
갑자기 서비스가 업데이트되어서 일부 상품은 card 속성이 들어가야합니다.


위에서 만든 interface를 extends 해서 이 object의 타입을 만들어보십시오.

interface 물품 {
  product: string;
  price: number;
}
interface 새로운물품 extends 물품{
  card:boolean
}

4번

object 안에 함수를 2개 넣고 싶은데요

  1. 이 object 자료는 plus() 함수를 내부에 가지고 있으며 plus 함수는 파라미터 2개를 입력하면 더해서 return 해줍니다.
  2. 이 object 자료는 minus() 함수를 내부에 가지고 있으며 minus 함수는 파라미터 2개를 입력하면 빼서 return 해줍니다.

이 object 자료를 어떻게 만들면 될까요?
interface를 이용해서 object에 타입지정도 해보십시오.

정석답변
interface MathObj {
  plus : (a:number, b:number) => number, //함수타입지정
  minus : (a:number, b:number) => number
}

let 오브젝트 :MathObj = {
  plus(a,b){
    return a + b
  },
  minus(a,b){
    return a - b
  }
} 



뭔가이상한 내답변 >>>
interface 물품 {
  plus: Function;
  minus: Function;
}

const 함수: 물품 = {
  plus: function (a, b) {
    return a + b;
  },
  minus: function (a, b) {
    return a - b;
  },
};
console.log(함수.plus(2, 1));
profile
👩‍💻안녕하세요🌞

0개의 댓글