-
Notifications
You must be signed in to change notification settings - Fork 5
React, Express에 TypeScript 적용하기
Dokyun Kim edited this page Nov 24, 2020
·
1 revision
리액트에 타입스크립트를 적용하기 위해서는 타입 정의 패키지를 설치해야 한다.
npm install @types/react @types/react-dom
다음 명령어를 사용하여 타입스크립트 설정 파일(tsconfig.json
)을 생성할 수 있다. (이 부분은 직접 생성해보는 것도 좋을 것 같다.)
npx typescript --init
tsconfig.json
은 VSCode가 타입스크립트 문법 검사를 할 때 사용될 뿐만 아니라 웹팩에서 설정할 ts-loader
가 이 파일을 참고해서 트랜스파일 작업을 하므로 중요하다.
웹 그라운드 룰-변수명 컨벤션에 따라 컴포넌트 선언시 function
키워드를 사용하기로 했는데, 이때 컴포넌트는 다음과 같이 선언할 수 있다!
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;
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 를 눌러보시면 됩니다.
src
디렉터리에 .ts
파일을 두고 dist
디렉터리에 .js
파일을 컴파일하여 생성하는 방식으로 작동하는 것 같다.
npm i -D @types/node @types/express
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"moduleResolution": "node",
"outDir": "dist"
},
"include": [
"src/**/*"
]
}
{
"scripts": {
"start": "tsc && node dist"
}
}
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!');
});