TypeScript란?

TypeScript

JavaScript 기반 언어로, JavaScript는 클라이언트 측 스크립팅 언어인데 비해 TypeScript는 객체 지향 컴파일 언어이다.
JavaScript의 모든 기능을 가지고 있다.

Types

JavaScript의 동적 타입으로 인한 문제를 해결한다. 다음과 같이 타입을 설정할 수 있다.

JavaScript vs TypeScript 코드 예시

JavaScript

function add(a, b) {
  return a + b;
}

TypeScript

function add(a: number, b: number) {
  return a + b;
}

TypeScript in React

IndexPage라는 변수의 타입 설정: 리액트에서 제공해주는 함수형 컴포넌트 타입

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

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

export default IndexPage

Generic

어떤 클래스나 함수에서 사용할 타입을 미리 정해놓는 게 X, 그 함수를 사용하면서 정함.

// Generic 사용 안 한 경우 스택에 숫자 5들어있는 상태에서 모르고 문자 'a' 넣으려고 하면 문제 발생.
class Stack {
  private data: any[] = []

  constructor() {}

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

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

// DataType: Generic 사용하여 Stack 만듦
class Stack<DataType> {
  private data: DataType[] = []

  constructor() {}

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

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

// Generic 사용시에 다음과 같이 원하는 타입 지정
const stack = new Stack<number>()
// 이제 스택에 숫자만 넣을 수 있음

리액트에서 함수형 컴포넌트 타입에 Generic을 사용하면 컴포넌트가 받는 props에 어떤 게 있고 타입은 뭔지 정해줄 수 있음. 그럼 해당 컴포넌트를 호출하는 쪽에서 정해진 타입에 맞는 데이터만 넘길 수 있게 됨.

import React, { FunctionComponent } from 'react'

type TextProps = {
  text: string
}

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

export default Text

---

참고
https://www.inflearn.com/course/gatsby-%EA%B8%B0%EC%88%A0%EB%B8%94%EB%A1%9C%EA%B7%B8/lecture/76337?tab=note&mm=close
https://velog.io/@pluviabc1/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90