Skip to content

React, Express에 TypeScript 적용하기

Dokyun Kim edited this page Nov 24, 2020 · 1 revision

React + TypeScript

리액트 프로젝트에 타입스크립트 설정하기

리액트에 타입스크립트를 적용하기 위해서는 타입 정의 패키지를 설치해야 한다.

npm install @types/react @types/react-dom

다음 명령어를 사용하여 타입스크립트 설정 파일(tsconfig.json)을 생성할 수 있다. (이 부분은 직접 생성해보는 것도 좋을 것 같다.)

npx typescript --init

tsconfig.json 은 VSCode가 타입스크립트 문법 검사를 할 때 사용될 뿐만 아니라 웹팩에서 설정할 ts-loader 가 이 파일을 참고해서 트랜스파일 작업을 하므로 중요하다.


컴포넌트 만들기

웹 그라운드 룰-변수명 컨벤션에 따라 컴포넌트 선언시 function키워드를 사용하기로 했는데, 이때 컴포넌트는 다음과 같이 선언할 수 있다!

src/Greetings.tsx

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string;
  optional?: string;
  onClick: (name: string) => void; // 아무것도 리턴하지 않는다는 함수를 의미합니다.
};

function Greetings({ name, mark, optional, onClick }: GreetingsProps) {
  const handleClick = () => onClick(name);
  return (
    <div>
      Hello, {name} {mark}
      {optional && <p>{optional}</p>}
      <div>
        <button onClick={handleClick}>Click Me</button>
      </div>
    </div>
  );
}

Greetings.defaultProps = {
  mark: '!'
};

export default Greetings;

App.tsx

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

const App: React.FC = () => {
  const onClick = (name: string) => {
    console.log(`${name} says hello`);
  };
  return <Greetings name="Hello" onClick={onClick} />;
};

export default App;

TypeScript 를 사용하신다면 만약 여러분이 컴포넌트를 렌더링 할 때 필요한 props 를 빠뜨리게 된다면 다음과 같이 에디터에 오류가 나타나게 됩니다.

그리고 만약 컴포넌트를 사용하는 과정에서 이 컴포넌트에서 무엇이 필요했더라? 하고 기억이 안날때는 단순히 커서를 컴포넌트 위에 올려보시거나, 컴포넌트의 props 를 설정하는 부분에서 Ctrl + Space 를 눌러보시면 됩니다.

Reference

  1. 리액트, 타입스크립트 시작하기
  2. 리액트 프로젝트에서 타입스크립트 사용하기: 벨로퍼트

Express +  TypeScript

src 디렉터리에 .ts 파일을 두고 dist 디렉터리에 .js 파일을 컴파일하여 생성하는 방식으로 작동하는 것 같다.

npm i -D @types/node @types/express

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "outDir": "dist"
  },
  "include": [
    "src/**/*"
  ]
}

package.json

{
  "scripts": {
    "start": "tsc && node dist"
  }
}

src/index.ts

import * as express from 'express' // 1
const app = express();

app.get('/', (req: express.Request, res: express.Response) => { // 2
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Example app listening on port 3000!');
});

Referenece

  1. microsoft/TypeScript-Node-Starter
  2. 위 리포지터리를 참조한 블로그 설명
Clone this wiki locally