TS6 엠비언트 타입(Ambient Type)(.d.ts) 목차 엠비언트 타입이란?코드 외부에서 정의된 객체, 라이브러리, 전역 변수 등의 타입을 명시하기 위해 사용주로 타입 정의 파일(.d.ts)로 제공되며, 외부 모듈이나 브라우저 API 같은 것을 사용할 때 타입을 명확히 하기 위해 사용함. 이 방식으로 타입스크립트 코드가 특정 환경의 정의를 알 수 있도록 돕고, 타입 안정성을 유지할 수 있게 한다..d.ts 확장자를 가진 파일에서는 타입 선언만 할 수 있으며 값을 표현할 수는 없다. 엠비언트 타입의 주요 사용 사례외부 라이브러리 정의 : @types 패키지를 통해 사용되는 외부 라이브러리의 타입을 정의한다.전역 객체 정의 : 프로젝트에서 정의한 전역 변수, 함수, 객체의 타입을 명시할 때 활용 한다.모듈 보강 : 외부 모듈에 새로 추가된 API나 보강할 .. 2024. 11. 2. [TS,라이브러리] Effect-TS 알아보기 목차 서론https://www.youtube.com/shorts/2W1fQH0wEe4https://www.youtube.com/shorts/MzFCHctD0lMhttps://www.youtube.com/shorts/MzFCHctD0lM 제로초 선생님의 유튜브를 보는 도중 effect라는 라이브러리의 존재를 알게 되었다. 제로초 선생님의 말을 빌리자면 타입스크립트의 새로운 표준이 될 수 있는 라이브러리라고 한다. Effect 라이브러리란?Effect는 개발자들에게 복잡하고, 동기,비동기 한 프로그램에 도움을주고자 한 강력한 TS라이브러리라고한다. Docshttps://effect.website/https://effect.website/docs/introductionhttps://github.com.. 2024. 7. 28. [TS] 커스텀 유틸리티 타입 활용하기 목차 커스텀 유틸리티 타입?타입스크립트로 프로젝트를 진행하다 보면 표현하기 힘든 타입을 마주할 때가 있다. 원하는 타입을 정확하게 설정해야만 해당 컴포넌트, 함수의 안전성과 사용성을 높일 수 있지만 타입스크립트에서 제공하는 유틸리티 타입만으로는 표현하는데 한계가 있다.이럴때 유틸리티 타입을 활용한 커스텀 유틸리티 타입을 제작해서 사용하면 된다. 커스텀 유틸리티 타입 종류유틸리티 함수를 활용해 styled-components의 중복 타입 선언 피하기리액트 컴포넌트를 구현할 때 여러 옵션을 props로 받아 유연한 컴포넌트로 만들 수 있다.ex) background-color, size 등등이와 같은 props는 styled-components에 전달되며 styled-components에도 해당 타입을.. 2024. 7. 28. [TS] index.d.ts 알아보기 목차 index.d.ts는 무엇인가?'index.d.ts'는 TypeScript 에서 타입 정의 파일(Type Definition File)로, 주로 JavaScript 라이브러리나 모듈의 타입 정보를 정의하는데 사용된다. 이 파일은 TypeScript 코드가 해당 라이브러리나 모듈과 상호작용할 때 타입 안전성을 유지하도록 도와준다.'index.d.ts'파일의 주요 목적은 타입정보를 제공하여 코드 작성 중에 자동 완성 기능과 컴파일 타임 오류 검사를 가능하게 하는 것이다. 주요 내용 타입 선언index.d.ts 파일은 변수, 함수, 클래스, 인터페이스 등의 타입을 선언한다.// Example: jQuery type definitionsdeclare var $: (selector: string) =>.. 2024. 6. 16. [React,TS] React프로젝트 TS세팅 하기 목차 설치 명령어npx create-react-app my-app --template typescript 2024. 5. 28. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 2 / 2 > 개인기록 reduxToolKit 사용해보기아래 사진은 src/libs폴더입니다. 이중 예제에 사용하기좋은 counter를 이용해서 redux 를 사용해보려고합니다.counter.actions.ts// baseimport { createAction } from "@reduxjs/toolkit";// defaultexport const COUNTER = "counter";export const COUNTER_SLICE_NAME = `${COUNTER}Slice`;// actionconst INCREMENT = `${COUNTER}/increment`;const DECREMENT = `${COUNTER}/decrement`;const INCREMENT_BY_AMOUNT = `${COUNTER}/incrementByAm.. 2024. 5. 22. 이전 1 다음
