JavaScript에서 TypeScript로 전환하기 (NextJS)

1. 왜 TypeScript를 사용해야 하는가?

1-1. 사전 오류 발견

// math.js
function sum(a, b) {
  return a + b;
}
sum(10, 20); // 30
sum('10', '20'); // 1020

// math.ts
function sum(a: number, b: number) {
  return a + b;
}
sum('10', '20'); // Error

 

1-2. 코드의 명확한 의도 전달

 

2. TypeScript 전환

2-1. TypeScript 관련된 패키지 및 외부 라이브러리 설치

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

2-2. TypeScript 설정 파일 생성

touch tsconfig.json

npm run dev

2-3. 파일 확장자 변경

// tsconfig.json
{
	...
	"allowJs": true,
	...

2-4. 타입 설정

1. 변수, 상수의 타입을 정의해줘야합니다.

// post.jsx
const [perPage, setPerPage] = useState(5);
const [page, setPage] = useState(1); 
const [search, setSearch] = useState('');

const [accessToken, setAccessToken] = useRecoilState(accessTokenState)
const [refreshToken, setRefreshToken] = useRecoilState(refreshTokenState)

// post.tsx
const [perPage, setPerPage] = useState<number>(5);
const [page, setPage] = useState<number>(1);
const [search, setSearch] = useState<string>('');

const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenState)
const [refreshToken, setRefreshToken] = useRecoilState<string>(refreshTokenState)

2-5. 커스텀 타입 및 인터페이스 작성

1. 커스텀 타입
TypeScript에서는 type이라는 키워드로 사용자 정의 유형을 생성할 수 있습니다.

// write.jsx
const [post, setPost] = useState({
    title: '',
    content: '',
    boardId: 0
});

// write.tsx
type WritePost = {
    title: string;
    content: string;
    boardId: number;
}
const [post, setPost] = useState<WritePost>({
    title: '',
    content: '',
    boardId: 1
});

위와 같이 useState훅에 제네릭 타입을 전달하여 사용할 수 있습니다. 이렇게 타입을 명시적으로 정의함으로써 코드의 안정성을 높이고, 대규모 프로젝트나 여러 팀원과의 협업에 있어 중요한 역할을 합니다. 제네릭을 활용하여 post 변수에 WritePost 타입을 지정하면, 잘못된 타입의 할당 시 TypeScript 컴파일러가 오류를 표시합니다. 이를 통해 오류 가능성을 대폭 줄일 수 있습니다.
 

2. 인터페이스 작성
인터페이스는 객체의 구조를 정의하는 데 사용되는 강력한 도구입니다. 예를 들어, 사용자 정보를 나타내는 인터페이스를 다음과 같이 작성할 수 있습니다.

// interfaces.tsx
export default interface ILoginReq {
    loginId: string;
    loginPw: string;
}

export default interface IResponseData {
    accessToken: string;
    refreshToken: string;
    userId: string;
    accessTokenExpiresAt: string;
    refreshTokenExpiresAt: string;
}

인터페이스를 사용하면 타입의 객체를 생성할 때 각 필드의 타입을 준수해야 합니다.

3. 총평