typescript에서 …(전개 연산자)을 string에 쓴다면

string을 강제로 object로 만들고 …(전개 연산자)를 쓴다면 어떻게 될까요?

 

const str11: string = '태스트 입니다';
const obj22 = {
  ...str11, // TS2698: Spread types may only be created from object types.
  test: ' test',
};

console.log(obj22);

typescript 에서 이렇게 쓰면 에러가 납니다. object types만 전개 연산자를 사용할 수 있다네요. 근데 js 에서는 가능하죠, 그래서 js처럼 string 타입이 아닌 object 타입으로 만들어줍니다.

 

🟩 object 타입으로 변환 후 전개연산자 적용

const str11: unknown = '태스트 입니다';
const obj22 = {
  ...(str11 as object),
  test: ' test',
};

console.log(obj22);

저는 

{
  "테스트 입니다",
  test: ' test',
}

 이런 결과값을 원했습니다.

 

위 결과값은

이렇게 됩니다. string은 object 안에서 강제로 key: value 형태가 됩니다.

object안에서 데이터들은 모두 key: value 형태를 가지기 때문에 js 엔진이 내부적으로 index를 뜯어서 key로 만들고 char를 value로 만든거같습니다. 그러면

{
  "테스트 입니다",
  test: ' test',
}

위와같은 형태는 못만드는 것일까요? 무조건 키가 있어야 하기 때문에 안됩니다.

 

 

유사한 방법이 있습니다.

🟩 방법

const str11: unknown = '태스트 입니다';
const obj22 = {
  // ...(str11 as object),
  ['']: str11,
  test: ' test',
};

console.log(obj22); // {'':'태스트 입니다', test:' test' }

결과값에 빈 키를 넣는 방법이 있습니다.

 

 

🟩 결론

js의 object 특성을 재대로 파악하지 못해서 발생한 문제였습니다. string를 전개연산자를 태우면 자동으로 index를 키로 char를 value로 가진다는 사실을 알았습니다. typescript에서는 string객체가 있다면 전개연산자를 사용하지 못하게 막습니다. 그래서 stirng으로 전개연산자를 활용하는건 주의해야됩니다.