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 핸들링하는 것이 좋아보인다.
반응형