React 에서 typescript 사용

리액트에서 타입스크립트를 사용하자

Typescript 사용이유

Javascript 는 코드가 명확하지 않아서 에러 찾기 어렵다.
Type 을 지정해서 확실하게 만들자

사용예

Javascript 사용

people.js
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import ListItem from './ListItem';

const People = ({ peopleList }) => {
return (
{peopleList.map(person => (
<ListItem person={person} />
))}
);
}

export default People;

Typescript 로 전환

peopleList 가 Person 배열이란 것을 명확하게 해준다

people.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React from 'react';
import ListItem from './ListItem';

interface Person {
name: string,
age: number,
occupation?: string,
salary?: number,
}

interface PeopleProps {
peopleList: Person[],
}

const People = ({ peopleList }: PeopleProps) => {
return (
{peopleList.map((person: Person) => (
<ListItem person={person} />
))}
);
}

export default People;