React 에서 typescript 사용

Posted on Edited on In , Word count in article: 91 Reading time ≈ 1 mins.

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

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;