24.01.08 (월)

학습구간 및 정리본

질문과 답변

1. 덕 타이핑과 구조적 타이핑

❓ 자바스크립트의 덕 타이핑/타입스크립트의 구조적 타이핑의 공통점과 차이점

타입스크립트의 구조적 타이핑은 자바스크립트의 덕 타이핑을 기반으로 하는데요. 공통점, 차이점으로 무엇이 있을까요?
또, C++과 자바와 같은 언어에서 사용되는 명목적 타이핑과의 차이는 무엇이 있을까요?

나의 답변

덕 타이핑은 런타임에 타입을 검사하며 주로 동적 타이핑에서 사용됩니다.
반면에 구조적 타이핑은 컴파일 타임에 타입체커카 타입을 검사하며 정적 타이핑에서 사용됩니다.

이 둘은 타입의 이름으로 타입을 구별하는 명목적타이핑과는 달리 타입의 구조로 타입을 구별한다는 공통점이 있습니다.

2. 타입스크립트와 구조분해할당

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

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

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

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

나의 답변

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

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

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

3. 함수 자체의 타입지정

❓ 타입 스크립트에서 함수 자체의 타입을 지정하는 방법과 그 예시를 설명해주세요.

function add(a: number, b: number): number {
  return a + b;
}

위의 예시는 타입 스크립트에서 함수를 작성할 때 매개변수와 반환 값에 대한 타입을 지정하는 문법을 설명한 것입니다. 그럼 함수 자체의 타입은 어떻게 지정할 수 있나요? 그 방법과 예시를 설명해주세요.

나의 답변

타입스크립트에서 함수 자체의 타입을 명시할 때에는 화살표 함수 방식으로 호출 시그니처를 정의합니다.

type add = (a: number, b: number) => number;

4. 타입과 변수를 같은 이름으로 정의

❓ 타입과 변수를 같은 이름으로 정의하여 사용할 수 있는 이유는?

타입스크립트에서는 아래 코드와 같이 타입과 변수를 같은 이름으로 정의하여 사용할 수 있습니다. 이것이 가능한 이유를 컴파일타임 과 연관지어 설명하세요.

interface Hello {
  name: string;
}

const Hello: Hello = { name: "hi" };

나의 답변

타입스크립트에서 타입과 값은 서로 다른 네임스페이스에 존재합니다.
컴파일 과정을 거쳐 타입 정보는 제거되고, 자바스크립트 코드만 남게되는데 이때 런타임에서는 변수만 존재하게 됩니다.

이러한 구조 덕분에 타입과 변수는 충돌하지 않고 같은 이름으로 사용할 수 있습니다.

추가 논의

호출 시그니처와 함수 타입 표현식

호출 시그니처와 함수 타입 표현식의 차이는 무엇인가?

타입스크립트 공식 문서에서 함수 타입 표현식과 호출 시그니처에 대한 내용을 확인했을 때에는

type GreetFunction = (a: string) => void;
function greeter(fn: GreetFunction) {
  // ...
}

러한 방식이 함수 타입 표현식의 예시 코드라고 나와있다.

그러나, 책에 나온

  type Add = (a: number, b: number) => number;  

이 예시코드와의 차이점을 잘 모르겠다는 의견이 나왔다.

공식 문서에서는

If we want to describe something callable with properties, we can write a call signature in an object type:
Note that the syntax is slightly different compared to a function type expression - use : between the parameter list and the return type rather than =>.

만약 우리가 호출 가능하면서 프로퍼티를 가진 무언가를 설명하려고 하면, 객체 타입에 호출 시그니처 를 사용하여 표현할 수 있습니다.
이 문법은 함수 타입 표현식과 다릅니다. 매개변수 타입과 반환값의 타입 사이에 =>가 아닌 :를 사용해야 합니다

라고 호출 시그니처를 설명하는데, 이 내용이 책에서 말하는 호출 시그니처와 다른 것 같고, 오히려 책에서 나온 호출 시그니처의 예제나 설명은 함수 타입 표현식과 더 가까워 보이는데 둘의 차이가 무엇인지 명확히 알고싶다는 것이다.

나또한 의문이 가시지 않아 관련 내용을 찾아보았다.

함수 타입 표현식 (Function Type Expressions)

• 함수 타입 표현식은 함수의 매개변수와 반환 타입만을 정의하는 데 사용된다.
  이는 순수한 함수의 시그니처를 나타내며, 추가적인 프로퍼티를 정의하는 것은 포함하지 않는다.

type GreetFunction = (a: string) => void;

호출 시그니처 (Call Signatures)

• 호출 시그니처는 객체 타입 내에서 함수 타입을 정의할 때 사용된다.
  이는 객체가 함수처럼 호출될 수 있음을 나타내며, 동시에 추가적인 프로퍼티를 정의할 수 있다.
• 호출 시그니처는 :를 사용하여 매개변수 타입과 반환 타입을 구분한다.
• 호출 시그니처를 사용하면 함수 타입과 일반 객체 프로퍼티를 결합한 하이브리드 타입을 정의할 수 있다.
  이는 함수 기능과 함께 추가적인 프로퍼티나 메서드를 가진 객체를 타입으로 정의할 수 있게 해준다.

interface SomeType {
  (a: number, b: number): number;
  someProperty: string;
}

본문에서 언급하고 있는 내용에는 오해의 소지가 있다.

type Add = (a: number, b: number) => number;

• 이 코드는 함수 타입 표현식의 예시로, 호출 시그니처의 예시가 아니다.
• 호출 시그니처는 화살표 함수 구문으로 작성되지 않는다.
• 이 문법은 화살표 함수의 구문을 빌려와서 TypeScript에서 함수의 타입을 정의하는 방법을 나타낸다.
• 여기서 Add는 두 개의 number 타입 매개변수를 받고, number 타입의 값을 반환하는 함수의 타입을 정의한다.

위와 같은 내용으로 짐작하건데, 호출 시그니처와 함수 타입 표현식을 혼동하고 있는 것으로 보인다는 것이 내 결론이다.