TypeScript에서의 Array 타입 표기법: T[] vs. Array<T> 완벽 분석

TypeScript에서의 Array 타입 표기법: T[] vs. Array<T> 완벽 분석

안녕하세요?

 

오늘은 TypeScript에서 사용되는 두 가지 Array 타입 표기법, 즉 T[]와 Array를 알아볼까합니다.

필자는 최근에는 후자 표기법 즉 Array<T> 방법을을 선호하는데요.

---

T[] vs. Array<T>

TypeScript에서는 문자열 배열을 나타내기 위한 두 가지 표기법이 존재합니다.

예를 들어 볼까요?

string[]
Array<string>

 

사실 두 표기법은 동일합니다.

---

왜 두 가지 표기법이 존재할까요? 왜 TypeScript는 T[]를 선호할까요?

두 가지 표기법이 존재하는 이유는 뭘까요?

TypeScript 0.9 버전에서 제네릭이 도입되면서 Array 표기법이 등장했는데요.

그 이전에는 T[]만이 배열을 표현하는 방법이었습니다.

그래서 0.9 이후에도 기존 상태를 그대로 유지한 것으로 보입니다.

예를 들어, 타입 추론이나 Array<T>로 작성된 타입을 표시할 때조차 T[]를 사용합니다.

우리가 React에서 많이 쓰는 JSX가 TypeScript의 T[]를 선호하는 한다고 해서 타입 추론에서 T[]를 사용한다고들 하는데,

사실 Array<T> 표기법도 JSX와 호환됩니다.

이 표기법은 오직 타입 수준에서만 존재하므로, .JSX 파일에서도 문제 없이 사용되는거죠.

그러나 JSX는 다음과 같이 딱 한개의 문법 사용을 불가능하게 만드는게 있는데요.

바로 앵글 브래킷을 통한 타입 단언( type assertions via angle brackets)입니다.

// .tsx 파일에서는 사용할 수 없습니다:
const value1 = <DesiredType>valueWithWrongType;

// 모든 곳에서 사용할 수 있습니다:
const value2 = valueWithWrongType as DesiredType;

---

Array<T> 표기법을 선호하는 이유

필자는 Array<T> 표기법이 더 보기 좋다고 생각하는데요.

특히 요소 타입과 관련된 표현이 복잡해질 때 그 차이가 더욱 명확하게 드러납니다.

// Array of tuples
type AT1 = Array<[string, number]>;
type AT2 = [string, number][];

// Array of union elements
type AU1 = Array<number | string>;
type AU2 = (number | string)[];

// Inferring type variables
type ExtractElem1<A> = A extends Array<infer Elem> ? Elem : never;
type ExtractElem2<A> = A extends (infer Elem)[] ? Elem : never;

// Readonly types
type RO1 = ReadonlyArray<unknown>;
type RO2 = readonly unknown[];
// `readonly` applies to `[]` not to `unknown`!

---

또 다른 이유로는 Array<T> 표기법은 Set<T>와 Map<K,V>와 유사하게 보입니다.

반면에 T[]는 TypeScript를 처음 접하는 사람들에게 [T]와 혼동될 우려가 있는데요.
(여기서 [T]는 단일 요소를 갖는 튜플을 의미합니다.)

 

또한, 타입 주석 없이 빈 배열을 생성할 때, 이 문법이 앵글 브래킷 타입 표기법과 일관성을 유지합니다.

const strArr = new Array<string>();

---

T[] 표기법의 한 가지 장점

TypeScript에서는 항상 T[] 표기법을 사용하므로, 이 표기법으로 작성된 코드가 언어 도구와의 일관성을 더 잘 유지합니다.

---

문법적 주의점: T[]의 []는 강하게 결합합니다

T[] 표기법에서 대괄호([])는 강하게 결합하므로, 단일 토큰 이상의 타입인 경우에는 반드시 괄호로 묶어주어야 합니다.

예를 들어 볼까요?

type ArrayOfStringOrNumber = (string | number)[];

 

다음 예제를 살펴볼까요?

const Activation = {
  Active: 'Active',
  Inactive: 'Inactive',
} as const;
type ActivationKeys = (keyof typeof Activation)[];
// ("Active" | "Inactive")[]

---

배열 표기법 린팅

typescript-eslint에서는 일관된 Array 타입 표기법을 강제하기 위해 array-type 규칙을 제공합니다.

선택 가능한 옵션은 다음과 같습니다.

• 항상 T[]
• 항상 Array<T>
• 단일 토큰 타입에는 T[]를, 그 외에는 Array를 사용

---

이상으로 T[] vs Array<T>에 대해 알아봤는데요.

 

여러분들도 Array<T>를 쓰는 걸 추천드립니다.

 

그럼.