TypeScript Generics #1

Prologue

타입스크립트에서 Generic에 대한 개념을 배우고 나서, 이해를 돕기 위해 간단한 컴포넌트를 만들다가 접한 에러를 해결한 경험에 대해서 간략하게 정리합니다.

---

Generic Feature

제네릭은 재사용성이 높은 컴포넌트를 만들 때 활용되는 특징이 있습니다. 특정 타겟으로 하는 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 활용됩니다.

// 간단한 코드
function getName<T>(name: T): T{
 	return name; 
}

// 예시 1
const kyle = getName<string>('kyle');

// 예시 2
const steven = getName('steven');

위의 예시 2와 같이 'string'을 생략해도 컴파일 시 에러가 발생하지는 않지만, 정말 복잡한 코드 내에서 타입 추론이 되지 않을 경우 예시 1과 같이 적어주면 에러를 해결할 수 있습니다.

---

Problem Solving

다음과 같은 코드로부터 에러가 발생했습니다.

function getCompanyNameLength<T>(company: T): T{
  	return company.length;
}

제네릭 타입에 의해 string 값이 인자로 들어오면, 아무 문제없이 javascript에서 문자열에 length 메서드를 사용하듯이 return할 값으로 사용할 수 있을 것 같았는데, 컴파일 시 에러가 발생합니다.

왜 이런 문제가 발생할까요?
1. 현재 company라는 인자에는 .length라는 메서드가 있다는 단서는 없다.
2. 입력값으로 어떤 타입의 값이 들어오고, 반환 값이 어떤 타입인지 판단만 가능할 뿐, any 타입과 같이 동작하지만, 인자와 반환 값에 직접적으로 타입을 지정한 것은 아니기 때문이다.
문자열이 또는 배열이 들어와도, 컴파일러 입장에서는 length를 허용할 수 없다.

그렇다면, 위와 같은 문제를 어떻게 해결할 수 있을까요? 아래와 같이 코드를 적어주면 해결할 수 있습니다.

function getCompanyNameLength<T>(company: T[]): T[]{
 	return company.length; 
}

마치며

간단하게 generic을 사용할 때 마주칠 수 있는 문제에 대해서 정리해보았습니다.