[Debug] Type 'String' is not assignable to type 'string'

TypeScript Error

에러로그

Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.ts(2322)

index.d.ts(2324, 9): 
The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

 

 

개발습관 만들기

 “Type ‘String’ is not assignable to type ‘string’” 에러는 TypeScript에서 발생하는 일반적인 문제이다. 이 에러는 String 객체 타입이 아닌 기본 string 타입에 값을 할당하려고 할 때 발생한다. TypeScript에서는 String과 string을 다르게 취급하는데, String은 객체 타입이고 string은 기본 타입이다.

이 문제를 해결하는 방법은 다음과 같다:

1. 타입 단언(Type Assertion) 사용하기: 변수를 string 타입으로 명시적으로 단언할 수 있다.

   let myString: String = "Banana";
   let myFruit: string = myString as string;
   

2. const 단언 사용하기: TypeScript 3.4 이상에서는 const 단언을 사용하여 리터럴 타입을 확장하지 않고 그대로 사용할 수 있다.

   let fruit = 'orange' as const;
   

3. 타입 변환(Type Casting) 사용하기: 문자열 리터럴을 직접 할당하여 타입 변환을 피할 수 있다.

   let myFruit: Fruit = "Banana";
   

4. null 병합 연산자(nullish coalescing operator) 사용하기: undefined 또는 null 값에 대해 기본값을 제공하여 타입 에러를 방지할 수 있다.

   let name1: string = person.name ?? "";
   

5. 비-널 단언 연산자(non-null assertion operator) 사용하기: 변수가 null이나 undefined가 아님을 단언할 수 있다.

   let name1: string = person.name!;
   

 

 

개발습관 만들기

Java를 기본언어로 사용했기에 String을 사용하는 습관이 있다.

TypeScript에서 String과 string은 다른 타입이다.

마찬가지로 Number과 number는 다른 타입니다.

number,string, boolean, symbol은 primitive type 이고 Number, String, Boolean, Symbol은 참조 자료형이다.

둘은 다른 자료형이며 래퍼객체는 타입으로 사용해서는 안된다.

이유는 string이 String보다 효율적이고 안전하다. 추가 메타데이터와 함수들을 포함하는 객체보다 메모리 효율적이며, 객체타입보다 불변타입이 안전하다.String의 타입은 Object인 반면 string의 타입은 string이다.

 

앞으로 Interface 타입 제작시 primitive type을 사용하는 습관을 가지자.