타입 종류 (TypeScript Types)

타입 종류 (TypeScript Types)

01. 타입 종류

- 문자

let str: string = '문자열'

let str: string;
let name: string = '김가을';
let hello: string = `안녕하세요. ${blue}님`;

- 숫자

let num: number = 123

let num: number; // undefined
num = 123; // 123
console.log(num);

let integer: number = 6;
let float: number = 3.14;
let hex: number = 0xf00d;
let infinity: number = Infinity;
let nan: number = NaN;

- 불리언

let bool: boolean = true

let bool: boolean;
let isTrue: boolean = true;
let isFalse: boolean = false;

- 배열

let arr: 배열타입[] = [값, 값, 값]

let arr: number[] = [1, 2, 3];
let animals: string[] = ['사자', '호랑이', '코끼리'];
let empty: never[] = []; // 빈 배열
let union: (string | number)[] = ['one', 2]; // 유니언 타입
let any: any[] = [1, 'two', true]; // any 타입

- 튜플 : 고정된 요소 수 만큼의 타입을 미리 선언 후 배열을 표현

let tuple: [타입, 타입, ...] = [값, 값, ...]

let tuple: [string, number] = ['one', 1];
let person: [string, number] = ['김겨울', 30];

- 객체

let obj: { key: 타입, key: 타입 } = { key: 값, key: 값 }

let obj: { name: string; age: number } = { name: '김겨울', age: 30 };
let person: { name: string; age: number; etc?: boolean } = { name: '김가을', age: 30, etc: true };
// ? : 선택적 프로퍼티
// etc?: boolean : etc 키는 있을 수도 있고 없을 수도 있음

- 객체 interface

• 객체의 타입을 미리 정의하여 사용
• 재사용성이 가능하고 가독성이 좋음

interface 인터페이스 { key: 타입, key: 타입 }

// interface 명명규칙 : 대문자로 시작
interface IPerson {
    name: string;
    age: number;
    etc?: boolean;
}

let userA: IPerson = { name: '김겨울', age: 3 };
let userB: IPerson = { name: '김가을', age: 2, etc: true };

- 함수 타입

let 함수명: (매개변수: 타입) => 반환타입 = (매개변수) => { ... }

const sum: (a: number, b: number) => number = (a, b) => {
    return a + b;
};

sum(1, 2); // 3

// void : 반환값이 없을 때 사용
const hello: (name: string) => void = name => {
    console.log(`Hello, ${name}!`);
};

hello('TypeScript'); // Hello, TypeScript!

06. React에서 ts 사용하기

타입스크립트를 사용하면 컴포넌트의 타입을 지정하여 개발할 수 있음

- 컴포넌트 생성

• 컴포넌트를 생성할 때 타입을 지정하기 위해 React.FC<Props>를 사용

const 컴포넌트명: React.FC<Props> = ({ props }) => { ... }

문법

import React from 'react';

// Props 타입 정의
type Props = {
    name: string;
};

// 컴포넌트 정의
const 컴포넌트이름: React.FC<Props> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

예시

// src/components/Hello.tsx
import React from 'react';

type HelloProps = {
    name: string;
};

const Hello: React.FC<HelloProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

- useState 사용하기

const [state, setState] = useState<타입>(초기값)

// src/components/Counter.tsx
import React, { useState } from 'react';

const Counter: React.FC = () => {
    const [count, setCount] = useState<number>(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <button onClick={() => setCount(count - 1)}>-1</button>
        </div>
    );
};

export default Counter;

- useReducer 사용하기

const [state, dispatch] = useReducer<Reducer<상태타입, 액션타입>>(reducer, 초기값)

// src/components/Counter.tsx
import React, { useReducer } from 'react';

type Action = { type: 'INCREASE' } | { type: 'DECREASE' };

function reducer(state: number, action: Action): number {
    switch (action.type) {
        case 'INCREASE':
            return state + 1;
        case 'DECREASE':
            return state - 1;
        default:
            throw new Error('Unhandled action');
    }
}

const Counter: React.FC = () => {
    const [count, dispatch] = useReducer(reducer, 0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
        </div>
    );
};

export default Counter;

- useContext 사용하기

const value = useContext<타입>(Context)

// src/components/Counter.tsx
import React, { useContext } from 'react';
import { CounterContext } from '../contexts/CounterContext';

const Counter: React.FC = () => {
    const { count, dispatch } = useContext(CounterContext);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => dispatch({ type: 'INCREASE' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREASE' })}>-1</button>
        </div>
    );
};

export default Counter;

- useRef 사용하기

const ref = useRef<타입>(null)

// src/components/Counter.tsx
import React, { useRef } from 'react';

const Counter: React.FC = () => {
    const inputRef = useRef<HTMLInputElement>(null);

    return (
        <div>
            <input ref={inputRef} />
            <button onClick={() => inputRef.current?.focus()}>Focus</button>
        </div>
    );
};

export default Counter;

- interface 사용하기

import { 인터페이스 } from '파일경로'

// src/interfaces/index.ts
export interface HelloProps {
    name: string;
}

// src/components/Hello.tsx
import React from 'react';
import { HelloProps } from '../interfaces';

const Hello: React.FC<HelloProps> = ({ name }) => {
    return <div>Hello, {name}!</div>;
};

export default Hello;

- 타입스크립트로 리액트 컴포넌트 작성 시 주의사항

• 컴포넌트의 props나 state를 정의할 때 interface나 type으로 정의
• 컴포넌트의 props나 state를 정의할 때 React.FC를 사용하여 정의