티스토리

2DC

검색하기

블로그 홈

2DC

2duckchun.tistory.com/m

배우고 성찰한 것을 기록하는 블로그입니다.

구독자: 10

방명록 방문하기

주요 글 목록

재귀로 객체 내 모든 키값을 추출하는 타입 만들기 재귀로 객체 내 모든 키값을 추출하는 타입 만들기 객체 내 모든 키를 추출할 수 있는 타입을 만든 후, 컴포넌트에 적용하여 컴포넌트가 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 타입은 객체의 모든 키를 추출하는 타입이다. 원활한 이해를 위해 몇가지 사전 .. 공감수 0 댓글수 0 2024. 4. 8.
객체 키 타입의 유니온 추출 및 활용 객체 키 타입의 유니온 추출 및 활용 상수로 이용하려는 이미 정의된 객체 데이터를 타입스크립트로 다루다보면 가끔씩 불편한 상황을 마주하곤 한다. 나의 경우에는 객체 데이터 자체를 타입으로써 이용하고 싶은데 타입스크립트가 너무 빡빡하게 굴 때 종종 심기가 불편해진다. 가끔은 객체 타입을 모두 손수 지정해버리고 싶다는 충동이 들 때마저 있다. 물론 왕도는 없는듯 하다. 유지보수가 다소 어려워질것을 감안하고 객체의 타입을 모두 손수 지정해서 사용할 것인지, 아니면 특정 객체를 100% 신뢰한 상태에서 타입을 뻗어낼 것인지는 상황에 따라 판단하면 된다. 하지만 두 방법 모두 잘 알고 있기는 해야할 것이다. 객체 타입을 모두 손수 지정하는 것은 어렵지않은 단순 노가다이므로, 이 글에서는 객체 타입을 프로퍼티로 각.. 공감수 0 댓글수 1 2024. 1. 9.
유틸리티 타입 (Parameters) Parameters 함수의 파라미터를 타입으로 만드는 유틸리티 타입이며, 특정 함수의 파라미터를 튜플로 반환한다. 특정 컴포넌트의 파라미터를 타입으로 뽑아낼 때 유용하다. 객체지향 설계 중 리스코프 치환의 원칙을 구현할 때 적극적으로 사용할 수 있을 것 같다. function testFn({str, num, arr}: {str: string, num:number, arr: T[] }, context: string) { return { str, num, arr } } type TestParameter = Parameters[0] const shadow = ({ str, num, arr }: TestParameter) => { return str } 공감수 0 댓글수 0 2023. 11. 21.
유틸리티 타입 (Partial, Required, Record) 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의.. 공감수 0 댓글수 0 2023. 10. 27.
keyof typeof typesomething 이런게 되는구나 싶네요. type CalculatorProps = { left: number operator: keyof typeof operations right: number } type operations = { '+': (left: number, right: number) => number '-': (left: number, right: number) => number '*': (left: number, right: number) => number '/': (left: number, right: number) => number } operations 타입의 모든 key를 뽑아 CalculatorProps.operator의 유니온 타입으로 적용합니다. 공감수 0 댓글수 0 2023. 9. 5.
React 컴포넌트에 타입스크립트 적용 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 위 글을 참고했습.. 공감수 0 댓글수 0 2023. 9. 5.
catch문의 error 타입이 any 또는 unknown여야 하는 이유 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.. 공감수 0 댓글수 0 2023. 8. 9.
함수 표현식에 타입 적용하기 함수 표현식과 타입 할당 자바스크립트에서 함수는 표현식으로 나타낼 수 있다. 함수 타입을 만들고, 함수 표현식에 타입을 할당하면 함수에 타입을 깔끔하게 명시할 수 있다. 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.. 공감수 0 댓글수 0 2023. 7. 31.
타입 단언과 타입 선언 사용 시기 타입 단언, 타입 선언 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; // 오류 없음 타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다. 앞의 예제.. 공감수 0 댓글수 0 2023. 7. 27.
(TS) TodoList 작성과, interface, type assert에 대한 내 생각 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.. 공감수 0 댓글수 0 2023. 3. 12.
(TS) 타입 단언 (Type Assertion) 타입 단언 : 내가 너보다 많이 알아! 타입단언은 타입스크립트보다 개발자 본인이 더 타입을 명확히 알고 있으며 타입스크립트가 타입 정의를 잘 못하고 있을 때, 개발자가 타입을 주입시켜 주는 행위를 말한다. 위 상황에서 개발자인 우리는 index.html에 input과 button 엘리먼트가 각각 존재하고, 위 코드와 알맞는 id를 가지고 있는 것을 알 수 있다. 하지만 타입스크립트는 오류를 내뿜는다. 이유는 타입스크립트가 btn과 input이 HTMLElement라는 것을 document.getElementById를 통해서 알고는 있지만 HTMLElement에는 value라는 프로퍼티가 없기 때문에 오류를 내뿜는 것이다. 하지만 input의 타입은 HTMLElement가 아니다. 그렇다면 어떤 타입인지 .. 공감수 0 댓글수 0 2023. 3. 11.
(TS) non null / optional chaning btn이 버튼이라고 위에 선언했는데 왜 아래에서 이벤트리스너를 붙일 때 에러 메세지가 나는 걸까? 이유는 btn이 HTMLElement일 수도 있지만 null이 될 수도 있어서이다. null에는 이벤트를 붙여줄 수 없기 때문에 타입스크립트에서는 오류를 내뿜는다. 이를 막아줄 수 있는 방법이 2가지 정도 존재하는데 첫번째는 이것은 null이 무조건 아님! 하면서 ts에서 별도의 선언을 해주는 것이다. 이를 non-null 연산자라고 하며 !와 관련이 있다. 위의 사진처럼 첫번째 코드의 맨 뒷줄에 !를 넣어주면 const btn은 무조건 null이 아님! 이라고 선언해주는 것과 같게 된다. 따라서 btn에 이벤트리스너를 붙여줄 때 에러가 나지 않게 된다. 이런 강제적인 방법말고, 옵셔널 체이닝을 이용하는 방.. 공감수 0 댓글수 0 2023. 3. 11.
(TS) tsconfig / lib https://www.typescriptlang.org/tsconfig#lib TSConfig Reference - Docs on every TSConfig option From allowJs to useDefineForClassFields the TSConfig reference includes information about all of the active compiler flags setting up a TypeScript project. www.typescriptlang.org 먼저 공식문서의 tsconfig에 대한 lib의 설명을 보자. 타입스크립트는 빌트인 JS API (Math 메서드 세트 같은) 에 대한 타입 정의를 디폴트 세트로 가지고 있습니다. 그리고 브라우저 환경에 관련된 타입(doc.. 공감수 0 댓글수 0 2023. 3. 11.
(TS) document interface 열심히하자. 공감수 0 댓글수 0 2023. 3. 9.
(TS) Functions Parameters/Return Type Functions Parameters Type 함수의 파라미터(parameter)에 어떤 타입의 인수(argument)가 들어와야 하는지 명시해줄 수 있음. 파라미터에 n:type 형식으로 타입을 명시함. Functions Return Type 함수의 리턴값도 타입으로 명시해줄 수 있음. 보통의 경우에는 타입스크립트가 알아서 추론하지만 명시해주는 것이 도움될때가 많음. Union type 값이나 타입이 하나만 반환되지 않을 경우 유니온 타입이라고 함. Annonymous Functions 익명함수를 호출할 경우, 파라미터의 타입을 자동적으로 추론함. 또한 Contextual 부분도 자동적으로 감지할 수 있음. (실행 컨텍스트 관련) Void 아무것도 반환하지 않는 함수의 반환타입으로 사용하는 타입 nev.. 공감수 0 댓글수 0 2023. 2. 10.
(TS) Type Annotation + Type Inference Type Annotation type Annotation(타입 주석) : 변수에 자료형을 명시해 주는 것 let myVar: type = value 형식으로 작성 type 부분은 소문자로만 작성해야 함. (대문자 등등 X) Type Inference 타입스크립트 컴파일러가 코드의 value를 추론해서 타입을 생성함. 즉 Type annotation을 사용하지 않아도 타입이 자동적으로 강제됨. any any 타입은 딱히 타입을 캐치하지 않음. 남발하면 JS와 다를바 없는 코드가 됨. 공감수 0 댓글수 0 2023. 2. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.