TypeScriptとは?


TypeScript


JavaScriptベースの言語では、JavaScriptはクライアントスクリプト言語であり、Type Scriptはオブジェクト向けのコンパイル言語である.
JavaScriptのすべての機能があります.

Types


JavaScriptのダイナミックタイプによる問題を解決します.タイプは次のように設定できます.

JavaScriptとType Scriptコードの例


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