타입스크립트 interface와 jwt

jwt를 사용하다가 localstorage의 token을 가져와서 jwtDecode를 사용 후 정보를 얻어 사용하려는 도중 jwtDeocde의 값을 콘솔로그로 찍어 봤을 때 정상 출력됬지만 정작 typescript에서 값을 제대로 사용할 수 없는 문제가 생겼었다..

const token = localStorage.getItem('token')
    if (!token) {
        router.push('/loginpage')
    }
const tokenInfo = jwtDecode(token as any)

이렇게 쓰려고 했었다. 근데 tokenInfo 를 막상 사용하려니 속성이 없다고 떴다.

이는 token의 type이 any로 넘어와 undefined로 읽힐 수 있는 가능성 때문이었다.

TypeScript에서는 타입을 명시적으로 지정하지 않으면 jwtDecode로 얻은 tokenInfo 객체의 속성에 접근할 때 해당 속성이 존재하는 지 확인할 수 가 없다. TypeScript는 타입 안전성을 제공하기 때문에, 특정 속성이 객체에 존재한다고 보장하지 않으면 오류가 발생할 수 있다.

따라서 interface를 사용해 명시적으로 타입을 지정해준다

ex)

interface TokenInfo {
  id : string
  department : string
  position : string
  email : string
  iat : number
  exp : number

후

const token = localStorage.getItem('token')
    if (!token) {
        router.push('/loginpage')
    }
    const tokenInfo = jwtDecode<TokenInfo>(token as any)

해주면 제대로 속성을 뽑아올 수 있다.