티스토리 뷰
✏️TypeScript 타입스크립트를 익히기 2탄
타입스크립트, 저번에는 기본 타입에 대해서 포스팅했는데, 오늘은 TypeScript에서 지원해주는
interface에 대해서 포스팅하고자 한다.
잠시 기본 타입에 대해서 짚고 넘어가면,
const name: string = 'hoon'
위와 같이 선언하면 name에는 string 값만 받겠다는 뜻이고, 다른 타입이 들어갈 경우 name아래 빨간 줄이
그어지며 "해당 형식은 string 형식에 할당할 수 없습니다." 등의 에러 메시지가 보여진다.
타입을 지정해주는 것, 그게 타입스크립트다.
그러면, 저렇게 한 줄 코드가 아니라 여러 인자를 받는 함수가 있다고 가정해보자.
const user:{ name: string, age: number, gender: string } = {
name: 'hoon',
age: 27,
gender: 'male'
}
이전 포스팅대로라면 이렇게 선언할 수 있을 것 같다. 하지만 이런 객체가 많고, 또 중복되는 경우에는 어떻게 할까?
그런 경우 interface를 미리 지정해놓고, 사용할 수 있다.
interface User {
name: string,
age: number,
gender: string
}
const hoon:User = {
name: 'hoon',
age: 27,
gender: 'male'
}
또한, interface는 확장이 가능하다.
interface User {
name: string,
age: number,
gender: string
}
interface UniqueUser extends User {
isUnique: boolean;
}
const hoon:UniqueUser = {
name: 'hoon',
age: 1,
gender: 'male',
isUnique: false,
}
개발하면서, 이런 인터페이스를 용이하게 사용할 수 있을 것 같다.
더불어 인터페이스와 비슷한 "타입"이 있는데, 정말 비슷하지만 타입은 확장이 가능하지가 않다.
type User = {
name: string;
age: number;
}
const hoon:User = {
name: 'hoon',
age: 27
}
2탄 끝!
'TypeScript' 카테고리의 다른 글
[TypeScript] 타입스크립트 익히기 3탄 (0) | 2024.09.10 |
---|---|
[TypeScript] 타입스크립트 익히기 1탄 (0) | 2020.12.02 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- react native
- pagination
- Redux
- vue.js
- 포트폴리오
- pinia
- 호이스팅
- frontend
- typescript
- Front
- e2e
- CORS
- vuex
- vue
- three.js
- Core Components
- 자바스크립트
- 타입스크립트
- NUXT
- react
- 퍼블리셔
- composition
- vuetify
- react-query
- Store
- Cypress
- JS
- react query
- backend
- vue3
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
글 보관함