타입스크립트 타입 종류

기본 타입

Boolean

// true / false 값
let isDone: boolean = false;

Number

// 2진수, 8진수, 10진수, 16진수 값도 지원한다.
let integer: number = 4;
let float: number = 1.12;
let binary: number = 0b1010;

String

let name: string = "yun";
let myName: string = 'My name is' + name;

---

배열 타입

Array

// 두 가지 방법으로 쓸 수 있다.
let temp: string[] = ['one', 'two', 'three'];
let temp: Array<string> = ['one', 'two', 'three'];

// 타입을 지정할 수 있다.
let nums:number[] = [100, 101, 102];
let boos:boolean[] = [true, false, true];
let someArr: any[] = [0, 1, {}, [], 'str', false];
let selects:(number | string)[] = [102, 'apple'];

Tuple

// 크기와 타입이 고정된 배열이다.
let x: [string, number];

x = ["hello", 10]; // 성공
x = [10, "hello"]; // 오류
x = ["hello", 10, 99]; // 오류

// 단, push()나 splice()를 통해 값을 넣는 행위는 막을 수 없다.
let tuple: [string, number];
tuple = ['a', 1];
tuple = ['b', 2];

tuple.push(3);
console.log(tuple); // ['b', 2, 3];
tuple.push(true); // 오류. 정의되지 않은 타입은 넣을 수 없다.

Enum

// 특정 
let x: [string, number];

x = ["hello", 10]; // 성공
x = [10, "hello"]; // 오류
x = ["hello", 10, 99]; // 오류

// 단, push()나 splice()를 통해 값을 넣는 행위는 막을 수 없다.
let tuple: [string, number];
tuple = ['a', 1];
tuple = ['b', 2];

tuple.push(3);
console.log(tuple); // ['b', 2, 3];
tuple.push(true); // 오류. 정의되지 않은 타입은 넣을 수 없다.

---

기타 타입

Object

• 객체, 배열, 함수 모든 것이 해당된다.
• 여러 타입의 상위 타입으로 인식된다.
• 구체적으론 number, string, boolean, bigint, symbol, null, 또는 undefined가 아닌 나머지를 의미한다.

let obj: object = {};
let arr: object = [];
let func: object = function () {};
let nullValue: object = null;
let date: object = new Date();

• 많은 타입을 아우르고, error를 띄우기 때문에 추천되지 않음!

Any

• 모든 타입을 허용한다.
• 남용하면 타입스크립트를 쓰는 이유가 없어진다.

let any: any = 123;
any = 'Hello world';
any = {};
any = null;

Unknown

• any와 같이 모든 타입을 허용한다.
• 단, any보다 엄격하여 연산을 할 수 없다.

let valueNum: unknown = 10;
let valueStr: unknown = 'Test';

console.log(valueNum.length); // 오류
console.log(valueStr.length); // 오류

Void

• any 타입의 반대 개념이다.
• 보통 함수에서 반환 값이 없을 때 사용한다.

function hello(n: number): void {
  let sum: number = n + 1;
}

Undefined / Null

• 모든 타입의 하위 타입으로 분류된다.
• 즉, 어떤 타입에도 할당할 수 있다.

let num: number = undefined;
let str: string = null;
let obj: { a: 1, b: false } = undefined;
let arr: any[] = null;
let und: undefined = null;
let nul: null = undefined;
let voi: void = null;

---

React 타입

React.FC

• React + Typescript 조합으로 개발할 때 사용하는 타입이다.
• 함수형 컴포넌트를 사용할 때 타입 선언에 사용할 수 있다.
• props의 타입을 간결하게 표현하기 위해 만들어졌다.

import { FC } from 'react'

interface Props {
    name: string
}

const Foo: FC<Props> = ({ name }) => {
    return (
        ...
    )
}

• 한때 FC 사용이 지양되었던 이유는 FC가 children을 암시적으로 갖고 있었기 때문이다.

const App: React.FC = () => {
  return <div>hi</div>
}

const Example = () => {
  return (
    <App> // App에 children을 넘겨주고 있음에도 에러가 발생하지 않았음
      <div>Unwanted children</div>
    </App>
  )
}

• React 18 버전 이후 children은 삭제되었다. 해당 문제는 발생하지 않는다!
• 개발자의 판단에 맞게 사용하면 된다.

ReactNode

• children 속성 타입으로 가장 많이 사용된다.

import { ReactNode } from 'react'

interface Props {
  children: ReactNode
}

const Component: FC<Props> = ({ children }) => {
  return <div>{children}</div>
}

• 사용 가능한 범위는 다음과 같다. jsx에서 사용할 수 있는 모든 요소의 타입을 포함하는, 가장 광범위한 타입이기도 하다.

type ReactNode =
  | ReactElement
  | string
  | number
  | Iterable<ReactNode>
  | ReactPortal
  | boolean
  | null
  | undefined

ReactElement

• JSX 요소를 허용한다.
• 리액트에서는 JSX 문법으로 UI를 표현하고, 트랜스파일러는 JSX 문법에서 createElement 메서드를 통해 리액트 엘리먼트를 생성한다.
• 함수형 컴포넌트의 리턴값에 해당된다.

// jsx 문법
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

// createElement 메서드 사용
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

---

출처

• 📘 타입스크립트 타입 선언 & 종류 💯 총정리
• React에서 TypeScript가 쓰고 싶다면 알아야 할 타입들
• React 컴포넌트 타입인 ReactElement vs JSX.Element vs ReactNode 차이와 예시