원티드 프리온보딩 챌린지 2월 회고

Week 1-1. TypeScript란?

TypeScript is JavaScript with syntax for types. 👉 타입 구문이 있는 JavaScript

타입스크립트 효과

• JavaScript 런타임 시점 오류 검출

• 데이터를 코드로 설명할 수 있게 됨

• 객체와 함수의 생김새를 정의

d.ts

JavaScript와 TypeScript가 문법이 다른 이유

Week 1-2. Type Alias vs Interface

interface example { }

type example = {}

👉 playground

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAjsg3gKGQCwgG3wHsAuAZzClAHMBuTAX00zAE8AHFAIwF4MH6mUJFiIUASWQQAHpBAATMsi4ZmTFhxQAVZLr6pkAMlW6cwcpRr0GyZvghhkRLgCsSOvujyFSAcl8ANLjm-kzC0PBIBlg4RLEWVCB0jHYOTq4anMrInurM4aJR4gCCIMAAtnD4JrrIIHDlECTIFInUKULgEWLI4gBCEHBQUrIQCkolZZXVWLW4RCAQrM1cRET2cCAdbFlapRVVOTW69Y3NrTQdAPRXyAWREIApTchamsjF+MBwZBBkgD6dyEAqmuAUvHAAaryEAGEPIQAR44ATpoAdJ0RA9egMhgAmEZyRQvfbTY7zRbLZRrDZbdQ3ZAAUSgUCIUEwlJ22jRwxk2ImeMOuUZt2ZL1ZWLGOL2U25-GY-K0gr4ooO1WMs1qsSJK1Jg3JzEpgBBxwAa48hAIiTgFeewAEg4AO0eQgA9xwAMi4AM5cALuOAEqHAAJjyHNyEAiz2AS1XABQtSO6RS5M2wtTg1CadQAruUuNAOggFhR3mL8OJyux8M1JvKjgTThHfEG0xnAiHdGGIwBOSvXW7Gt1m+3IQARvYAAGsApU2ADVXYcgABTu73IQADk4AFseQAA0AJS85BSoNHLCUuYV5ogaOxhmU9QIfDfJQAESI1Du6fsjXAnJTeYaKD4vkP1F8ZdQ4aO1fju7IB6PmIqGYg55gEocr4kqJw3kc95Hk+y6vnw77qPyADCcBgK8WR3khwBsL4yAAD7IL4ABi9K-GAuGKs+jREAA7r2k7nJYSTbG8ADKRwXMx-IAHJHGuMZxvyfRHKs6wajOyGoeht6EVhOH4YRJFQGRT4zvcPQoWhbyLrccy+HJrC4QRxGkRQFGqEucy1NRdEMS0THtJZuhMFuzA7nuyCaUof5nmMQGeVJ2nPowQA

👉 공식 문서

Documentation - Everyday Types

The language primitives.

https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces

Week 2-1. 타입 가드

/**
 * typeof
 * 
 * JavaScript에서 이미 존재하는 타입 검사 연산자
 * typeof 연산자는 피연산자의 자료형을 문자열로 반환
 */
function print(value: number | string): string {
  if (typeof value === 'number') {
    return String(value)
  }

  if (typeof value === 'string') {
    return value
  }

  return value
}

/**
 * in 연산자
 * 
 * JavaScript에서 객체가 특정 속성을 가지고 있는지 검사를 불리언으로 반환한다
 */
interface Dog {
  name: string
  bark(): '멍멍'
}

interface Cat {
  name: string
  meow(): '냐옹'
}

function sayAnimal(animal: Dog | Cat) {
  if ('bark' in animal) {
    animal.bark()
    animal.name
  }

  if ('meow' in animal) {
    animal.meow()
  }
}

/**
 * instanceof
 * 
 * JavaScript에서 이미 존재
 * 
 * instanceof 연산자는 생성자의 prototype 속성이
 * 객체의 프로토타입 체인 어딘가 존재하는지 판별
 */
function getDate(date: Date | string): Date {
  if (date instanceof Date) {
    return date
  }

  return new Date(date)
}

/**
 * 사용자 정의 타입 가드
 * 
 * 매개변수 is 타입
 */
function isDate(date: Date | string): date is Date {
  return date instanceof Date
}

function getDate(date: Date | string): Date {
  if (isDate(date)) {
    return date
  }

  return new Date(date)
}

interface Dog {
  name: string
  bark(): '멍멍'
}

interface Cat {
  name: string
  meow(): '냐옹'
}

function isDog(animal: Dog | Cat): animal is Dog {
  return 'bark' in animal
}

function isCat(animal: Dog | Cat): animal is Cat {
  return 'meow' in animal
}

function sayAnimal(animal: Dog | Cat) {
  if (isDog(animal)) {
    animal.bark()
  }

  if (isCat(animal)) {
    animal.meow()
  }
}

정적 타입 vs 동적 타입

Week 2-2. TypeScript hierarchy

• 모든 타입은 집합일 뿐이지만 타입 간에도 계층이 존재한다.

• 타입 간의 관계는 특정 관계로 선언되었는지 여부가 아닌 포함된 속성에 의해 결정

• 최상위 타입은 시스템에서 허용하는 모든 가능한 값을 설명하는 타입

• 서브 타입은 슈퍼 타입에 할당할 수 있다.
• 그 반대는 불가능하다.

타입 캐스트

• 타입 변수를 다른 타입의 변수에 할당하며 생기는 타입 오류로 그 계층을 확인할 수 있음

• extends 이용

