Jacob's Development Blog

삼항 연사자처럼 타입도 조건에 따라 타입이 달라지게 프로그래밍 할 수는 없을까? Condition Type 타입도 삼항 연산자와 유사한 방식으로 조건부 타입을 타입핑할 수 있다. T extends U ? X : Y 이것을 간단히 리뷰해 보자면, "T가 U에 할당될 수 있는지를 확인하고 이것이 참이라면 X 타입을 사용하고 그렇지 않다면 Y 타입을 사용해라"라는 의미다. 예제를 통해 확인하면 이해가 될 것이다. interface IItem { id: number; } function getItems(id?: T): T extends number ? IItem : IItem[] { if (typeof id === "number") { return { id: 1 } as any; } return [{ id: 1..

싱글톤 패턴 싱글톤 패턴이란 클래스의 인스턴스화를 하나의 객체로 제한하는 패턴이다. 싱글톤 패턴이 유용했는지 아닌지에 대한 논란은 계속 있어왔으니, 다른 글을 참고하면 좋을 거 같다. 일단 어떻게 만들면 좋을지 간단하게 만들어 보자. Object literal 이 자체로는 유용하진 않지만 객체 리터럴로 간단하게 만들 수 있다. var Person = { name: 'jacob', age: 30, greeting: function () { return `Hi! ${this.name}`; }, }; 유용하지 않은 이유는 이 코드가 불변성을 제공하지 않기 때문에 언제든지 재정의될 수 있기 때문이다. 조금만 더 개선해 보자. const Person = { name: 'jacob', age: 30, greetin..

기본적인 타입 가드 방법 타입스크립트를 사용하다 보면 커스텀한 타입을 만들고, 그것들을 조합해 하나의 유니온 타입으로 만들어 사용하는 경우가 많다. 그런데 그 다음에 어떻게 타입을 좁혀야 할지(type narrow)를 몰라 타입 캐스팅을 해버리는 경우를 코드 리뷰를 하다보면 종종 볼 수 있다. 어떻게 이를 해결할 수 있을까? typeof 타입 축소를 하는 가장 기본적인 방법이다. 단, 런타임에 값에 유형에 대한 가장 기본적인 정보(타입스크립트 내장 타입)만 제공할 수 있다. ※ "string:", "number", "bigint", "boolean", "symbol", "undefined", "object", "function" function print(char: string | string[] | n..

처음에 개발을 시작했을때는 자바스크립트만 배웠지만, 운이 좋게도(?) 첫 회사를 입사하고 부터는 줄곧 타입스크립트만 사용하고 있다. 물론 지금 회사는 기존 모든 프로젝트는 자바스크립트를 사용해서 타입스크립트로 전환중이긴 하다. 그래서 타입스크립트에 대한 간단한 내용과 타입스크립트를 중간에 도입하면서 겪은 내용에 대해 기록해 본다. 왜 타입스크립트를 써야하는가? 이유는 자바스크립트가 동적 프로그래밍 언어이기 때문이다. 동적 프로그래밍 언어는 런타임시 변수의 타입이 결정되기 때문에, 런타임 중 변수의 타입이 결정되면서 생기는 버그와 에러를 자바스크립트를 실행해 보지 않으면 알 수가 없다. 그래서 나온게 대안으로 나온게 flow와 typescript이다. ‌ Flow vs Typescript flow는 페이스..

앞쪽 내용은 기록용으로 조금 남들에겐 쓸데없는 소리가 글에 있으니, 제목에 해당되는 내용이 궁금하다면 바로 아래를 보자. 처음에 왜 enum을 왜 쓰게 되었는가. 사내에서 디자인 라이브러리를 만들다 보면, 사용자(개발자)의 생산성 향상에 많은 고민을 하게 된다. 각기 다른 컴포넌트에서 최대한 일관된 인터페이스를 제공해 주어 사용자가 새로운 컴포넌트가 추가되더라도 중요한 필드는 "예측 가능하도록" 만들고 싶었다. 물론 처음에는 enum 대신 union 타입을 사용했었다. 하지만 사용하다 보면 문제점이 있었다. Typo 관련 컴포넌트만 보더라도 수많은 크기들이 존재했고, union 타입으로 만들 시 위에서 보이는 많은 타입들을 아래와 같이 정의해 줘야 했다. type Props = { ... scale: "..

이번 글은 스킬이기보다는 타입스크립트 작성 시에 추천 사항이다. readonly를 사용하자 타입스크립트로 프로젝트를 작성하더라도 readonly는 한 번도 작성을 안 하는 경우가 많다. 이유인즉슨 꼭 써야 되는 상황이 있는 것이 아니기 때문이다. 그렇다면 왜 쓰자고 권장하는 것일까. readonly는 Mutation(수정)으로 부터 발생할 수 있는 에러를 막아주기 때문이다. 예제를 통해 살펴보자. Trianular numbers 예제 Trianular number(=triangle number)는 삼각형 Dot Pattern을 만들 수 있는 숫자를 의미한다. 이제 수학 공부도 할겸 이거를 계산하는 것을 typescript를 이용해서 코드로 짰다고 가정해 보자. function arraySum(arr: n..

이전 글: 2019/12/27 - [Typescript] - 더 나은 타입스크립트 작성하기 1 - Skills

2019/12/27 - [Typescript] - 더 나은 타입스크립트 작성하기 1 - Skills에 이어, Skill적인 부분이다. 하지만 이것을 알기 전에 먼저 const assertions에 대한 개념을 알아야한다. const assertions const assertions은 Typescript 3.4에서 추가된 기능이다. 새로운 리터럴을 타입을 만들 때 사용할 수 있다. 그리고 const assertions을 사용하면 Object의 경우 타입 안정성을 위해 readonly가 추가되며, 객체 리터럴은 readonly 속성을 추가되고, 배열 리터럴은 readonly 튜플이 된다. 변수 선언 자체는 let으로 하건 const로 하건 차이가 없다. // Type: "jacob" let str = "ja..

DRY - "Don't Repeat Yourself" 타입 스크립트 사용에 대한 글은 이전에도 작성했고, 웹 상에도 수많은 글이 존재한다. 심지어 공식 문서 또한 친절하게 잘 나와있다. 그래서 이번 글은 말 그대로 더 나은 타입 스크립트를 작성하기 위한 요령(skills)을 담았다. 중복을 피하자 1 개발자라면 누구나 귀가 닳도록 들었을 말이다. 중복을 피하는건, 가독성이나 코드의 유지 보수 시에 매우 중요한 역할을 한다. 근데 이상하게 타입 스크립트를 사용하면 이 말을 피해 가는 경우를 종종 보곤 한다. 예를 들어보자. API에서 받아오는 User 모델로 Person과 PersonDetails 타입 두 개를 만들어 보자. type Person = { name: string; age: number; };..

(너무 쉽거나 기본적인 내용은 맨 앞 글에 기본 문법을 참고하시거나 다른 글 or책을 참고 부탁드립니다.) 타입스크립트의 타입 시스템은 "왜 타입스크립트를 사용해야 하는가?"에 대한 적절한 대답이다. 타입 시스템은 놀라울 정도로 강력하고, 우리가 예측하지 못했던 많은 것들을 표현할 수 있게 해 준다. 여기에 대해 좀 더 자세히 알아보자. "타입 시스템은 집합의 개념이다" 위 문장을 지금 당장 이해하지 못해도 좋다. 하지만 집합의 개념에서 타입 시스템을 바라보지 않는다면, 기본은 알아도 활용할 때에 바로 한계에 부딪칠 가능성이 크다. 아래 글을 읽으면서 모르는 문제가 나왔을 때 집합의 개념에서 접근해 보자. extend 아래 코드를 먼저 살펴보자. function getKey(value: any, key:..