-
[Typescript] undefined 관련 error 처리 방법Language/Typescript 2023. 1. 6. 15:19
const getS3Data = async (filePath: string) => { //..... const getParmas = { Bucket: process.env.S3_BUCKET_NAME, Key: filePath, }; const data = await s3Client.send(new GetObjectCommand(getParams)); //... }
s3에서 데이터를 가져오는 함수(위의 코드)를 작성하던 중 아래와 같은 오류 메시지가 발생했다.
TS2322: Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'.
오류의 원인은 GetObjectCommand 생성자 함수의 인자의 타입은, 키의 value를 string으로 받는 객체 타입이었는데
내가 인자로 준 getParams의 Bucket 키의 값이 string | undefined 였기 때문이다.
process.env로 가져오는 환경변수는 당연히 string이라고 생각했지만 아니었다. process.env의 타입은 Dick이라는 인터페이스였다.
interface Dict<T> { [key: string]: T | undefined; }
Dick 인터페이스를 수정하는 것 외의 다른 방법은 아래와 같다.
1. IF
const getS3Data = async (filePath: string) => { //..... if (typeof process.env.S3_BUCKET_NAME === 'string') { const getParmas = { Bucket: process.env.S3_BUCKET_NAME, Key: filePath, }; const data = await s3Client.send(new GetObjectCommand(getParams)); //... } }
if문으로 타입 추론을 활용하는 방법이다.
process.env.S3_BUCKET_NAME이 truthy falsy인지 먼저 체크한다. if의 블록이 실행되기 위해서는 그 값이 truthy해야 하므로 undefined가 아니기 때문에 process.env.S3_BUCKET_NAME은 string 타입이 되어 오류가 발생하지 않는다.
2. 논리 연산자 OR
Bucket: process.env.S3_BUCKET_NAME || 'default_bucket_name'
process.env.S3_BUCKET_NAME에 논리연산자 OR을 활용한다. process.env.S3_BUCKET_NAME이 무조건 string이면 되기 때문에, 단축평가를 활용하면 process.env.S3_BUCKET_NAME이 undefined일 때에도 Bucket을 string으로 만들어주면 되므로 논리연산자로 Bucket의 기본 값을 string으로 넣어주는 것이다. 위의 코드에서는 부적절한 방법이라고 생각하지만 사용할 상황이 충분히 있을 것 같다.
3. as 키워드
Bucket: process.env.S3_BUCKET_NAME as string
as 키워드를 활용해 타입을 단언(assertion)한다.
다른 방법으로는 '<>' 연산자를 활용할 수도 있다.
4. non-null assertion 연산자 (!)
Bucket: process.env.S3_BUCKET_NAME!
해당 값의 끝에 느낌표를 붙여서 typescript 컴파일러가 해당 변수는 undefined 또는 null이 될 수 없음을 강제로 알리는 방법이다.
5. 널 병합 연산자 ??
Bucket: process.env.S3_BUCKET_NAME ?? 'default_bucket_name'
이 방법은 OR 연산자를 사용하는 2번 방법과 유사한데, 다른 점이라면 널 병합 연산자는 Bucket: process.env.S3_BUCKET_NAME 변수가 null 또는 undefined 일때 만 default_bucket_name을 반환한다. 2번 OR 연산자는 falsy(false, undefined, null, 0 ,NaN, [] 등)하다면 default_bucket_name을 반환한다.
'Language > Typescript' 카테고리의 다른 글
[Typescript] Generic (0) 2023.01.11 [Typescript] Class (0) 2023.01.11 [Typescript] typescript의 유용성, 기본적인 type 지정 방법 (0) 2023.01.01 Typescript 기본 세팅 (1) 2022.12.26