TIL - TypeScript #2

🤔 타입스크립트는 어떻게 동작할까?

다른 언어는 작성한 토드를 컴파일하여 0과1로 바꿔주거나 어셈블리 코드나 바이트 코드가 되기도 한다.
즉, 기계가 이해할 수 있는 다른 종류의 코드로 변환된다.

타입스크립트의 경우는 좀 다르다. 작성한 코드가 자바스크립트로 변환된다.
그 이유는, 브라우저가 타입스크립트가 아니라 자바스크립트를 이해하기 때문!
하지만 Node.js 의 경우 타입스크립트와 자바스크립트 둘 다 이해할 수 있다.

🤷🏻‍♂️ 그러면 결국 자바스크립트랑 똑같은거 아냐?

그렇지 않다. 타입스크립트가 자바스크립트로 변환되기 전 타입스크립트가 제공하는 보호장치가 작동한다.

즉, 타입스크립트 코드에 에러가 있으면 그 코드는 자바스크립트로 컴파일되지 않는다. (🚨에러에러🚨)

암묵적 타입(Implicit Types) vs 명시적 타입(Explicit Types)

암묵적 타입
타입 작성에 대한 책임을 지는 TypeScript 타입 유추 시스템에 의해 타입이 유추됨을 의미한다.

let a = 'test' // 'string'으로 타입이 유추됨

명시적 타입: 일반적으로 명시적으로 코드에 타입을 추가합니다. 값이 어떤 타입인지 정확히 알아야 한다.

let a = [] => let a: number[] = []

타입스크립트의 타입

Types

• number: 숫자형

• string: 문자형

• boolean: true/false

• type[]: 해당 타입의 배열

• type?: 존재하지 않을 수도 있는 값

  // 두 객체가 동일
  const user: { id: string, age?: number }
  
  const user: { 
      id: string; 
      age: number | undefined; 
  }
  
  // 비교전 값 유효성 확인을 꼭 해줘야함
  if(user.age && user.age < 10) {
      ...
  }

Alias(별칭)

자주 반복해서 사용하는 타입 객체를 Alias 타입을 사용해 효율성을 높여준다.

• 첫글자는 대문자 사용
• 매우 강력

• 적용전

const User1: { 
	id: string, 
	age?: number 
} = {
	id: 'user1',
	age: 18
}
const User2: { 
	id: string, 
	age?: number 
} = {
	id: 'user2',
	age: 23
}

• 적용후

type User = { 
	id: string, 
	age?: number 
}
const user1: User = {
	id: 'user1',
	age: 18
}
const user2: User = {
	id: 'user2',
	age: 23
}
const userMaker(name: string): User => ({ name })
const user3 = userMaker('user1')
user.age = 30