📚챕터

리액트 코드를 효과적으로 작성하기 위한 타입스크립트 기본 활용법

📆학습 날짜

2024 / 01 / 04 (목)

---

👨🏻‍💻학습 내용

🎯 타입스크립트 기본 활용 팁

타입스크립트를 활용할 때 타입을 엄격하게,그리고 적극적으로 활용한다면 자바스크립트에서 발견하기 어려웠던 버그를 쉽게 찾을 수도 있고,코드의 품질도 한층 올릴 수 있을 것이다.

📌 any 대신 unknown

타입스크립트를 처음 작성할 때 실수 중 하나는 any를 자주 사용한다는 것이다.
그러나 any는 정말 불가피할 때만 사용해야 하는 타입이라고한다.
any를 사용한다는 것은 사실상 타입스크립트가 제공하는 정적타이핑의 이점을 모두 버리는 것이나 다름없다.

<script>
function doSomething(callback:any){
	callback()
}
//타입스크립트에서 에러가 발생하지 않는다.그러나 이 코드는 실행 시 에러가 발생한다.
doSomething(1)
</script>

doSomething함수는 callback을 인수로 받는데 이 타입이 any로 선언 되어 있어서 실제로 함수가 아닌 값이 들어가도 타입스크립트가 에러를 발생시키지 않는다.
실제로 이 코드가 문제가 되는 것은 런타임이 될 것이고,타입스크립트를 사용하는 의미가 없어질 것이다.any는 자바스크립트에서 타입스크립트로 넘어가는 과도기와 같은 정말로 예외적인 경우에만 사용하는 것을 권장한다.
대신 불가피하게 아직 타입을 단정할 수 없는 경우에는 unknown을 사용하는 것이 좋다.unknown은 모든 값을 할당할 수 있는 이른바 top type으로,어떠한 값도 할당할 수 있다. 그러나 any와는 다르게, 이 값을 바로 사용하는 것은 불가능하다.

<script>
function doSomething(callback:unknown){
    callback() // 'callback' is of type 'unknown'
}
</script>

에러 내용은 callback은 unknown, 즉 아직 알 수 없는 값이기 때문에 사용할 수 없다는 내용이다.
unknown으로 선언된 변수를 사용하기 위해서는 type narrowing, 즉 타입을 원래 의도했던 대로 적절하게 좁혀야 한다.

<script>
function doSomething(callback:unknown){
	if(typeof callback === 'function'){
    callback()
    }
    
    throw new Error('callback은 함수여야 합니다.')
}
</script>

typeof를 사용해서 unknown에 직접 접근하는 대신,해당 unknown 값이 우리가 원하는 타입일 때만 의도대로 작동하도록 수정했다.
이렇게 unknown에을 사용하는 것은 예상치 못한 타입을 받아들일 수 있음은 물론,사용하는 쪽에서도 더욱 안전하게 쓸 수 있다. any보단 unknown을 사용하는 습관을 들이자.

top type인 unknown에과 반대되는 bottom type으로 never가 있다.
이 never타입은 unknown과 반대로,어떠한 타입도 들어올 수 없음을 의미한다.
예를들어 같은 타입이 있다고 가정해보자.

<script>
type what1 = string & number
type what2 = ('hello' | 'hi') & 'react'
</script>

첫 번째 타입 what1에는 string과 number를 교차하는 타입을 선언했다.
그러나 당연하게도 string과 number를 둘 다 만족시키는 타입은 존재하지 않는다.따라서 이 경우 never가 선언된다.

두 번째 타입 what2의 경우도 마찬가지다.양쪽 두 타입에는 교차점이 없기 때문에 이 경우에도 never가 선언된다.

이처럼 코드상으로 존재가 불가능한 타입을 나타낼 때 never가 사용된다.

그렇다면 이것이 실제로 어떤 식으로 사용될 수 있을까?
타입스크립트로 클래스형 컴포넌트를 선언할 때 props는 없지만 state가 존재하는 상황에서 이 빈props, 정확히는 어떠한 props도 받아들이지 않는다는 뜻으로 사용이 가능하다.

<script>
type Props = Record<string,never>
type State = {
	counter: 0
}

class SampleComponent extends React.Component<Props,State>{
	constructor(props: Props){
    	super(props)
        this.state  {
        counter: 0,
        }
    }
    
    render() {
    return <>..</>
    }
}

export default function App(){
return(
<>
{/* OK */}
<SampleComponent />
{/* Type 'string' is not assignable to type 'never' */}
</>
)
}
</script>

위 SampleComponent는 어떠한 props도 받을 수 없는 대신,state가 존재한다. React.Component의 제네릭은 Props와 State를 순서대로 작성해야 하는데, Props의 경우 Record<string,never>로 작성해 어떠한 props도 받을 수 없도록 타입스크립트로 처리 할 수 있다.

