[TypeScript] JS에서 TS로 전환하기(NextJS)

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

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

위 명령어를 통해 typescript, React타입 정의 패키지와 Node.js 타입 지원 패키지를 설치해야 한다.
그리고 사용중인 외부 라이브러리가 있다면 TypeScript를 지원하는지 확인하고, 해당 라이브러리의 타입 정의를 @types/{library-name} 형태로 설치해야 할 수도 있다.

2. TypeScript 설정 파일 생성

tsconfig.json 파일을 만들고,npm run dev 명령어를 실행하면 tsconfig.json 파일에 기본 내용이 작성된다.

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

3. 타입설정

// 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)

3-1. 커스텀 타입 및 인터페이스 작성

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;
}

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

커스텀 타입과 인터페이스를 활용하면 코드의 구조와 의도를 명확하게 나타낼 수 있다.
또한, 이를 통해 코드의 오류를 줄이고 팀원 간의 협업 효율을 높일 수 있다.