TypeScript - 배열, 튜플

TypeScript

 

✅ 자바스크립트에는 없는 튜플?

---

자바스크립트(JS)

• JavaScript는 동적 타입 언어라서, 배열 안에 어떤 값이 들어오든 신경 쓰지 않음.
• 배열의 길이나 요소 타입이 고정되는 개념이 없음.
• 순서는 보장되지만, 각 위치의 의미나 타입을 강제하거나 표현할 문법이 없음

const arr = ["hello", 42, true]; // 아무 문제 없음

 

따라서 자바스크립트는 튜플이 존재하지 않고, 배열만 존재한다.

아무 타입이나 넣을 수 있고, 순서를 보장하며 길이에 제한이 없다.

 

✅ 타입스크립트에서 존재하는 튜플, 배열과의 차이는?

---

타입스크립트(TS)

• TypeScript는 정적 타입 시스템을 가진 언어이기 때문에
• 배열을 좀 더 엄격하게 다루기 위해 **튜플(Tuple)**이라는 개념을 도입함

배열

const arr: (string | number | boolean)[] = ["hi", 10, true];

 

다양한 타입이 존재할 시, string이거나 number거나 boolean으로 이루어진 [] 배열

배열 구성원들의 타입이 유니언 타입 안에 한정 되어 있어서, 무슨 타입들로 이루어져 있는지는 파악이 가능하나

어떤 순서가 어떤 타입인지는 알 수 없다.

 

튜플

const tuple: [string, number, boolean] = ["hi", 10, true];

 

다양한 타입이 존재할 시, 각 순서와 타입이 일치하는 구성원들로 이루어진 [] 튜플

길이도 고정되어 있다.

 

✅ 사용 예시

---

import { useState } from "react";

export default function useMutation(url: string) {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<undefined | any>(undefined);
  const [error, setError] = useState<undefined | any>(undefined);
  function mutation(data: any) {}
  return [mutation, { loading, data, error }];
}

 

해당 코드에서는 useMutation에 return 타입을 명시하지 않았다.

그래서 return 되는 [mutation, { loading, data, error }]; 이 부분은 Function 타입과 Object 타입으로 이루어진 배열이라고만 인식한다.

result: (Function | Object)[]

 

그래서 return 되는 값을 배열로 구조 분해 할당을 사용하면 어떤 값이 어떤 타입인지 타입스크립트는 알 수 없다.

 

따라서 구조 분해 할당을 사용하여 원하는 값을 정확히 가져오기 위해선

import { useState } from "react";

export default function useMutation(
  url: string,
): [
  (data: any) => void,
  { loading: boolean; data: undefined | any; error: undefined | any },
] {
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<undefined | any>(undefined);
  const [error, setError] = useState<undefined | any>(undefined);
  function mutation(data: any) {}
  return [mutation, { loading, data, error }];
}

 

return 타입을 명시하여 튜플로 사용한다.

result: [Function, Object]