JavaScript/TypeScript

Todo.gg 리팩토링 Object is possibly 'null'

짱닭 2021. 3. 25. 20:14
반응형
     let authorization:string|undefined = req.headers["authorization"];
    const accessToken=authorization.split(" ")[1]; 

authorization의 타입을 유니온( | )을 이용해서 string 또는 undefined 라고 지정했다.
그러면 밑에 authorization.split(" ")[1];이 부분에서 Object is possibly 'null' 에러가 뜬다.

위와같은 에러는 객체가 비어 있을 수도 있는데 해당 객체의 내부 메소드를 사용하거나 내부 객체 키에 값을 넣어주려고 할 때 발생한다.

해결방법

옵셔널체이닝 ( ? )

     let authorization:string|undefined = req.headers["authorization"];
    const accessToken=authorization?.split(" ")[1]; 

위처럼 에러가 발생한 곳에 ? 를 붙여서 사용한다.
위 코드는 아래와 동일하다.

const accessToken = authorization ? authorization.split(" ")[1] : null;

타입 단언 사용(type assertion) ( ! , as )

     let authorization:string|undefined = req.headers["authorization"]!; // ! 사용
    const accessToken=authorization?.split(" ")[1]; 
     let authorization:string|undefined = req.headers["authorization"] as string;  //as 사용
    const accessToken=authorization?.split(" ")[1]; 

타입 단언을 사용하면 개발자의 의도대로 타입을 주입하는 장점이 있지만, 남발하면 안된다.

interface Hero {
  name: string;
  skill: string;
}

// 타입 단언을 쓰지 않은 상황 -> 빈객체를 넣으면 name, skill 없다는 에러를 뜨는 아주 정상적인 상황입니다.
const hero: Hero = {}; // Type '{}' is missing the following properties from type 'Hero': name, skill ts(2739)

const a = {} as Hero; // 타입 단언 쓰면 name, skill이 없어도 에러 안뜸
a.name = "ss"; // 타입 추적 정상 작동

위 예시처럼 타입 단언을 쓰는 당시에는 타입에 대한 속성을 정의하지 않아도 에러가 발생하지 않는다.
따라서, 타입 단언은 꼭 필요한 상황에서만 써야 타입 추적이 제대로 될 수 있다.

if문 분기

if(!authorization){
      authorization="";
    }else{
      const accessToken=authorization.split(" ")[1]; 
      ...
    }

매번 if 문을 사용할 수는 없으니 위 두가지 방법 중 하나를 사용하는 것이 좋다.

타입 단언을 사용할 때도 타입 추적을 받지 않는 경우가 있기 때문에
옵셔널체이닝으로 null 핸들링하는 것이 좋아보인다.

출처 : https://kyounghwan01.github.io/blog/TS/object-null/#%ED%83%80%EC%9E%85-%EB%8B%A8%EC%96%B8-%EC%82%AC%EC%9A%A9-type-assertion

반응형