WIL : 23.05.06

23.05.04~ / TypeScript Study_Type, Props, React.ReactNode

기본 Type

Typescript는 정적언어로 컴파일시 타입을 결정하고, 오류를 확인한다.
기본적으로는 (변수명:타입)으로 작성한다.
ex) num1 :number → num1이라는 변수는 number타입
name:string[] 혹은 name:Array<string> → name이라는 변수는 string 배열타입

◼︎ Tuple

인덱스별로 타입이 다를때 사용할 수 있다.

ex) 
let b : [string, number];
b = ["Hello", 1];
b[0].toLowerCase();			...(O : string 타입이므로 가능) 
b[1].toLowerCase();			...(X : number 타입이므로 불가능)

◼︎ void, never

◻︎ void: 반환하는 값이 없을 경우 사용되며 형태는 다음과 같다.

  function APP():void {
     console.log("Hello");
  }

◻︎ never: 항상 error를 반환하거나 영원히 반복되는 loop일때 사용되며 형태는 다음과 같다.

//  error 반환시
function showERROR():never {
   throw new ERROR();
}

//    loop 반복시
function inLoop():never {
   while(true){

}

◼︎ enum

enum 타입의 경우 트리쉐이킹도 잘 되지않고, 숫자일 경우 불안정함을 보이기 때문에 사용을 권장하지 않고 있다. enum 타입 대신 union Type이나 const enum으로 사용하고 있으니 유의하자.

union Type 예시코드

//TypeScript .../constants.ts
export const DIRECTION = {
	UP: 0,
	DOWN: 1,
	LEFT: 2,
	RIGHT: 3,
} as const;
type DIRECTION = typeof DIRECTION[keyof typeof DIRECTION];

// index.js
import { DIRECTION } from '.../constants'

//트랜스파일
var DIRECTION = {
  UP: 0,
  DOWN: 1,
  LEFT: 2,
  RIGHT: 3,
};

const enum 예시코드

//TypeScript .../constants.ts
export const enum DIRECTION {
	UP = 0,
	DOWN = 1,
	LEFT = 2,
	RIGHT = 3,
}

//index.js
import { DIRECTION } from '.../constants';
console.log(DIRECTION.UP);

//트랜스파일
console.log(0 /* UP */);

※ null, undefined의 경우도 동일하게 사용하면 된다.

Props

Typescript의 장점 중 한가지는 Props를 받는 쪽에서 정할 수 있다는 점이다.
Props로 지정할 수 있는 변수들의 이름과 형태를 지정해주면 자식 컴포넌트에 Props로 넘겨줄때 일어날만한 문제점을 미리 방지할 수 있다.

import { Link } from "react-router-dom";

interface Props {
  children: React.ReactNode;
  to: string;
}

export default function NavigationBar(props: Props): JSX.Element {
  return (
    <div className="">
      <Link to={props.to}> {props.children} </Link>{" "}
    </div>
  );
}

위 코드에서 다음을 주목해보자.

interface Props {
  children: React.ReactNode;
  to: string;
}

interface 뒤에 props의 이름을 따로 선언해주고, 받고자 하는 속성값들을 정의하고 형태까지 정해줄 수 있다.
위 코드에서는 "Props" 라는 이름의 interface가 NavigationBar에 전달되는 props의 타입을 정의하고 있다. 이때 interface는 children과 to 두 개의 프로퍼티가 있으며, children은 React.ReactNode 타입이고, to는 string 타입임을 보여주고 있다.

이렇게 interface 를 사용하여 props의 타입을 명시함으로써, 개발자가 올바른 타입의 데이터를 전달하도록 도와주고, 코드의 가독성을 높이며, 코드의 유지 보수성을 향상시키는 등의 이점이 있다.

ℹ️ React.ReactNode?

React에서 사용되는 모든 노드(Node) 타입을 표현하는 TypeScript 타입으로 React에서 노드란, UI를 구성하는 요소를 말한다. (ex: div, span, input 등)
React.ReactNode 타입은 다양한 타입을 포함하며 string, number, boolean 등의 기본 타입뿐만 아니라 React.Component나 React.PureComponent와 같은 클래스 컴포넌트, 함수 컴포넌트, JSX 표현식 등을 포함한다.
따라서 React.ReactNode 타입을 사용하면, 해당 컴포넌트가 어떤 종류의 요소를 렌더링할 수 있는지 제한 없이 props로 전달할 수 있습니다.