[React기반 Gatsby로 블로그 개발하기] Typescript 적용하기

Typescript

타입스크립트 : 자바스크립트의 동적 타입으로 인해 야기될 수 있는 문제를 해결할 수 있음

const str: string = "This is String" // Good

const num: number = "This is String" // error TS2322: Type 'string' is not assignable to type 'number'.

React 컴포넌트 작성할 때 타입 표시해줄 수 있는 것은 컴포넌트를 저장한 변수 뿐

리액트에서는 기본적으로 함수형 컴포넌트를 위한 타입 제공해줌

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'

const IndexPage: FunctionComponent = function () {
  return <Text text="Home" />
}

export default IndexPage

`FunctionComponent`가 리액트에서 기본적으로 제공해주는 함수형 컴포넌트 타입

이를 통해 컴포넌트를 담는 변수에 타입을 지정해줄 수 있음

React에서 Types를 잘 활용할 수 있게 해주는 Generic

Generic이란 어떠한 클래스나 함수에서 사용할 타입을 그 함수나 클래스 사용할 때 결정할 수 있게 만들어주는 기능

• 확실히 숫자 데이터만 받을 것이라고 명시해주는 것이 Generic
• 아래는 Generic을 사용해 마든 Stack 자료구조

class Stack<DataType> {
  private data: DataType[] = []

  constructor() {}

  push(item: DataType): void {
    this.data.push(item)
  }

  pop(): DataType {
    return this.data.pop()
  }
}

• 아래와 같이 다른 타입의 데이터 추가할 때 에러 발생시킴

const stack = new Stack<number>()

stack.push('10') // error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Text.tsx 수정

리액트에서는 함수형 컴포넌트 타입에 Generic을 추가함으로써 컴포넌트가 받는 props가 어떤 것이 있고, 타입은 무엇인지 지정해줄 수 있습니다.

따라서 해당 컴포넌트에 props를 넘길 때에 정해진 타입에 맞는 데이터를 넘길 수 있도록 할 수 있습니다.

import React, { FunctionComponent } from 'react'

// type TextProps = {
//   text: string
// }
interface TextProps {
    text: string
}

const Text: FunctionComponent<TextProps> = function ({ text }) {
  return <div>{text}</div>
}

export default Text

현재 `index.tsx` 파일의 IndexPage 컴포넌트에서는 string 타입의 데이터를 props로 넘기고 있습니다.

숫자로 변경하면 에러 발생합니다

import React, { FunctionComponent } from 'react'
import Text from 'components/Text'

const IndexPage: FunctionComponent = function () {
  // return <Text text="Home" />
  return <Text text={10} /> // error TS2322: Type 'number' is not assignable to type 'string'.
}

export default IndexPage

이렇게 Types와 Generic을 통해 Props의 Type Checking이 가능합니다!

리액트에서 타입스크립트를 사용하는 가장 큰 이유중 하나입니다.