타입과 값 구분하기

Symbol

interface Cylinder {
  radius: number
  height: number
}

const Cylinder = (radius: number, height: number) => ({ radius, height })

Symbol은 이름이 같더라도 속하는 공간에 따라 다른 것을 나타낸다. 일반적으로 type이나 interface 다음에 나오는 심벌은 타입, const이나 let 선언에 쓰이는 것은 값이다. 또는 타입선언(:)이나 단언문(as) 다음에 오는 심벌은 타입, "=" 다음에 오는 모든 것은 값이다.

typeof

interface Person {
  first: string
  last: string
}
const p: Person = { first: 'Jane', last: 'Jacobs' }
//    -           --------------------------------- Values
//       ------ Type
function email(p: Person, subject: string, body: string): Response {
  //     ----- -          -------          ----  Values
  //              ------           ------        ------   -------- Types
}

type T1 = typeof p // Type is Person
type T2 = typeof email
// Type is (p: Person, subject: string, body: string) => Response

const v1 = typeof p // Value is "object"
const v2 = typeof email // Value is "function"

typeof는 타입에서 쓰일 때와 값에서 쓰일 때 다른 기능을 할 수 있다. 즉, 타입 관점과 값의 관점 2가지로 사용 가능하다.

 

-타입 관점

타입의 관점에서 typeof는 값을 읽어 타입스크립트 타입을 반환한다. 여기서 typeof는 보다 큰 타입으로 사용 가능하고 type 구문으로 이름을 붙이는 용도로 사용 가능하다.

 

-값의 관점

값의 관점에서 typeof는 자바스크립트 런타임의 typeof 연산자가 된다. 여기서 typeof는 대상 심벌의 런타임 타입을 가리키는 문자열을 반환하고 타입스크립트 타입과는 다르다.

class Cylinder {
  radius = 1
  height = 1
}

const v = typeof Cylinder // Value is "function"
type T = typeof Cylinder // Type is typeof Cylinder

자바스크립트에서 클래스는 함수로 구현되기 때문에 v는 function이다. 

const first: Person['first'] = p['first'] // Or p.first

그리고 속성 접근자인 "[]"는 타입으로 쓰일 때도 동일하게 동작한다. 하지만 obj["fileld"]와 obj.filed는 값이 동일해도 타입은 다를 수 있다. 타입 속성을 얻을 때는 반드시 obj["filed"]를 사용해야 한다.

this

-값의 관점

값으로 쓰이는 this는 자바스크립트의 this 키워드이다.

 

-타입의 관점

타입으로 쓰이는 this는 "다형성(polymorphic) this"라고 불리는 this의 타입스크립트 타입이다. 서브클래스의 메서드 체인을 구현할 때 유용하다.

구조 분해 할당

-잘못된 예시

function email({
  person: Person,
  subject: string,
  body: string,
}) {
  /* ... */
}

위 코드처럼 작성하면 에러가 발생한다. 값의 관점에서 Person과 string이 해석되었기 때문이다. Person이라는 변수명과 string이라는 이름을 가지는 두 개의 변수를 생성하려 했기 때문이다.

 

-좋은 예시

function email({ person, subject, body }: { person: Person; subject: string; body: string }) {
  // ...
}

코드가 복잡하지만 매개변수에 명명된 타입을 사용하여 잘 추론되도록 해야 한다.