타입을 지정하기 위해서는, type 과 interface 를 사용한다.
interface PersonInterface {
name: string
age: number
}
const person1: Person = {
name: 'ms',
age: 29,
}
type PersonType = {
name: string
age: number
}
const person2: PersonType = {
name: 'js',
age: 30,
}
각각의 사용 이유에 대해 알아보도록 하자
1. 사용하는 데이터의 형태
interface PersonInterface { // 척봐도 객체만 사용가능하게 생겼다.
name: string
age: number
}
type PersonType = { // 여러가지 타입에 전부 사용 가능하다.
name: string
age: number
}
interface는 객체타입에만 사용 가능하다.
그렇지만 그게 큰 문제는 될 것 같지 않다.
2. 확장의 차이
타입의 경우
type msType = {
name: string
}
type msType = {
age: number
}
// Error : Duplicate identifier 'msType'
중복 선언이 불가능하다.
interface 의 경우
interface msType {
name: string;
}
interface msType {
age: number;
}
const person:msType = {
name:"ms",
age:30
}
// 편-안
선언전 확장을 지원한다.
이름만 동일하게 사용하고, 더 적으면 더 적힌다.
3. computed value 의 사용 가능 여부
// type 은 가능하다.
type names = 'firstName' | 'lastName' // 키를 따로 지정
type NameTypes = {
[key in names]: string // computed 로 value를 따로 지정
}
const ms: NameTypes = { firstName: 'ms', lastName: 'choi' } // 사용
// interface 는 불가능하다.
interface NameInterface {
// error
[key in names]: string // computed value 사용 불가능
}
'React > React-TypeScript' 카테고리의 다른 글
13. React 에서 MVVM 모델 구현해보기. 이거 맞나? 틀린 거 같음... Redux-toolkit 없이 (0) | 2023.01.16 |
---|---|
12. helper 함수에 fetch를 정의하고, 가져올 때 Type을 지정해보자 (0) | 2023.01.16 |
10. Redux-toolkit 과 함께 Typescript 사용하기 (2) 실전, useRef 를 이용해 받은 값, Redux Store 에 넣기 (0) | 2022.12.27 |
9. Redux-toolkit 과 함께 Typescript 사용하기 (1)기본 사용 (0) | 2022.12.27 |
8. 코드의 타입을 모르겠다고? 걱정하지 말자! 마우스를 올려봐! (0) | 2022.12.26 |
댓글