Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
Tags
- 상속
- interface
- code-push-standalone
- 글또10기x코드트리
- reactnative
- Filter
- supabase 페이지네이션
- 페이지네이션
- TS
- javascript
- map
- async
- react
- 스크롤이벤트
- generic
- array
- app.post
- 이진탐색
- supabase authentication
- 코드푸시
- codepush
- Spring
- extends
- xlsx-js-style
- Next.js
- meatadata
- set
- supabase auth
- 슬라이딩윈도우
- 타입스크립트
Archives
- Today
- Total
rhanziy
TS - interface 로 type 키워드 구현 본문
원래는 intersection type이라고 & 연산자를 통해 두 타입을 만족하는 코드를 짤 수 있었다.
// intersection type
// 두 타입을 만족하는 타입을 뜻함
type Animal2 = { name : string }
type Cat2 = { age : number } & Animal2
let munzi :Cat2 = { name : 'munzi', age : 10 }
그런데 interface로도 가능. extends 하면 되니까.
interface Student{
name : string;
}
interface Student{
score : number;
}
interface Teacher extends Student {
age : number
}
let 학생 :Student = { name : 'kim', score : 100 };
let 선생 :Teacher = { name : 'kim', age : 20, score: 75 }
type과 interface의 차이점은
interface는 더 유연해서 중복선언이 가능하다. Student를 한번이상 선언해도 오류X
그리고 중복속성을 미리 에러로 잡아준다.
무슨의미냐면 Student를 확장한 Teacher 인터페이스에서 name : number로 지정하는 실수를 해도 미리 알려준다는 뜻.
interface ModelInfo{
brand : string,
serialNumber : number,
model : string[]
}
let 상품 :ModelInfo = { brand : 'Samsung', serialNumber : 1360, model: ['TV', 'phone'] }
interface Cart {
product : string,
price : number
}
interface NewCart extends Cart {
card : boolean
}
let 장바구니 :NewCart[] = [
{
product : '청소기',
price : 7000,
card : true
},
{
product : '삼다수',
price : 800,
card : false
}
]
array object의 interface 타입 지정
interface Calc {
plus : (a: number, b:number) => number;
minus : (a: number, b:number) => number;
}
let homework4 :Calc = {
plus(a, b){
return a + b;
},
minus(a, b){
return a - b;
}
}
homework4.plus(2,5);
homework4.minus(6,5);
함수를 가지고있는 오브젝트의 interface 타입 지정
'Html_css_js' 카테고리의 다른 글
TS - interface 쉽게 작성하기(json데이터) (0) | 2023.03.13 |
---|---|
TS - rest 파라미터, destructuring type지정 (0) | 2023.01.28 |
TS - class의 타입지정 (0) | 2023.01.27 |
AJAX로 서버에 DELETE 요청하는법, 요청에 응답하는 여러가지 방법 (0) | 2023.01.17 |
TS - 함수의 type alias (0) | 2023.01.05 |
Comments