본문 바로가기
2024~/React

[타입스크립트] 객체 & 배열 & 튜플 타입 - 조합의 시작

by Or0i쿠 2025. 5. 26.

객체 타입 정의 

let a:{name:string, age?:number} = {name:"name"} //선택적 속성
let b:{name:string, age:number} = {name:"name",age:34}

선택적 속성으로 필수가 아닌 속성을 ' ?: ' 으로 정의하여 유동적으로 사용할수있다

 

읽기 전용(readonly) 배열

배열 타입 앞에 readonly 키워드를 붙여 읽기 전용 배열을 만들 수 있다.

let a:{readonly name:string, age?:number} = {name:"name"} //읽기 전용 배열
let b:{name:string, age?:number} = {name:"name",age:34}

a.name="changing" // error > 읽기 전용이라 수정안됨
b.name="changing" // Success

배열 타입 정의

//방법1 : let 배열 이름:타입 [] = ["타입에 맞는 값"]
let fruits:string[]=["apple","banana"]
let number:number[]=[1,2,3,4]

//방법 2 (잘 안쓰지만...)
let number:Array<number>=[1,2,3,4]

 

객체 배열 정의

let student:{name:string, age?:number}[]=[{name:"name1"},{name:"name2",age:18}]

튜플 타입 정의

let tuple:[string,number]

tuple=["string",1] // Success
tuple=[1,"string"] // error
tuple=["string",1,"string"] // error

유니온 (Union Types) 타입

 하나의 변수나 함수의 매개변수/반환값이 여러 가능한 타입 중 어떤 타입이든 될 수 있음을 명시할 때 사용한다

let tuple:[string|number|boolean , number]

객체 & 배열 & 튜플 타입 문제

 

2강 객체 & 배열 & 튜플 타입 | Notion

아래 객체를 보고 user의 타입을 작성하세요

equable-columnist-920.notion.site

 

타입스크립트 with 리액트

🚀 타입스크립트 강의 – 실무 필수 스킬 완벽 정리! 자바스크립트 개발자라면 이제 타입스크립트(TypeScript)는 선택이 아닌 필수! 이 강의에서는 타입스크립트의 기초부터 실전 활용까지 배우며

codingnoona.thinkific.com

 

'2024~ > React' 카테고리의 다른 글

[타입스크립트] 고급 타입- enum  (2) 2025.05.31
[타입스크립트] 3강- type, interface  (2) 2025.05.27
[타입스크립트] 원시 타입  (1) 2025.05.22
[MUI] 반응형  (0) 2025.04.26
[리액트] 영화 검색 정렬 &필터  (0) 2025.04.26