[TypeScript] 타입스크립트로 카운터 만들기 예제

 

*Setup

 

명령 프롬프트 실행

 

1. 템플릿 먼저 설치하기

npm install cra-template-typescript -g

 

2. 새로운 프로젝트 생성하기

npx create-react-app 등록할파일명 --template typescript

ex>

npx create-react-app ts-react --template typescript

입력하여 폴더 생성

 

3. tsconfig.json 파일 내용 수정하기 ( 터미널에 npx tsc --init 명령어를 입력하면 tsconfig.json 파일이 자동생성 됨)

tsconfig.json 파일은 타입스크립트가 컴파일 될 때 필요한 옵션을 지정한다.

 

"target" : 컴파일 된 코드가 어떤 환경에서 실행될 지 정의한다.

예를 들어 화살표 함수를 사용하고 target을 es5로 하면 일반 function 키워드를 사용하는 함수로 변환을 해준다.

es6으로 설정하면 화살표 함수를 그대로 유지한다.

 

"strict" : 모든 타입 체킹 옵션을 활성화 하는 것을 의미한다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

 

4. 기존 Create React App 프로젝트에 TypeScript 추가하기

터미널에 입력

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

5. useState를 이용하여 카운터 예제 연습하기

src 폴더 안에 Counter.tsx 파일 생성

import React, {useState} from 'react';

function Counter() {
	const [count, setCount] = useState<number>(0);	//<number> 생략 가능(알아서 타입을 유추하기 때문), 카운트 기본 값 0
    const onIncrease = () => setCount(count+1);	//카운트 증가
    const onDecrease = () => setCount(count-1);	//카운트 감소
    return (
    	<div>
        	<h2>{count}</h2>
            <div>
            	<button onClick = {onIncrease}> + </button>
                <button onClick = {onDecrease}> - </button>
            </div>
        </div>
     );
}

export default Counter;

 

 

App.tsx 에서 렌더링 하기

 

import React from 'react';
import Counter from './Counter';

const App: React.FC = () => {
	return <Counter />;
};

export default App;