개발새발

보호되어 있는 글입니다.

보호되어 있는 글입니다.

test.tsx를 JavaScript로 트랜스파일하기아래 예시는 동일한 소스 test.tsx를 tsconfig.json 의 "jsx" 옵션만 바꿔가며 npx tsc 로 컴파일했을 때 어떤 JS 결과물이 생성되는지를 비교‧분석한 것이다. 모든 예시는 TypeScript 4.5 이상을 전제로 설명한다. 1. 기본 세팅$ tree -L 1.├── tsconfig.json└── test.tsx test.tsx 안에는 일반적인 함수 컴포넌트가 들어 있다고 가정한다.// test.tsximport { useState, useCallback, useRef, useEffect } from 'react';const Form = ({ children, onSubmit }) => ( {children});const Wor..

1. 프로젝트 구조와 준비src/ ├─ zeact.tsx ← 우리가 직접 작성할 타입 선언 파일 └─ WordRelay.tsx zeact.tsx : declare namespace Zeact { … } 블록 안에 모든 타입·함수를 선언한다.WordRelay.tsx : 원래 React 예제를 그대로 두되, React. 대신 Zeact. 접두어를 붙여 사용한다.타입스크립트 컴파일러는 같은 루트(혹은 tsconfig.json의 "include")에 있는 .ts·.tsx 파일을 모두 스캔하므로, 따로 types 경로를 지정할 필요는 없다. 2. 훅(Hooks) 선언하기2-1. 가장 단순한 형태declare namespace Zeact { const useState: () => void; const use..

JSX 타입 이해하기JSX 문법은 HTML처럼 보이지만, 실제로는 순수 JavaScript 값과 TypeScript 타입으로 환원되는 구조이다. 타입 체계를 정확히 이해하면 strict 모드에서 흔히 마주치는 “속성이 존재하지 않는다” 오류를 미리 피할 수 있다.이번 글에서는 전역 JSX 네임스페이스에서 사용자 컴포넌트까지, 타입이 어떻게 연결되는지를 단계적으로 살펴보려고 한다. 1. 전역 JSX 네임스페이스@types/react에는 다음과 같은 선언이 존재한다.declare global { namespace JSX { interface Element extends React.ReactElement {} interface IntrinsicElements { form: React.D..

React에서 제공하는 Hook들은 모두 타입스크립트와 함께 사용할 수 있도록 정교하게 정의되어 있다. 본 글에서는 useState, useEffect, useRef, useMemo, useCallback 등 대표적인 Hook의 타입 정의를 공식 타입 정의 파일을 기준으로 하나씩 분석하고, 이를 실제 코드와 연결해 살펴보려고 한다. 1. useState 타입 분석useState는 상태와 해당 상태를 업데이트하는 함수를 반환한다. 다음과 같이 정의되어 있다:function useState(initialState: S | (() => S)): [S, Dispatch>];function useState(): [S | undefined, Dispatch>]; 핵심 개념Dispatch는 (value: A) => ..

React는 자바스크립트로 UI를 구성할 수 있도록 도와주는 라이브러리이다. 이때 사용하는 문법인 JSX는 HTML과 유사하게 생겼지만 자바스크립트 안에서 실행되며, 타입스크립트와 함께 사용할 경우 특별한 설정이 필요하다.이 글에서는 React 프로젝트에서 타입스크립트를 제대로 작동시키기 위한 설정과 함께, React 내부의 타입 시스템을 설명하려고 한다. 1. React는 타입스크립트를 지원하는가?React는 자체적으로 타입 선언을 제공하지 않는다. 대신 DefinitelyTyped 커뮤니티에서 관리하는 @types/react 패키지를 통해 타입 정의를 제공한다. 설치 명령어npm i react@18.2.0 @types/react@18.0.28npx tsc --init 설치 후 node_modules..

TypeScript를 사용할 때 가장 매끄럽게 작동하는 기능 중 하나는 타입 자동 추론이다. axios와 같은 외부 라이브러리를 import할 때, 별도의 타입 선언 없이도 .ts 파일에서 자동으로 타입 정보를 인식하고 에러를 잡아준다. 그렇다면 TypeScript는 어떻게 axios의 타입 선언 파일(index.d.ts)을 정확히 찾아낼 수 있을까?이번 글에서는 TypeScript의 모듈 해석 시스템(Module Resolution)에 따라, axios의 타입을 어떻게 찾는지를 내부 동작 흐름과 실제 예제를 통해 설명해보려고 한다. 타입 선언의 두 가지 방식TypeScript에서 타입 선언 파일을 찾는 경로는 두 가지로 나뉜다:자체적으로 타입을 제공하는 패키지예: axios, react, lodashn..