2.2.8_ 타입스크립트의 값과 타입에 관련하여 구조분해할당시의 주의점은?

[lulla-by]

📝 53p

❓ 타입스크립트에서 값과 타입은 별도의 네임스페이스에 존재합니다. es6에 도입된 구조분해할당을 사용할 경우 다음과 같은 코드는 에러를 발생시키는데 그 이유는 무엇 때문인가요? 또한 타입스크립트에서 함수 작성 시 구조분해할당을 올바르게 적용하기 위해서는 다음의 코드를 어떻게 수정해야 할까요?

interface Person{
name: string;
age: number;
}

function testFunc ( { person:Person, description:string, level:number} ){
console.log(person, description, level)
}

[Stilllee]

타입스크립트에서 구조 분해 할당을 사용할 때에는 타입을 명시적으로 지정해줘야 하며, 문제의 코드는 Person과 string을 타입이 아닌 값으로 해석하기 때문에 오류가 발생합니다.

올바른 작성법은 아래와 같습니다.

function testFunc({
  person,
  description,
  level,
}: {
  person: Person;
  description: string;
  level: number;
}) {
  console.log(person, description, level);
}

[sryung1225]

타입을 값으로 혼동해서 문제가 발생합니다. 정확히는 person: Person 을 객체의 key: value 로 착각한 결과입니다. 때문에 이 경우에는 값과 타입을 구분해서 작성해줘야 합니다.

// 🧿 answer
function testFunc({
    person,
    description,
    level,
}: {
    person: Person,
    description: string,
    level: number,
}) {
    console.log(person, description, level);
};

[chaehaeun]

타입스크립트가 타입과 값을 혼동하게 되기 때문입니다. 예제의 경우 person이라는 key에 Person이라는 값을 할당한 것인지, 아니면 타입을 지정한 것인지 타입스크립트가 판단하기 어렵기 때문에 에러가 난 것입니다. 구조 분해 할당을 사용할 때는 값과 타입을 구분해서 작성해줘야 됩니다.

interface Person {
  name: string;
  age: number;
}

function testFunc({ person, description, level }: { person: Person; description: string; level: number }) {
  console.log(person, description, level);
}

[lulla-by]

작성자가 값의 공간과 타입의 공간을 헷갈려서 작성한 코드입니다. 이러한 경우에는 TS에서는 구조분해할당을 진행한 부분이 값의 공간으로 해석되어 개발자가 의도한 Type Annotation이 아닌 key-value 형식으로 해석됩니다. 따라서 해당 코드에서 올바르게 구조분해할당을 사용하기 위해서는 다음과 같이 값과 타입을 구분하여 작성해야합니다.

function testFunc ( { person, description, level}: { person:Person; description:string; level:number} ){
console.log(person, description, level)
}