본문 바로가기

프론트엔드/Typescript

배열, 튜플, 객체

📌 배열

let numArr: number[] = [1, 2, 3];
let strArr: string[] = ['hello', 'im', 'soo'];
// 제네릭 문법
let boolArr: Array<boolean> = [true, false];

✨ 유니언 타입 - 배열에 들어가는 요소들의 타입이 다양할 경우 

let multiArr: (number | string)[] = [1, 'hello'];

✨ 다차원 배열의 타입을 정의

let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5],
];

 


📌 튜플

- 길이와 타입이 고정된 배열

let tup1: [number, number] = [1, 2];
tup1 = [1, 2, 3]; ❌
tup1 = ['1', '2']; ❌
let tup2: [number, string, boolean] = [1, '2', true];

const users: [string, number][] = [
    ['이정환', 1],
    ['짱구', 2],
    ['훈이', 3],
    ['맹구', 4],
    [5, '철수'], ❌❌❌
];

 


📌 객체

✨ 객체 리터럴 타입 / 구조적 타입 시스템

let user: { id: number; name: string } = {
    id: 1,
    name: '이정환',
};
user.id;

✨ 선택적 프로퍼티 (Optional Property) - ?: 

- 특정 프로퍼티를 상황에 따라 생략하도록 만들고 싶을 때 사용

let user: {
    id?: number; // ---> 선택적 프로퍼티가 된 id
    name: string;
} = {
    id: 1, 6 name: "이정환",
};

user = {
    id: "id", // 오류 ❌❌❌
    name: "홍길동",
};

 

👉 id 프로퍼티 뒤에 붙은 물음표의 의미는 이 프로퍼티는 이제 생략 가능한 선택적(Optional) 프로퍼티라는 의미.

👉 선택적 프로퍼티가 만약 존재한다면 그때의 value 타입은 반드시 number 타입이어야 함.

👉 따라서 다음과 같이 id 프로퍼티를 추가하고 value를 string 타입의 값으로 설정하면 오류 발생

✨ 읽기전용 프로퍼티 (Readonly Proprerty)

- 절대값이 수정되면 안 되는 프로퍼티일 경우 readonly를 붙여 읽기 전용 속성으로 변경

- 의도치 않은 프로퍼티의 수정 방지

 let config: { readonly apiKey: string } = {
    apiKey: 'My API Key',
};

config.apiKey = 'change Key'; ❌❌❌

 

출처 : 한 입 크기로 잘라먹는 타입스크립트(이정환 Winterlood) / 강의 바로가기

'프론트엔드 > Typescript' 카테고리의 다른 글

원시타입, 리터럴 타입  (0) 2023.07.17
기본타입, 초기 환경 설정  (0) 2023.07.16
타입스크립트란?  (0) 2023.07.13