TS020. 자바스크립트 배열의 문제점과 타입스크립트 배열의 특징

자바스크립트 배열의 문제점: 의도치 않은 동작 초래

• 타입스크립트와 비교했을 때 타입이 없다.
  • 가끔 의도치 않은 동작을 초래할 수 있다.
• 자바스크립트 코드는 간혹 HTML Input Element 와 같은 곳에서 들어온 정제되지 않은 입력값을 타입과 상관없이 넣었다가 의도치 않은 연산을 초래할 수 있다.
  • ex) number 와 string 타입의 + 연산 자체는 문제 없지만 기대했던 값이 나오지 않을 수 있다.

let numbers = [1, 2, 3];
numbers.push(4); // OK
numbers.push("5"); // OK, but may lead to unexpected behavior since the array is now mixed type

let numbers: number[] = [1, 2, 3];
numbers.push(4); // OK
numbers.push("5"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

타입스크립트 배열

• 타입스크립트 배열은 강하게 타이핑이 가능하다.

const tsArr1: string[] = ["a", "b", "c"];
const tsArr2: number[] = [1, 2, 3];
const tsArr3: (string | number)[] = ["a", 1, "b", 2, "c"];
const tsArr4: string[] | number[] = ["a", "b", "c"]; // 위의 타입 표현과 헷갈리지 않도록 주의하기
const tsArr5: string[] | number[] = [1, 2, 3];

타입스크립트 배열 장점: 타입 추론에 의한 IDE 자동완성에 강하다.

• 아래 코드의 경우, 자바스크립트를 사용하면 IDE는 name 프로퍼티 값에 대한 자동완성을 지원하지 않는다.

let users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

// JavaScript treats these as generic objects
users.forEach((user) => console.log(user.name)); // No autocompletion for 'name'

• 타입스크립트는 타입 추론을 이용해 자동완성을 지원할 수 있다.

interface User {
  id: number;
  name: string;
}

let users: User[] = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
];

// TypeScript is aware of the structure of each object in the array
users.forEach((user) => console.log(user.name)); // Autocompletion for 'name' is available

• 기타 타입추론 예시

let booleans = [true, false, true]; // 타입스크립트를 쓰면 배열 만들었을 때 자연적으로 타입 추론이 일어남
booleans.push(1); // Error: 타입추론에 의한 타입에서 벗어나기 때문에 에러

let numbers = [1, 2, 3];

for (const number of numbers) {
  number; // number 타입으로 타입 추론 잘 됨
}

for (let i = 0; i < numbers.length; i++) {
  let item = numbers[i]; // number 타입으로 타입 추론 잘 됨
}

Spread Operator 타입 추론

• Spread Operator 를 사용해도 타입 추론이 잘 된다.

const arr1 = ["a", "b", "c"];
const arr2 = [1, 2, 3];

const spread = [...arr1]; // string[] 타입으로 추론됨
const spread2 = [...arr1, ...arr2]; // (string | number)[] 타입으로 추론됨

제네릭 함수

• 타입스크립트의 제네릭을 이용하면 재사용 가능하고 타입 안전한 배열을 만들 수 있다.
• 이를테면 타입 안정성을 유지하면서 모든 유형의 배열에서 작동하는 함수를 정의할 수 있다.

function getFirstElement(array) {
  return array[0];
}

let firstNumber = getFirstElement([1, 2, 3]); // 1
let firstString = getFirstElement(["a", "b", "c"]); // "a"

function getFirstElement<T>(array: T[]): T | undefined {
  return array[0];
}

let firstNumber = getFirstElement<number>([1, 2, 3]); // 1
let firstString = getFirstElement<string>(["a", "b", "c"]); // "a"

타입스크립트 배열에서 주의해야 하는 것

• 타입은 잘 추론하지만, 배열의 길이까지는 모른다.
• 길이가 정해진 튜플의 경우엔 잘 추론이 가능하지만, 일반 배열에 대해서는 선언한 길이의 인덱스를 한참 초과해도 알 수 없다.

const a = [1, 2, 3];
console.log(a[9999]); // 런타임에야 에러를 알 수 있다.