📌 타입 가드를 적극 활용하자

unknown 타입의 예제에서 살펴봤듯이, 타입을 사용하는 쪽에서는 최대한 타입을 좁히는 것이 좋다.이러한 타입을 좁히는 데 도움을 주는 것이 바로 타입 가드다. 조건문과 함께 타입 가드를 사용하면 타입을 효과적으로 좁힐 수 있어 조금 더 명확하게 변수나 함수를 사용할 수 있다.
타입 가드 참고

📌 제네릭(generic)

제네릭(generic)은 함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응할 수 있도록 도와주는 도구다. 제네릭을 사용하면 타입만 다른 비슷한 작업을 하는 컴포넌트를 단일 제네릭 컴포넌트로 선언해 간결하게 작성 할 수 있다.

에를 들어, 하나의 타입으로 이루어진 배열의 첫 번째와 마지막 요소를 반환하는 함수를 만든다고 가정해보자. 다양한 타입에 대해 대응해야 하기 때문에 unknown이나 any를 사용하는 것을 고민해 볼 것이다.

<script>
function getFirstAndLast(list : unknown[]){
	return [list[0],list[list.length -1]]
}

const [first, last] = getFirstAndLast([1,2,3,4,5])

first // unknown
last // unknown
</script>

다양한 타입을 받아들이기 위해 top type인 unknown을 썼지만 정작 결과물도 unknown이 나와서 타입을 좁혀야만 했다. 사실 특정 타입의 배열이기 때문에 그 타입 또한 배열에 선언돼 있으므로 반환 값도 같은 타입으로 선언해도 무리는 없을것이다. 이럴 때 사용할 수 있는 것이 제네릭이다.

<script>
function getFirstAndLast(list : T[]): [T, T]{
	return [list[0],list[list.length -1]]
}

const [first, last] = getFirstAndLast([1,2,3,4,5])

first // number
last // number

const [first, last] = getFirstAndLast(['a','b','c','d','e'])

first // string
last // string
</script>

T라는 제네릭을 선언하여 이를 각각 배열의 요소와 반환 값의 요소로 사용했다.
제네릭 덕분에 getFirstAndLast 함수는 다양한 타입을 처리할 수 있는 함수가 되었다.

리액트에서 제네릭을 사용할 수 있는 코드를 손꼽는다면 가장 먼저 useState를 떠올릴 것이다.

<script>
function Component(){
 // state: string
 const [state,setState] = useState<string>('')
 //...
}
</script>

useState에 제네릭으로 타입을 선언한다면 state 사용과 기본값 선언을 좀 더 명확하게 할 수 있다. 흔히 useState()와 같은 형식으로 기본값을 넘기지 않고 사용하는 경우가 많은데, 이 경우에 값을 undefined로 추론해 버리는 문제가 발생한다. 제네릭으로 기본값을 선언해 준다면 이러한 문제를 타입스크립트가 방지해 줄 수 있다.

제네릭을 하나 이상 사용할 수도 있다. 단, 일반적으로 제네릭을 알파벳 T, U등으로 표현하는 경우가 대다수인데, 이 경우 제네릭이 의미하는 바를 명확히 할 수 없으니 적절히 네이밍 하는 것을 권장한다.

<script>
function multipleGeneric<Frist, Last>(a1: First, a2: Last):[First, Last]{
	return [a1, a2]
}

const [a, b] = multipleGeneric<string, boolean>('true',true)

a // string
b // boolean
</script>

📌 인덱스 시그니처

타입스크립트를 처음 접했을 때 가장 처음 부딪히는 난관이 바로 인덱스 시그니처(index signature)라고 한다.인덱스 시그니처란 객체의 키를 정의하는 방식을 의미한다.

인덱스 시그니처 참고

타입 스크립트 전환 가이드

• tsconfig.json 작성하기
• JSDoc과 @ts-check를 활용해 점진적으로 전환하기
• 타입 기반 라이브러리 사용을 위해 @types 모듈 설치하기
• 파일 단위로 조금씩 전환하기

💭 "언제 1장을 다 읽고 블로깅 하려나" 라는 생각을 엊그제 한것 같은데 
이렇게 1장 마무리 글을 작성하다니.. 2장으로 넘어갈 생각에 
급한 마음으로 타입스크립트 챕터를 작성한것 같아 찝찝하지만 , 
어느정도 학습하면서 리마인드 되는 몇몇 내용들이 있어서
되게 만족하며 블로깅을 할 수 있었던것 같다.
예정된 일정들부터 해결하고, 2장부터는 다음주 월요일부터 작성해보자.
책 내용 기반으로 글을 작성해왔지만 꾸준히 작성한 나에게 박수를 👏🏻..