👉 playground

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play?#code/PQKhFgCgAIWxBgcCDj1ADC4UPHA-NdQGqvPVWYKAGwFMAXaAQwDsBPAFToAdSAua+qWxl06ALzQA5AGdyAJwCWNAObDu9Jq0HQAjACYAzIt4qhkgK6koJCtEM0A1jQD2AdxrL2F63cdRLNh076qxkjLynm4+zqqaOpBe7r760EYmkFDkfgCCqmkSElR0ADzi0nIAfNCkAB7kpDQAJqLQAPIARgBWpADGlAD8CRLG0BwAZlTEokmpKgBCqgBilp1StjRlldV1ja0d3b39QyNjppAyVRLD7fxpNFIAtiPQAN4E0DRU1y6FQVAAvofHpKdUc7QAAK-1ESweTxebw4HzkTyoshcNEM1ya-2+hwm-FBEnBNEuNUuNzuQmgxNuxBWVVq9Vx+OgPUSA2gw1GSTMlFsrQ4zTanSg3JaqgA2gBdQWtVSDebkRY0AAUAEoHtAvkA

👉 블로그

The type hierarchy tree

A reflection on my mental model of TypeScript’s type system

https://www.zhenghao.io/posts/type-hierarchy-tree

type true = '하위 타입' extends '상위 타입' ? true : false
type false = '상위 타입' extends '하위 타입' ? true : false

구조적 타입과 명목적 타입

구조적 타입 (Structural Type)

Duck Typing, 타입의 상하 관계

• 사실 타입스크립트의 타입은 집합의 일부일 수 있다. (즉 언어가 집합의 관계를 따집니다)

• 객체가 어떤 속성들을 가지는지 즉 구조를 기준으로 타입을 따진다.

• 기본적으로 자바스크립트는 구조적 타입의 언어이다

• 사람을 클론한다…
• 내 기억을 가진 사람을 그대로 복사해서 만든다.
• 그럼 그 사람은 과연 나일까…?
 

명목적 타입 (Nominal Type)

• 각 타입이 고유하다는 것을 의미 즉 동일한 타입이나 데이터가 있더라도 타입을 공유할 수 없다.

• 이름 기반으로 타입을 따진다

• 작성한 타입이 런타임에 존재한다.

• C#, Java

👉 playground

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgArQM4HsTIN4CwAUMsiHALYQBcyGYUoA5saXEzWQK4UBG0xAL7FioSLEQoAgiGAU4AG3ysylTvUYgWJZO04ge-KEJFEEOesiq0ZcxcgC8yneWvIA5ACk4W9wBoVPVoATmCTImIYLhAEMGAcZA4wADk1AAosXgArWnQobBAASmdSKAgwLihcTKyAOlcIcOIk1Ko0qkLm8taINLxVN3cACwgFBSx-XQ5aAEYABmRBQqA

덕 타이핑

• 타입의 생김새가 오리와 같다면 바로 오리의 타입임을 뜻한다.
• 오리처럼 보이고, 오리처럼 수영하고, 오리처럼 꽥꽥거리면 그것은 오리일 것이다.

• 거위가 오리와 같은 속성을 가지고 있다면 그것조차도 오리 타입

• 일반적으로 동적 타입 시스템을 설명하는 데 덕 타이핑이 사용된다.

👉 playground

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play?#code/JYOwLgpgTgZghgYwgAgCIFcEGtkG8CwAUMsiHALYQBcyAzmFKAOZEm0Duw5NAYuiAjDAA9iFbIAFsMo0A5IwBu0WUQC+RIqEixEKAOLDhtFAWKkK1Og2biOXXv0EixZqTOTzgSqCsKqgA

타입스크립트 공부방법

1. 비교표 수시로 찾아서 확인해보자

2. 항상 최신 자료를 확인해야한다

3. 공식문서의 breaking changes는 꾸준히 봐야한다.

4. 공식문서는 어렵기 때문에 책으로 공부하고 싶다면 아래 3가지 책을 추천한다.

1. 타입스크립트 프로그래밍

1. 러닝 타입스크립트

1. 이펙티브 타입스크립트 (1, 2번 중 읽은 후 다음으로 읽는 걸 추천)

1. 코드를 치면서 공부하고 싶다면 구현 부터 하면서 공부하지 말고 차근차근 선언하는 방법부터 배우자.

TS Playground - An online editor for exploring TypeScript and JavaScript

The Playground lets you write TypeScript or JavaScript online in a safe and sharable way.

https://www.typescriptlang.org/play

1. 타입스크립트 런타임 오류 해결 공부 TypeScript exercise (9번까지는 풀어야 이력서 Skill란에 TypeScript 작성 가능)

TypeScript Exercises

A set of interactive TypeScript exercises

https://typescript-exercises.github.io/#exercise=1&file=%2Findex.ts

1. 타입스크립트 런타임 오류 해결 심화 공부 Type Challenge (위에 있는 TypeScript exercise를 풀고 하기 TypeScript Playground에서 @Type Challenges/plugin 설정 키기)

아하! 모먼트

vanila JS 공부

• 요즘 과제는 어차피 리액트 위주로 나오니까 큰 걱정할 필요는 없다.

• 리액트는 JS로 만들어진 라이브러리이다.
• 즉. 내가 만든 앱을 너무 귀찮고 피곤하고 쓰레기 같은 코드가 스파게티로 나올 수 있겠지만 JS만으로도 만들 수 있는 역량이나 스스로의 확신은 있어야한다.

느낀점