드리프트의 코-자-경(코딩, 자동차, 경제)

안녕하세요? 오늘은 타입스크립트 클래스에서 readonly와 static에 대해 알아보겠습니다. 먼저, readonly입니다. readonly class Player { public name: string = ""; public age: number = 0; constructor(name: string, age: number) { this.name = name; this.age = age; } } 위와 같은 Player 클래스가 있다고 합시다. Player는 name과 age가 있고 constructor 함수에서 this.name과 this.age로 각각 클래스 변수에 값을 지정해 주는 지극히 일반적인 클래스인데요. 타입스크립트에서는 위와 같은 방법 말고 아래와 같은 방법도 가능합니다. 컨스트럭터 안에서..

안녕하세요? 오늘은 좀 어려운 주제인데요. 먼저, RPG 게임에서 player의 특성을 정의하는 타입을 만들려고 한다고 가정해 봅시다. 어떻게 해야 할까요? 먼저, name이 있어야겠죠? type MyFlexibleInfo = { name: string; } 그다음으로 race (종족)이나 age (나이)가 있어야겠죠? 만약, MyFlexibleInfo 가 두 가지의 타입만 있다고 하고 race나 age 중에 한 개만 자유롭게 넣게 하고 싶을 때는 어떻게 할까요? 바로 타입 머지 (type merge) 하면 되는데요. type MyFlexibleInfo = { name: string; } & Record Record 유틸리티 타입으로 key : value 타입을 추가할 수 있게 했습니다. type MyF..

안녕하세요? 오늘은 지난 시간에 배운 Class Visibility에 더해서 클래스에서 제네릭을 쓰는 방법에 대해 알아보겠습니다. 일단 지난 시간에 만들었던 Database 클래스를 를 이용한 제네릭 형태로 변경해 보겠습니다. interface Database { get(id: string): string; set(id: string, value: string): void; } class InMemoryDatabase implements Database { protected db: Record = {}; get(id: string): string { return this.db[id]; } set(id: string, value: string): void { this.db[id] = value; } } 위..

안녕하세요? 오늘은 타입스크립트의 class에 대해 알아 보겠습니다. class는 다른 언어에서도 제공하고 있고 예전에는 객체지향 프로그래밍이 아주 유행했었는데요. C++ 의 Qt 나 윈도우즈의 MFC 라이브러리 모두 class를 이용한 결과입니다. class는 사용하면 아주 강력한 기능이 될 수 도 있는데요. 유지 보수가 어려워 그냥 함수형 프로그래밍 같이 직관적인 프로그래밍이 요즘 대세가 되었습니다. 본인도 class는 React 프로그래밍에서는 잘 안 쓰는데요. 그래도 타입스크립트에서 제공하는 class 기능을 잠깐 맛보기로 알아 보도록 하겠습니다. 예제를 들어 설명할까 하는데요. 간단한 데이터베이스 DB를 class로 만들어 볼까요? interface Database { get(id: string..

안녕하세요? 오늘은 타입스크립트의 enum과 literal 에 대해 알아 보겠습니다. enum은 다른 언어에서도 자주 나오는 타입인데요. 특히, C 언어에서 자주 쓰입니다. 특정 상태를 나타낼 때 아주 유용하거든요. const beforeLoad = "beforeload"; const loading = "loading"; const loaded = "loaded"; const isLoading = (state: string) => state === loading; console.log(isLoading("dog")); 위 코드를 보시면 우리가 React에서 많이 쓰이는 isLoading 함수가 있는데요. 뭔가가 좀 엉성합니다. 이제 이 코드를 enum으로 다시 바꿔 볼까요? // const beforeL..

안녕하세요? 이번 시간에는 타입스크립트의 Immutability에 대해 알아 보겠습니다. 간혹가다가 코드를 짤 때 변경되지 않았으면 하는 데이터 타입이 있습니다. 이럴 때는 어떻게 해야 할까요? const로 변수를 지정하면 변수값은 변경되지 않는데요. 객체의 경우에는 const 로 선언해도 객체의 내용이 변경될 수 있습니다. 다음 예를 들어 설명해 볼까요? interface Cat { name: string; breed: string; } function makeCat(name: string, breed: string): Cat { return { name, breed } } const kihun = makeCat("squid cat", "squidGame") kihun.name = "kihun" Cat..

안녕하세요? 이번 시간에는 타입스크립트에서 자체적으로 제공하는 Utility Types에 대해 알아 보겠습니다. https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org 공식 홈페이지를 보면 Utility Types으로 제공하는게 아주 많은 데요. 우리는 가장 많이 쓰이는 몇가지에 대해 예를 들어 알아 보겠습니다. 1. Partial 먼저 Partial에 대해 알아 보겠습니다. Partial을 언제 쓰이는지는 예를 들어 보면 쉽게 이해 할 수 있습니다. 다음과 같이 My..

안녕하세요? 지난 시간에 이어 타입스크립트 제네릭에 있어 keyof 연산자를 사용하는 방법에 대해 알아보겠습니다. 우리가 객체에서 특정 항목을 기준으로 객체의 값을 뽑아주는 함수를 만들려고 한다고 가정해 봅시다. const squid = [ { name: "Ki-Hoon", id: 456, }, { name: "Sae-Byuk", id: 67 } ] 자, 위와 같은 객체의 배열이 있다고 합시다. 여기서 객체의 항목 중에 name과 id가 있는데, 이 항목 중에 한 개만 골라서 출력하는 함수를 만들어 보겠습니다. function extract(items: unknown[], key: string) : unknown[] { } 함수의 형태를 unknown 타입으로 만들어 보았는데요. items라는 배열과 k..

안녕하세요? 오늘은 타입스크립트에 제공하는 제네릭(Generics)에 대해 알아보겠습니다. C++, Java 같은 고급 언어에서는 제네릭을 기본 제공하고 있는데요. 타입스크립트에서도 제네릭을 쓸 수 있습니다. 어떻게 하는지 함께 알아보겠습니다. 일단 지난 시간에 만들었던 코드를 볼까요? function simpleState(initial: string): [() => string, (v: string) => void] { let str: string = initial; return [ () => str, (v: string) => { str = v; } ] } simpleState라는 클로저를 이용한 함수입니다. 그런데 잘 보시면 string 이란 타입이 여러 군데 보이는데요. 제네릭은 특정 타입을 이용..

안녕하세요? 오늘은 타입스크립트 타입 중에 튜플에 대해 알아보겠습니다. 자바스크립트에서 배열은 다른 언어와는 다르게 다른 타입의 항목이 무작위로 들어가도 되는 특이한 타입입니다. 예를 들어 볼까요? let arr = ["hello", 20, true]; 위와 같이 자바스크립트 배열은 그 항목이 뒤죽박죽 될 가능성이 상당히 높습니다. 그래서 자바스크립트에서는 배열에 무엇이 있는지 정확히 알고 코드를 짜야하기 때문에 여간 불편한 게 아닙니다. 그럼 타입스크립트에서는 어떻게 할까요? let role: string[] = ["admin", "manager", "user"]; 위 코드는 그냥 string으로 된 배열인데요. 만약 여기에 숫자를 넣는다면 어떻게 될까요? let role = ["admin", "man..