2025/08/15 4

타입 수정이 이렇게 쉬웠어? 유틸리티 타입 모음집

유틸리티 타입이란?TypeScript에는 자주 쓰이는 타입 변환을 빠르게 할 수 있도록 미리 만들어진 타입 도우미들이 있다.이걸 유틸리티 타입(Utility Types)이라고 부르고, 타입을 재활용·수정할 때 코드량을 줄여준다.// tsconfig.ts{ "compilerOptions": { "lib": ["ESNext"] }} 이렇게 설정하면 최신 빌트인 유틸리티 타입을 쓸 수 있다.주요 유틸리티 타입1) Pick객체 타입에서 원하는 프로퍼티만 뽑아 새 타입 만들기.type Porsche = Pick;2) Omit객체 타입에서 원하지 않는 프로퍼티만 빼고 새 타입 만들기.type Student = Omit; 2) Partial객체 타입의 모든 프로퍼티를 선택적(optional)으로 변경.RES..

typescript 2025.08.15

전역 변수 지옥 탈출기: CommonJS부터 ES6까지 흐름 한눈에

1. 전역 변수 시대옛날 JS는 모든 파일이 전역 스코프를 공유해서변수 이름 충돌·유지보수 문제 심각했다.2. 모듈 시스템 등장 - CommonJS: `module.exports`, `require()` (Node.js 기본) - RequireJS: `define()`, `require()` (브라우저 AMD 방식) → 파일별 독립 스코프로 문제 해결.3. ES6 모듈(표준)`import`, `export` 키워드 도입.성능 최적화 쉬움, 현재 표준 방식.// math.jsexport function add(a, b) { return a + b; }// app.jsimport { add } from './math.js';

javascript 2025.08.15

TS에서 여러 파일을 묶고 싶을 땐? 배럴(Barrel)을 이용하자!

배럴은 무엇을 담는 통이다.타입스크립트에도 배럴 개념이 있다. 예를들어,‘./hero’ 는 ‘./hero/index.ts' 를 가리킨다.따라서, 묶고 싶은 파일들이 있으면 hero같은 폴더를 만들고, 파일들을 넣어놓고 index.ts를 만들면 된다.// ./Hero/index.tsexport * from "./Button";export * from "./Input";export * from "./Modal";// 사용할 땐import { Button, Input, Modal } from "./components";

카테고리 없음 2025.08.15

구조적 타이핑

구조적 타이핑은 "생김새"로 타입 호환을 할 수 있는 타입스크립트의 능력이다.타입 호환이란 서로 다른 두 타입이 있을 때 특정 타입이 다른 타입에 포함되는지를 의미한다.이 능력은 일반 타입들 + 함수에 쓸 수 있다. // case 1:let a: string = 'hi';let b: number = 3;b = a; // error// case 2:interface A { name: string;}class B { name: string; age: number;}let i: A;i = new B(); // OK. 만약 B에 없는 프로퍼티가 A에 있으면 대입할 때 할당 값이 없으므로 에러.

typescript 2025.08.15