![]()
Enum?다음과 같은 배열이 있을때, 이것을 Enum 으로 처리할지 그냥 Union type 으로 할지 의사결정이 필요했습니다.export const buddyThemes = [ '계획', '즉흥', '빨리빨리', '느긋느긋', '촬영', '감상', '깔끔쟁이', '자연인', '가성비', '가심비',];export const tripThemes = [ '도시', '자연', '유명맛집', '로컬맛집', '힐링', '액티비티', '쇼핑', '관광',];TypeScript에서는 enum을 사용하여 이러한 배열을 기반으로 enum 타입을 만들 수 있다고 합니다.다음은 두 배열을 기반으로 만든 enum 타입의 예시입니..
![]()
Awaited, ReturnType타입스크립트에서 Awaited 와 ReturtnType 에 대해 공부하였습니다.타입스크립트에서 Awaited>를 사용하여 타입을 지정하는 방식은 함수 foo의 반환 타입이 Promise일 때 유용합니다. 이를 통해 foo 함수의 비동기 작업이 완료된 후의 결과 타입을 추론할 수 있습니다.Awaited 타입 유틸리티Awaited는 타입스크립트에서 비동기 함수의 결과 타입을 추론하는 데 사용되는 유틸리티 타입입니다. Promise가 반환하는 값의 타입을 추출합니다.ReturnType 타입 유틸리티ReturnType는 주어진 함수 타입 T의 반환 타입을 추출하는 유틸리티 타입입니다.typeof 연산자typeof 연산자는 변수나 함수의 타입을 가져오는 데 사용됩니다.예제// 비..
![]()
cva with 타입스크립트?포켓몬 도감 비스무리한 개인과제 프로젝트를 하면서,cva 라이브러리를 사용 중에 타입지정에 매우 애를 먹었습니다.원래 이렇게 쓰는건가 싶습니다...? 더 공부해봐야겠습니다 ㅠㅠ아래의 예는 포켓몬의 타입 18개에만 해당하는 것이라 문제가 덜하지만속성인지 뭔지는 게임의 세대가 변화될때마다 추가되어서 뭐 몇개인지도 모르겠어요. 이것을 다 리터럴 타입으로 지정하자니 너무 힘들고 해서 mapped type 을 사용하긴 했는데되는건지 뭔지 모르겠습니다? 관련 내용을 정리합니다.cva chip 컴포넌트 만들기포켓몬의 18가지 타입에 맞는 Chip 컴포넌트를 만들기 위해 기존의 chipVariants 객체에 포켓몬 타입별 색상을 추가합니다.각각의 타입에 적절한 배경색, 테두리색, 텍스트 색..
![]()
Structural TypingTypeScript에서 타입을 축약해도 작동하는 이유는 TypeScript의 구조적 타이핑(structural typing) 덕분입니다. TypeScript는 객체의 실제 형태(shape)를 기반으로 타입을 확인합니다. 즉, 필요한 속성만 지정해도, 해당 속성들이 존재하면 타입이 유효하다고 판단합니다.축약한 타입이 작동하는 이유부분 타입 매칭: TypeScript는 객체가 정의된 타입을 충족하는지 확인할 때, 필요한 속성만 일치하면 타입이 맞다고 판단합니다. 축약된 타입 정의에서도 필요한 속성만 일치하면 타입이 유효하다고 판단합니다.유연한 타입 시스템: TypeScript는 유연하게 타입을 해석하므로, 특정 속성만 필요한 경우 전체 타입을 정의하지 않아도 됩니다.예제 설명축..
![]()
튜터님께서 타입을 검사할 때 너무나도 유용한 코드를 알려주셨습니다.이 코드는 미리 정의된 타입 디스크립터와 동적으로 정의된(통신의 결과 등)객체의 타입을 검증하려는 목적을 가지고 있습니다. 타입스크립트에 대한 이해가 더욱 깊어진 것 같습니다!!전체 코드, 주석 참고!// 다른 형태를 가진 객체를 아래의 로직을 활용해 검사해 보려면,// 1) 이 인터페이스를 검사할 객체와 같게 바꾸고interface MyObject { value: number;}type TypeDescriptor = { [P in keyof T]: string;};function checkType(obj: any, typeDescriptor: TypeDescriptor): boolean { for (const key in..
![]()
tsconfig.json 프로젝트 폴더에 만들고, { "compilerOptions": { "target": "es5", "module": "commonjs", } } 어떤 버전으로 컴파일 할 건지 명시 잘모르겠으면 es5 commonjs 하면됨 { "compilerOptions": { "target": "es5", "module": "commonjs", "noImplicitAny": true, "strictNullChecks": true } } noImplicitAny : any 타입 에러띄워줌 strictNullChecks : undefined, null 조작하면 에러띄워줌 기타 다른옵션들 { "compilerOptions": { "target": "es5", // 'es3', 'es5', 'es20..
![]()
안녕하세요! 타입스크립트에서 기본 문법을 이해하는 것은 중요한 단계입니다. 특히 기본 타입에 대한 이해는 타입스크립트의 핵심입니다. 여기 타입스크립트의 주요 기본 타입들에 대해 설명하겠습니다. 1. Boolean 불리언 타입은 true 또는 false 값을 가집니다. let isDone: boolean = false; 2. Number 타입스크립트에서 모든 숫자는 부동 소수점 값입니다. 타입스크립트는 ECMAScript 표준에 따라 16진수 및 10진수 리터럴 외에도, ECMAScript 2015부터 도입된 2진수 및 8진수를 지원합니다. let decimal: number = 6; let hex: number = 0xf00d; let binary: number = 0b1010; let octal: nu..
![]()
변수 만들 때 타입지정 const name : string = 'kim' 변수명 : 타입명 이렇게 씀 타입 지정해놓으면 앞으로 타입이 틀렸을 때 에러남 타입관련 버그들을 사전 예방 가능 const name : string[] = ['kim', 'park'] const age : { age : number } = { age : 18 } 어레이나 오브젝트는 이렇게 지정 가능 const name :string | number = 'kim'; 2가지 이상 타입 들어올 수 있다면 위처럼.. type nameType = string | number; let name :nameType = 'kim'; type 키워드를 통해 타입을 변수처럼 담아서 사용 가능 function beautifulFunction(x :num..
![]()
안녕하세요! 타입스크립트를 사용하기 위한 환경 설정은 중요한 단계입니다. 이 과정에서는 타입스크립트를 설치하고, 개발 환경을 구성하는 방법을 다룹니다. 1. Node.js 설치 타입스크립트를 사용하기 전에 Node.js가 설치되어 있어야 합니다. Node.js는 타입스크립트 컴파일러를 실행하는 데 필요한 런타임 환경을 제공합니다. Node.js 설치: Node.js 공식 웹사이트에서 LTS 버전을 다운로드하여 설치합니다. 2. 타입스크립트 설치 Node.js가 설치되면, NPM(Node Package Manager)을 사용하여 타입스크립트를 설치할 수 있습니다. 일반적으로 타입스크립트는 전역적(global) 또는 프로젝트별(local)로 설치할 수 있습니다. 전역 설치: 모든 프로젝트에서 타입스크립트를 ..
![]()
물론이죠! 타입스크립트(TypeScript)의 기초를 이해하는 것은 타입스크립트를 배우는 데 있어 매우 중요한 첫걸음입니다. 여기 타입스크립트의 기초적인 개념들을 설명하겠습니다. 타입스크립트란? 타입스크립트는 자바스크립트의 슈퍼셋: 타입스크립트는 자바스크립트에 타입 시스템을 추가한 것으로, 모든 자바스크립트 코드는 타입스크립트에서도 유효합니다. 즉, 타입스크립트는 자바스크립트의 모든 기능을 포함하며 추가적인 기능을 제공합니다. 정적 타입 검사: 타입스크립트의 핵심 기능 중 하나는 정적 타입 검사입니다. 이것은 코드가 실행되기 전에 타입 오류를 찾아내어 더 안정적이고 예측 가능한 코드를 작성할 수 있게 도와줍니다. 클래스 기반 객체 지향 프로그래밍 지원: 타입스크립트는 자바스크립트의 프로토타입 기반 상속보..
![]()
안녕하세요! 자바스크립트에 대한 기본 지식을 바탕으로 타입스크립트를 빠르게 배우고자 한다면, 다음과 같은 커리큘럼을 추천합니다: 타입스크립트 기초 이해: 타입스크립트가 무엇인지, 왜 사용되는지에 대한 개요. 자바스크립트와 타입스크립트의 주요 차이점. 환경 설정: 타입스크립트 설치 및 기본 설정. IDE(예: Visual Studio Code)에서 타입스크립트 사용 설정. 기본 문법 학습: 기본 타입: 문자열, 숫자, 불리언, 배열, 튜플, 열거형 등. 인터페이스와 타입 별칭의 이해 및 활용. 함수와 메소드에 타입 적용하기. 고급 타입스크립트 기능: 제네릭스 이해 및 사용. 유니언, 인터섹션 타입스, 타입 가드. 데코레이터, 믹스인. 실제 프로젝트 적용: 기존 자바스크립트 프로젝트에 타입스크립트 도입하기...
