재귀로 객체 내 모든 키값을 추출하는 타입 만들기 객체 내 모든 키를 추출할 수 있는 타입을 만든 후, 컴포넌트에 적용하여 컴포넌트가 props로 받는 객체의 타입을 스스로 추론하게 만들어보자. 객체 재귀 타입(PropertyPath) 구현 type PropertyPath = U['length'] extends 10 ? never : { [K in keyof T & string]: T[K] extends Record ? K | `${K}.${PropertyPath}` : K }[keyof T & string] 위의 PropertyPath 타입은 객체의 모든 키를 추출하는 타입이다. 원활한 이해를 위해 몇가지 사전 ..
객체 키 타입의 유니온 추출 및 활용 상수로 이용하려는 이미 정의된 객체 데이터를 타입스크립트로 다루다보면 가끔씩 불편한 상황을 마주하곤 한다. 나의 경우에는 객체 데이터 자체를 타입으로써 이용하고 싶은데 타입스크립트가 너무 빡빡하게 굴 때 종종 심기가 불편해진다. 가끔은 객체 타입을 모두 손수 지정해버리고 싶다는 충동이 들 때마저 있다. 물론 왕도는 없는듯 하다. 유지보수가 다소 어려워질것을 감안하고 객체의 타입을 모두 손수 지정해서 사용할 것인지, 아니면 특정 객체를 100% 신뢰한 상태에서 타입을 뻗어낼 것인지는 상황에 따라 판단하면 된다. 하지만 두 방법 모두 잘 알고 있기는 해야할 것이다. 객체 타입을 모두 손수 지정하는 것은 어렵지않은 단순 노가다이므로, 이 글에서는 객체 타입을 프로퍼티로 각..
https://www.typescriptlang.org/ko/docs/handbook/utility-types.html#excludetype-excludedunion Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org Partial // Partial type Post = { title: 'string' index: number content: string } const updatePostContent = (post:Post, updateContent: Partial):Post => { return {...post, ...updateContent} } Partial은 Type의..
https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript How to write a React Component in TypeScript Stay up to date Subscribe to the newsletter to stay up to date with articles, courses and much more! Learn more Stay up to date Subscribe to the newsletter to stay up to date with articles, courses and much more! Learn more All rights reserved © Kent C. D kentcdodds.com 위 글을 참고했습..
Catch clause variable type annotation must be 'any' or 'unknown' if specified. 캐치문의 error 타입은 왜 any와 unknown이어야 하는 걸까? 개발하다가 아래와 같은 타입 에러를 만났다. 왜 캐치문의 에러는 any, unknown이어야 하는 걸까? https://stackoverflow.com/questions/69021040/why-catch-clause-variable-type-annotation-must-be-any Why Catch clause variable type annotation must be any? I'm using yup to validate a form, and I encountered this type erro..
함수 표현식과 타입 할당 자바스크립트에서 함수는 표현식으로 나타낼 수 있다. 함수 타입을 만들고, 함수 표현식에 타입을 할당하면 함수에 타입을 깔끔하게 명시할 수 있다. type DiceRollFn = (sides:number) => number const rollDice: DiceRollFn = (sides) => { return sides } const rollDiceAndPlusOne: DiceRollFn = (sides) => { return sides + 1 } 다른 함수의 타입 참조 : typeof fn 다른 함수의 타입을 그대로 참조하기 위해 typeof fn를 사용할 수 있다. 타입에서의 typeof는 별도의 값을 산출하는 연산자가 아님을 기억하자. declare function fetch..
타입 단언, 타입 선언 interface Person {name: string}; const alice: Person = { name: 'Alice' } // Person 타입 (타입 선언) const alice = { name : 'Alice' } as Person // Person 타입 (타입 단언) 두 가지 방법은 결과가 같아보이지만 그렇지 않다. 첫 번째 방법은 변수에 타입을 붙여 타입을 선언한 것이고, 두번째는 as Person으로써 타입을 단언한 것이다. 타입 선언은 타입 체커가 동작한다. const alice: Person = {}; // -- 타입 에러 const bob = {} as Person; // 오류 없음 타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다. 앞의 예제..
이 글은 사실 원숭이의 유레카 입니다. 아직 타입스크립트를 잘 모르지만 배워야하는 이유를 심각하게 체감했고, 그 이유를 공유하고자 제 생각을 글로 적어 남겨봅니다. 시작하겠읍니다. 타입스크립트는 뭘까요? 타입스크립트는 자바스크립트의 정적 타입 체커입니다. 즉, 자바스크립트의 정적 검사(프로그램을 실행시키지 않으면서 코드의 오류를 검사) 검사자의 역할을 합니다. 자바스크립트가 워낙에 약타입에 자유분방한 언어라 배열에 문자열을 더해도 오케이, 문자열에 숫자를 더해도 오케이를 해버려서 자바스크립트로 복잡한 프로그램을 짠다면 후에 유지보수가 어려워질 수 있기에, 프로그래밍 초기 단계서부터 에러가 날 상황을 최대한 방지하고자 타입스크립트를 쓴다고 익히 알고 있습니다. 그러한 이유로 저는 결국에 해결책은 자바스크립..
https://navermaps.github.io/maps.js.ncp/docs/tutorial-3-Using-TypeScript.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io 네이버 MAPS 타입스크립트 공식 홈페이지 설명이다. 세상 이렇게 대충 해놓을 수가 없다. 적용방법 1. navermaps를 설치해준다. 2. compilerOptions에 적용한다. { "compilerOptions": { // ... "types": ["navermaps"] // ... } }
HTML Click Me TS interface Todo { text: string, completed: boolean } const btn = document.getElementById("btn") as HTMLButtonElement const input = document.getElementById("todoinput") as HTMLInputElement const form = document.querySelector("#todoform") as HTMLFormElement const list = document.querySelector("#todoList") as HTMLUListElement const readTodos = (): Todo[] => { const todosJSON = local..
