[TS] 원시 타입, 리터럴 타입, 배열과 튜플, 객체

원시 타입: 하나의 값만 저장하는 타입

➡ number, string, boolean, null, undefined

 

1️⃣ number 타입

: number 주석을 사용한다 (annotation)

❗number 타입에 string 관련 함수를 사용할 수 없다.

// number
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;
num1.toFixed(); // number 타입에 적용 가능하면 ok

/* 오류 발생 */
num1 = "hello";
num1.toUpperCase();

 

2️⃣ string 타입

: string 주석을 사용한다.

❗string 타입에 number 관련 함수를 사용할 수 없다.

// stringlet 
str1: string = "hello";
let str2: string = `helllo`;
let str3: string = `hello ${num1}`;
str1.toUpperCase();

/* 오류 발생 */
str1 = 123;str1.toFixed();

 

3️⃣ null, undefined 타입

: null,  : undefined 주석을 사용한다.

 

⭐엄격한 null 검사

number 타입에 null을 넣고 싶으면 tsconfig.json의 strictNullChecks: false로 설정해야 한다.

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

//strictNullChecks: false이면 가능 true이면 오류 발생
let numA: number = null;

// tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "outDir": "dist",
    "strict": true,
    "strictNullChecks": false, // 엄격한 null 검사
    "moduleDetection": "force"
  },
  "ts-node": {
    "esm": true
  },
  "include": ["src"]
}

---

리터럴 타입

4️⃣ 리터럴 타입

: 값 주석을 사용한다.

값 그 자체가 타입 (리터럴 = 값)

// 리터럴 타입
let numA: 10 = 10; 

numA = 12; // 값을 넣었기 때문에 10이 아니면 불가능 

let strA: "hello" = "hello";
let boolA: true = true;

---

배열과 튜플

1️⃣ 배열

// 배열
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["a", "b", "c"];

// 제네릭 문법
let boolArr: Array<boolean> = [true, false, true];

// 배열에 들어가는 요소들의 타입이 다양할 경우
let multiArr: (string | number)[] = [1, "hello"];

// 다차원 배열
let doubleArr: number[][] = [
  [1, 2, 3],
  [4, 5],
];

 

2️⃣ 튜플

길이와 타입이 고정된 배열

❗인덱스의 위치에 따라 넣어야 하는 값이 정해져있고 순서를 지키는 게 중요할 때 튜플을 사용하면

값을 잘못 넣는 경우를 방지할 수 있다.

// 튜플
let tup1: [number, number] = [1, 2];
tup1 = [1, 2, 3]; // 길이가 맞지 않아서 불가능
tup1 = ["a", "b"]; // 타입이 맞지 않아서 불가능

let tup2: [number, string, boolean] = [1, "a", true];
tup2 = ["a", 1, true]; // 순서가 바뀌어서 불가능

// 길이 제한 x
tup1.push(1);
tup1.pop();
tup1.pop();

const users: [string, number][] = [
  ["김", 1],
  ["이", 2],
  ["박", 3],
  [4, "최"], // string, number 순서가 아니어서 불가능
];

 

---

객체

객체 리터럴 타입을 사용해야한다.

구조 기준 (구조적 타입 시스템: Property Based Type System)

↔ 이름 기준 (명목적 타입 시스템)

// object
let user: { id?: number; name: string } = {
  // ?를 붙이면 있어도 되고 없어도 된다는 뜻 - 선택적 property
  id: 1,
  name: "안수이",
};

let dog: { name: string; color: string } = {
  name: "돌돌이",
  color: "brown",
};

// readonly를 붙이면 변경 불가능
let config: { readonly apiKey: string } = {
  apiKey: "MY API KEY",
};

// 변경이 불가능하기 때문에 오류 발생
config.apiKey = "hacked";

---

이정환님의 인프런 강의 "한 입 크기로 잘라 먹는 타입스크립트(TypeScript)"를 참고하여 작성하였습니다.