[TypeScript] undefined is not assignable to type...

타입스크립드를 이용하여 스크립트를 작성하다가 보면

아래와 같은 에러 메세지를 볼 수가 있습니다.

undefined is not assignable to type

 

undefine은 할당할 수 없는 타입이라는 소리인데 아래와 같은 소스가 있다고 할때

 

interface Member {
  name: string,
  age: number,
  gender?: string,
  address?: string
}

function getMember() {
  let member = <Member>{name:"John"};
  return member;
}

let members: Member = getMember();
let name: string = member.name;

 

위의 소스에서는 undefined is not assignable to type.... 에러가 발생합니다.

이유는 Member 의 name  속성은 값이 있을 수도 혹은 없을 수도 있다고 선언되어 있기 때문입니다.

그래서 값이 미정의 되어 있는 undefine의 경우를 String 타입의 name 변수에 할당 할 수 없기 때문에 

위와 같은 에러가 발생 하는 것 입니다.

 

위와 같은 상황에서 아래와 같은 방식으로 에러처리가 가능합니다.

 

1. undefined 처리

let name: string | undefined = member.name;

변수와 바인딩 하려는 값의 타입은 같지만 undefine의 대한 처리가 안되어 있으므로 | 를 통해 undefine 처리를 한다.

 

2. default 값 설정

let name: string = member.name || ''; ==> 논리 or 연산자를 통한 처리
let name: string = member.name ?? ''; ==> nullish 병합 연산자를 통한 처리​

member.name 값이 undefine의 경우 논리or 연산자( || )를 통해 빈값(blank)으로 처리 하거나 nullish 병합 연산자(??)를 통한 처리가 가능하며, 둘의 차이점은 ?? 의 경우 undefine, null의 경우만 처리가 가능하나, ||의 경우는 false, undefined, null, 0, NaN, [] 등등의 처리도 가능하는 점이다.

 

3. undefine 값이 올 수 없는 경우로 선언

let name: string = member.name!;​

해당 값에 절대 undefine 값이 올 수 없다고 !를 붙여 선언하면 해당 에러가 더 이상 표시 되지 않는다.

물론 null 값이 존재할 수 있는 구조라면 좋은 방법은 아닌 것 같다.

 

4. as 구문의 통한 강제 변환

let name: string = member.name as string;​

as 구문을 이용하여 해당 값을 강제로 변환 할 수 있다.

 

5. 선언적 error 처리

if (!member.name) {
    throw new Error("Unexpected error: Missing name");
}

let name: string = member.name;

위와 같이 변수에 값을 할당하기 전에 해당 값이 없을 경우에 대한 에러 처리를 하면 undefined is not assignable to type... 에러가 발생하지 않는다. (위에서 이미 에러처리를 해버렸으니....)

 

6. 조건문 처리

let name: string = member.name == undefine ? '' : member.name;​

변수에 값이 할당 될때 조건문을 이용하여 undefine 값을 처리 함으로써 undefined is not assignable to type... 에러를 처리할 수 있다.

 

타입스크립드 활용시에 자주 보는 에러라 시간을 내서 따로 한번 정리 해 보았습니다.

이렇게라도 정리 하지 않으면 당최(?) 기억을 하지 않는 불성실한 머리를 가지고 있어서... ㅎㅎㅎㅎ;;;;