타입스크립트 - 기본 사용법

 

타입스크립트는 기본적으로 C#이나 자바를 사용해보았다면 쉽게 적응할 수 있을 것 같다.

아래 코드는 타입스크립트가 어떻게 작동하는지 장난을 쳐보았다.

import React, { useState, ChangeEvent } from 'react';
import './App.css';

function App() {
  const [inputValue, setInputValue] = useState<number | string>('');
  const [inputType, setInputType] = useState<any>('');

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    const value = event.target.value;

    if (value === '' || /^[0-9]+$/.test(value)) {
      const parsedValue = parseInt(value, 10);

      if (parsedValue <= 99999) {
        setInputType(typeof inputValue)
        setInputValue(parsedValue);
      } else {
        setInputType(typeof inputValue)
        setInputValue(value);
      }
    }
  };

  return (
    <div>
      <input maxLength={20} type="text" value={inputValue} onChange={handleChange} />
      <div>Input Value: {inputValue}</div>
      <div>Current Type: {inputType}</div>
    </div>
  );
};

export default App;

 

입력값이 5자리 이하라면 string, 초과면 number로 출력하도록 만든 간단한 코드이다. 이 코드의 3, 4라인을 보면 useState로 inputValue는 num 아니면 string으로, inputType은 any 타입으로 지정되어 있는 것을 볼 수 있다. 전자는 union type이라 부르고, 후자는 모든 종류의 타입이 들어갈 수 있는 any 타입이다. 하지만 any를 많이 쓰는 것은 별로 좋지 않다고 생각하는데, 그럴거면 그냥 자바스크립트를 쓰지 뭐하러 타입 구분을 한단 말인가?

그리고 12~17라인을 보면 입력값이 5자리 이하라면 입력값이 5자리 이하라면 string, 초과면 number로 출력하는 부분이다. 여기서 union type이 지정된 타입 중 단 하나만을 표시할 수 있다는 것을 확인할 수 있다.