본문 바로가기

typeScript

(46)
[Typescript] 타입스크립트의 21가지 사용법 해당 게시물에서는 타입스크립트의 21가지 사용법와 해당 사용법이 의미있는 경우를 알아봅니다. 원문 : https://itnext.io/mastering-typescript-21-best-practices-for-improved-code-quality-2f7615e1fdc3 🔥 Mastering TypeScript: 21 Best Practices for Improved Code Quality Achieve Typescript mastery with a 21-steps guide, that takes you from Padawan to Obi-Wan. itnext.io 1. 정적 타입 검사(Strict Type Checking) 정적 타입 검사의 목표는 런타임(코드 실행) 이전에 오류를 조기 발견하는 것입..
[번역] 타입스크립트를 활용한 타입 프로그래밍 입문 타입스크립트를 이용하면 타입 자체를 프로그래밍 하는 것이 가능합니다. 이런 식으로 데이터와 로직이 아닌, 프로그램에 대한 정보를 프로그래밍하는 것을 메타 프로그래밍이라 합니다. 타입스크립트를 활용해 좀 더 풍부한 타입을 만드는 방법의 기초를 다져봅니다. 원문은 아래에서 확인하실 수 있습니다. https://www.zhenghao.io/posts/type-programming Zhenghao's site The official site of Zhenghao He, a software engineer and a TypeScript/JavaScript enthusiast. www.zhenghao.io 타입스크립트는 JS에서 벗어나서, 타입만을 가지고도 프로그래밍할 수 있는 타입 프로그래밍 언어입니다. 타입 언..
[번역] 집합론으로 이해하는 타입스크립트 집합론을 이용해 타입스크립트를 좀 더 잘 이해해 봅시다. 아래 글의 번역입니다. https://blog.thoughtspile.tech/2023/01/23/typescript-sets/ false 내부적으로 boolean이 정확하게 true|false로 구현되어 있기 때문입니다. |는 유니온 입니다. true | never = true, boolean | true = boolean (리터럴의 전체집합인 boolean은 다른 합집합 대상을 삼켜버립니다.) 이제 약간 까다로운 extends를 다루어 보겠습니다. type A = boolean extends never ? 1 : 0; type B = true extends boolean ? 1 : 0; type C = never extends false ? 1..
typescript(타입스크립트)의 satisfies 연산자 제대로 알아보기 TL;DR : satisfies 연산자는 구체적인 데이터를 가장 구체적인 서브타입으로 추론하기 위한 도구다. 타입스크립트 4.9에 satisfies 연산자가 도입되었습니다. 공식문서와 여러 블로그에서 해당 개념을 다루고 있지만, 약간 이해하기에 어려운 설명인것 같아 보충합니다. 아래 설명은 공식 문서에서 발췌했습니다. TypeScript 개발자는 종종 딜레마에 직면합니다. 우리는 일부 표현식이 일부 타입과 일치하는지 확인하면서도, 추론을 위해 해당 표현식의 가장 구체적인 타입을 유지하기를 원합니다. 보통 아래와 같이 타입 없이 구체적인 표현식 데이터를 종종 선언합니다. // 각 속성은 스트링이나 RGB 튜플이 될 수 있습니다. const palette = { red: [255, 0, 0], green: ..
[Typescript] 객체 함수와 타입스크립트 함수는 객체다 함수는 호출이 가능한(callable) '행동 객체(action object)’라고 이해하면 쉽습니다. 우리는 함수를 호출 할 수 있을 뿐만 아니라 객체처럼 함수에 프로퍼티를 추가·제거하거나 참조를 통해 전달할 수도 있습니다 함수 타입 표현식 가장 간단한 함수 타입 표현 방법은 아래와 같이 작성하는 것이다. function greeter(fn: (a: string) => void) { fn("Hello, World"); } function printToConsole(s: string) { console.log(s); } 또 해당 글의 주제에서 벗어나지만 재미있는 타입은 생성자 시그니처다. type SomeConstructor = { new (s: string): SomeObject; }; ..
[타입스크립트] Object vs object vs {} 해당 스택오버플로우 게시물을 보고 요약한 글입니다. https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript Difference between 'object' ,{} and Object in TypeScript Trying to figure out the difference between these 2 types in TypeScript: foo: object and bar: {} and type: Object ? Example: trying to assign an object to the variable that suppose to handle headers stackoverflow.com..
[Vue3] 일반적인(intrinsic한) 컴포넌트 만들기 with typescript 리액트를 사용하는 경우 해당 링크의 예제처럼 일반적인 컴포넌트를 만듭니다. 아토믹 디자인을 활용한 디자인 시스템 도입기 카카오엔터테인먼트 FE 기술블로그 fe-developers.kakaoent.com 그런데 Vue3는 아무리 찾아봐도 해당 패턴이 없더라구요? 아마 암시적인 Fallthrough Attribute 기능 때문인 것 같습니다. $attrs 객체는 컴포넌트의 props 또는 emit 옵션(예: 클래스, 스타일, v-on 리스너 등)에 의해 선언되지 않은 모든 속성을 포함합니다. (주 : props 필터링을 통해 서브 컴포넌트의 계층화, 관심사의 분리에도 활용 가능) 해당 $attrs 객체의 typing을 지원한다면, 좀 더 쉽게 구현을 가이드할 수 있지 않을까요? Vue3은 runtime-d..
타입스크립트 프로젝트 도입을 통해 얻을수 있는 효과와 아닌것 과연 타입스크립트는 런타임 최적화를 수행할까요? 물론 약간의 효과는 얻을 수도 있을 것 같지만, 클린하며 예측 가능한 코드를 작성하면서 얻는 우발적 효과일 것 같습니다. 아래 문서는 TypeScript 언어의 기반이 되는 일반적인 디자인 원칙을 설명합니다. 철저하게 모든 원칙을 다루진 않지만, 언어의 설계를 결정하는데 근거가 된 규칙을 요약하는 것을 목표로 작성되어 있습니다. 이러한 규칙 중 일부는 주관적이며 때때로 서로 상충됩니다. 올바른 균형에 도달하고 올바른 예외를 만드는 것이 성공적인 프로그래밍 언어 설계의 핵심입니다. https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals GitHub - microsoft/TypeScript: ..