React/React-TypeScript
11. type? interface? 무엇을 써야 할까?
이게뭐당가
2022. 12. 29. 10:09
타입을 지정하기 위해서는, 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 사용 불가능
}