[ TypeScript ] type-challenges - 00014-easy-first

00014-easy-first

[ 문제 설명 ]
Implement a generic `First<T>` that takes an Array `T` and returns its first element's type.

[ 문제 ]

type First<T extends any[]> = any​

[ 예시 ]

type arr1 = ['a', 'b', 'c']
type arr2 = [3, 2, 1]

type head1 = First<arr1> // expected to be 'a'
type head2 = First<arr2> // expected to be 3​

 

 

타입의 맨 첫 번째 원소를 가져올 수 있는 First 타입을 정의하는 문제입니다. 

( First 타입은 유틸리티 타입처럼 이미 정의된 타입이 아니라서 사용자가 직접 작성해서 사용해요 ! )

---

배열의 길이 구하기

보통 배열의 길이를 구할 때 ' .length '를 많이 사용하지 않나요 ?
아래 코드 처럼요 !

const arr = [1, 2, 3];
console.log(arr.length); // 3

 

그런데 한 가지 방법이 또 있어요.

const arr = [1, 2, 3];
console.log(arr['length']); // 3

이렇게 대괄호 표기법을 사용할 수 있습니다 !

이게 왜 가능할까요 ?
우선 객체는 크게 두 가지 방법, 점 표기법과 대괄호 표기법으로 속성에 접근해요.

const obj = {
    korean: 80,
    math: 100,
    english: 90
};

// 점 표기법
console.log(obj.math) // 100

// 대괄호 표기법
console.log(obj['math']); // 100

 그리고 배열의 타입을 확인해 보면 object라고 나옵니다.

const arr = [1, 2, 3];

console.log(typeof arr); // object

즉, 배열은 특별한 기능을 가진 객체라고 보시면 돼요.
그래서 객체처럼 속성을 가지며, 객체와 동일하게 접근할 수 있죠.

---

혹시 객체의 길이를 구할 때 어떻게 하시나요 ?

위의 사진을 봤을 때,  점 표현법, 대괄호 표현법 둘 다 사용할 수 없는 것을 확인할 수 있습니다.
왜일까요 ?

위의 사진은 vscode에서 디버거를 통해 배열과 객체를 확인한 것인데,
arr은 속성으로 [ 0, 1, 2, length ] 를 가지고 있고, obj는 [ english, korean, math ] 를 가지고 있습니다.
즉, 객체는 속성으로 length를 가지고 있지 않기 때문에 length를 사용할 수 없었던 것입니다 !

❗ length 속성은 문자열과 배열에만 있다는 사실 ❗

---

그럼 배열 형태의 타입도 length 속성이 있을까요 ?
결과적으로 말씀드리자면, 있습니다 !

type t1 = [1, 2, 3];

type t1Len = t1.length;
// Cannot access 't1.length' because 't1' is a type, but not a namespace. 
// Did you mean to retrieve the type of the property 'length' in 't1' with 't1["length"]'?

하지만, 점 표기법은 사용할 수 없음을 확인하실 수 있으실 텐데요...
" t1은 네임스페이스가 아니다. "에서 네임스페이스는 짧게 설명드리자면,
코드를 구조화하고 충돌 방지를 위해 변수, 함수, 클래스 등을 하나의 그룹으로 묶어주는 컨테이너입니다. 
그리고 점 표기법은 오직 네임스페이스에 속한 것들에만 사용할 수 있어요.
그렇기 때문에 위의 코드에서는 오류가 생기게 된 것이죠 !

대괄호 표기법은 네임스페이스든 아니든 모두 사용이 가능하기 때문에 아래의 코드는 사용이 가능하답니다 ~!!

type t1 = [1, 2, 3];

type t1Len = t1['length'];

---

[ 정답 ]

type First<T extends any[]> = T['length'] extends 0 ? never : T[0]​

1. T는 배열 형태의 타입이 들어오기 때문에 'any[]'를 extends 시켜준다.
2. T['length']를 통해 배열 형태의 타입의 길이를 구한다.
3. 길이가 0이라면 첫 번째 원소는 없다는 의미이니까 never를 반환시킨다.
4. 길이가 0 이상이라면 첫 번째 원소를 반환시킨다.