#8 [3장_2] any 타입과 제네릭 타입의 차이점을 배열을 생성했을 때의 예시를 중점으로 설명해주세요!

[hyeyoonS]

❓문제

any 타입과 제네릭 타입의 차이점을 배열을 생성했을 때의 예시를 중점으로 설명해주세요!

🎯답변 요약

• any 타입을 사용하면 배열에 어떤 타입의 요소든 추가할 수 있지만, 타입 안전성이 없습니다.
• 제네릭을 사용하면 배열 요소의 타입을 특정할 수 있으며, 모든 요소가 동일한 타입임을 보장할 수 있어 타입 안전성을 확보할 수 있습니다. ⇒ 컴파일 타임에 타입 오류를 방지하고, 코드의 명확성과 유지보수성 향상可

🎯답변

/**
 * 1) 배열 선언에 제네릭 타입을 사용한 경우
 * 배열의 모든 요소가 제네릭 타입을 가지고 있음을 보장할 수 있습니다.
 * 따라서 요소 타입이 가지고 있지 않은 메소드를 사용하려고 하면 컴파일 단에서부터 에러를 잡아낼 수 있어 안정적인 코드를 작성할 수 있습니다.
*/
type genericArrayType<T> = T[]
const genericArray: genericArrayType<string> = ['kim', 'park', 'lee']
// 🚨 The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
genericArray.forEach((item) => console.log(item - 1))
genericArray.forEach((item) => console.log(item.length))

/**
 * 2) 배열 선언에 any 타입을 사용한 경우
 * any 타입에는 어떠한 값도 들어올 수 있기에 배열 안에 여러 타입의 요소가 들어올 수 있습니다.
 * 또한 any 타입에서는 어떠한 메소드를 사용해도 컴파일 에러가 발생하지 않습니다.
 * 예시와 같이 허용되지 않는 메소드 사용 시 치명적인 런타임 에러가 발생할 수 있습니다. 따라서 any 타입은 사용을 지양해야 합니다.
 */
type anyArrayType = any[]
const anyArray: anyArrayType = ['kim', 10, true]
anyArray.forEach((item) => console.log(item.length))
anyArray.forEach((item) => console.log(item - 1))

[drizzle96]

/**
 * 1) 배열 선언에 제네릭 타입을 사용한 경우
 * 배열의 모든 요소가 제네릭 타입을 가지고 있음을 보장할 수 있습니다.
 * 따라서 요소 타입이 가지고 있지 않은 메소드를 사용하려고 하면 컴파일 단에서부터 에러를 잡아낼 수 있어 안정적인 코드를 작성할 수 있습니다.
*/
type genericArrayType<T> = T[]
const genericArray: genericArrayType<string> = ['kim', 'park', 'lee']
// 🚨 The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
genericArray.forEach((item) => console.log(item - 1))
genericArray.forEach((item) => console.log(item.length))

/**
 * 2) 배열 선언에 any 타입을 사용한 경우
 * any 타입에는 어떠한 값도 들어올 수 있기에 배열 안에 여러 타입의 요소가 들어올 수 있습니다.
 * 또한 any 타입에서는 어떠한 메소드를 사용해도 컴파일 에러가 발생하지 않습니다.
 * 예시와 같이 허용되지 않는 메소드 사용 시 치명적인 런타임 에러가 발생할 수 있습니다. 따라서 any 타입은 사용을 지양해야 합니다.
 */
type anyArrayType = any[]
const anyArray: anyArrayType = ['kim', 10, true]
anyArray.forEach((item) => console.log(item.length))
anyArray.forEach((item) => console.log(item - 1))

[hyeyoonS]

• any는 타입 검사를 하지 않고 모든 타입이 허용되지만, generic은 배열 생성 시점에 원하는 타입으로 특정할 수 있습니다.
• 또한 제네릭을 사용하면 배열의 요소가 전부 동일한 타입이라고 보장할 수 있습니다.

// any 타입의 배열
let arrayAny: any[] = [];

arrayAny.push(1);        // number 타입 요소 추가
arrayAny.push("string"); // string 타입 요소 추가
arrayAny.push(true);     // boolean 타입 요소 추가

console.log(arrayAny); // [1, "string", true]

// 배열에서 요소를 꺼낼 때, 타입 검사가 되지 않습니다.
let firstElement: any = arrayAny[0]; // 타입이 any이므로 타입 체크 없음

// number 타입을 요소로 갖는 제네릭 배열
let arrayGeneric: Array<number> = [];

arrayGeneric.push(1);    // number 타입 요소 추가
// arrayGeneric.push("string"); // 오류 발생: string 타입은 number 타입에 할당할 수 없습니다.
// arrayGeneric.push(true);     // 오류 발생: boolean 타입은 number 타입에 할당할 수 없습니다.

console.log(arrayGeneric); // [1]

// 배열에서 요소를 꺼낼 때, 타입 검사가 이루어집니다.
let firstElement: number = arrayGeneric[0]; // number 타입으로 타입 체크됨

결론!

• any 타입을 사용하면 배열에 어떤 타입의 요소든 추가할 수 있지만, 타입 안전성이 없습니다.

• 제네릭을 사용하면 배열 요소의 타입을 특정할 수 있으며, 모든 요소가 동일한 타입임을 보장할 수 있어 타입 안전성을 확보할 수 있습니다.

  ⇒ 컴파일 타임에 타입 오류를 방지하고, 코드의 명확성과 유지보수성 향상可