TypeScript 기초 with Example

우린 그동안 Javascript를 기반으로 개발을 해왔다.
하지만 팀프로젝트, 대형프로젝트를 할수록 유지보수와 재사용에 대한 필요성이 점점 늘어난다.
'내가 나가면 다음 개발자는 내 코드를 잘 이해할까?'
'기존 프로젝트에 내가 들어간다면 전 개발자의 의도대로 개발할 수 있을까?'

그래서 Typescript라는 것을 사용해서 내 의도를 코드에 지정해줄 수 있다.

Typescript란?

Javascript를 기반으로 type 구문을 추가하여 나의 의도를 기록해 놓는 것.
오류를 컴파일 단계에서 잡아낼 수 있고 코드의 가독성을 높이며 디버깅의 효율성도 증대시킨다.

난 프론트엔드 개발자이며 React를 주로 사용하기에
React에서 Typescript를 사용하는 방법을 적을 것이다.

실습

먼저 install이 필요하다.

기존 프로젝트일 경우
npm i @types/react @types/react-dom typescript
이렇게 설치할 경우 기본적인 타입스크립트를 사용할 수 있다.
새 프로젝트일 경우
npx create-react-app [folderName] --template=typescript
이렇게 설치할 경우 타입스크립트로 기본 설정이 된 React앱이 생성된다.

먼저 useState를 사용해서 문자,숫자,배열,객체 별 타입을 보자.

interface IObject {
  name: string;
  age: number;
}

export default function App() {
  const [name, setName] = useState<string>("홍길동");

  const [object, setObject] = useState<{ name: string; age: number }>({
    name: "홍길동",
    age: 28,
  });

  const [object2, setObject2] = useState<IObject>({
    name: "홍길동",
    age: 28,
  });

  const [array, setArray] = useState<string[]>(["홍길동", "테스트", "가나다"]);

  const [arrObj, setArrObj] = useState<IObject[]>([
    {
      name: "홍길동",
      age: 28,
    },
    {
      name: "테스트",
      age: 1,
    },
    {
      name: "가나다",
      age: 999,
    },
  ]);

잘 보면 useState옆에 <type>이 있는데 <>는 제네릭(generics)이라고 한다.
그리고 App컴포넌트 위 interface가 있는데
이는 재사용될 수 있는 타입을 지정할 수 있다.
또 특별한 경우가 아닌경우 타입이 자동으로 들어가는 경우도 있으니 많이 사용해보자.

다음은 흔하게 많이 사용되는 event시 typescript를 써보자.

import { ChangeEvent, useState } from "react";

export default function App() {

  const [value,setValue] = useState<string>("")

  const changeValue = (e : ChangeEvent<HTMLInputElement>)=> {
    setValue(e.target.value);
  }

  return <div className="App">
    <input type="text" name="text" value={value} onChange={changeValue}/>
  </div>;
}

이처럼 event를 뜻하는 e는 React.ChangeEvent<HTMLInputElement>를 타입으로 지정했다.
다만 이처럼 ChangeEvent를 import하는 경우 React.을 생략할 수 있다.

앞써 본것처럼 <>제네릭으로 타입을 지정할수도, :를 사용해서 타입을 지정해줄 수도 있다.

다음은 여러타입을 받을 수 있는 법을 알아보자.

export default function App() {
  
  let name: string | null = null;

  name = "홍길동";

아주 간단하게 or을 뜻하는 |을 사용해서 지정할 수 있다.
(|는 backspace아래에 있다.)

배우다보면 얜 무슨타입을 지정해야할지 모르겠는데 어떡하지?
자꾸 빨간줄이 있어서 불편해! 하는 놈들이 조금씩 생긴다.
그럴땐 이렇게 전혀 관계없는 타입을 넣어보자.

 

이런식으로 null이 들어갈건데 boolean을 지정하면 어떡해!
여긴 string이 들어갈 자리야! 하고 힌트를 준다.
이점을 이용하면 초반에 배우는 과정에서 힘든것을 조금 줄일 수 있다!

앞으로는

typescript와 react를 조합해서 여러작업을 해볼 생각이다.
오늘도 화이팅!