hoazzinews 님의 블로그

TypeScript의 강점은 “타입으로 코드 품질을 설계한다”는 데 있습니다.기본 문법들을 단순히 나열하는 수준을 넘어, 실무 프로젝트에서 타입을 설계하고 관리하는 전략을 정리해보겠습니다. 1. 타입을 ‘먼저’ 설계하는 습관많은 초보 개발자들은 코드를 먼저 작성하고 타입을 나중에 맞추는 실수를 합니다.그러나 이상적인 흐름은 반대입니다. "타입을 먼저 정의하고 → 코드가 그 타입을 따르도록 구현" 예를 들어, API 응답 구조를 미리 타입으로 설계하면컴파일러가 자동으로 오류를 찾아줍니다.interface User { id: number; name: string; email: string;}async function getUser(): Promise { const res = await fetch("/..

TypeScript는 코드의 규모가 커질수록 모듈화(modularization) 를 통해 코드의 재사용성과 유지보수성을 높이는 것을 권장합니다.또한 외부 라이브러리와의 통합 시에는 타입 선언(.d.ts)을 통해 정의되지 않은 타입을 직접 선언하거나 확장할 수 있습니다. 1. 모듈 시스템의 이해TypeScript는 ES6 모듈 시스템(import, export)을 기반으로 작동합니다.모든 TypeScript 파일은 기본적으로 모듈 단위로 취급되며,전역 스코프를 오염시키지 않습니다.// utils/math.tsexport function add(a: number, b: number): number { return a + b;}// main.tsimport { add } from "./utils/math";..

TypeScript는 이미 잘 정의된 유틸리티 타입(Utility Types) 을 제공합니다.이 타입들은 기존 타입을 기반으로 새로운 타입을 “조합”하거나 “가공”할 수 있게 해줍니다.또한 조건부 타입, 매핑 타입, 템플릿 리터럴 타입 같은 고급 문법을 통해 복잡한 타입 로직을 정교하게 설계할 수 있습니다. 1 주요 내장 유틸리티 타입① PartialPartial는 모든 속성을 선택적(optional) 으로 만듭니다.interface User { id: number; name: string; age: number;}type UpdateUser = Partial;// 결과// {// id?: number;// name?: string;// age?: number;// } 실무 예시:func..

이 장은 TypeScript에서 가장 강력하면서도 실무에서 자주 쓰이는 기능인 제네릭(Generic)을 다룹니다.특히 React 훅(useState, useReducer, useRef)이나 API 타입 설계 등에서도 핵심적으로 등장하기 때문에,"타입을 유연하게 재사용하면서도 안전성을 유지하는 방법" 에 초점을 맞추겠습니다. 1. 제네릭의 개념제네릭(Generics)은 함수나 클래스, 인터페이스를 작성할 때타입을 외부에서 주입받을 수 있게 하는 문법입니다.즉, “데이터 타입에 의존하지 않는 재사용 가능한 코드” 를 작성할 수 있도록 도와줍니다.function identity(value: T): T { return value;}const num = identity(10); // T = numberconst..

TypeScript는 ECMAScript 2015(ES6)에서 도입된 클래스(Class) 문법을 기반으로, 더 강력한 객체지향 프로그래밍(OOP) 기능을 제공합니다.클래스는 객체의 청사진(blueprint) 으로, 데이터(속성)와 동작(메서드)을 하나의 단위로 묶어 코드의 재사용성과 유지보수성을 높입니다. 1 클래스의 기본 구조TypeScript에서의 클래스 선언은 JavaScript와 유사하지만,속성과 생성자에 명시적인 타입 선언을 할 수 있습니다.class User { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } introduce(): str..

TypeScript에서는 함수의 입력과 출력의 타입을 명확하게 지정할 수 있습니다.함수는 프로그램 로직의 핵심이기 때문에, 타입을 올바르게 설계하면 예상치 못한 버그를 사전에 방지할 수 있습니다. 1. 함수 선언과 반환 타입 지정가장 기본적인 함수 타입 선언 방식은 아래와 같습니다.function add(a: number, b: number): number { return a + b;}매개변수 a, b는 number 타입으로 지정되어 있습니다.반환값의 타입도 number로 명시되어 있습니다.만약 함수가 값을 반환하지 않는다면 void 타입을 사용합니다.function logMessage(message: string): void { console.log(message);}※ void는 “아무 것도 반환..

TypeScript에서 객체 구조를 정의하는 가장 대표적인 방법은 인터페이스(Interface) 와 타입 별칭(Type Alias) 입니다.두 문법 모두 "타입의 형태(Shape)"를 정의하지만, 확장성이나 표현력 측면에서 약간의 차이가 있습니다.이 장에서는 두 개념의 기본 사용법과 차이점을 살펴보고, 실무에서 어떤 기준으로 선택해야 하는지도 함께 알아보겠습니다. 1. 인터페이스(Interface)의 정의인터페이스는 객체의 구조를 명세하기 위한 타입 선언 방식입니다.객체가 어떤 속성과 메서드를 가져야 하는지를 명확하게 정의할 수 있습니다.interface User { id: number; name: string; isAdmin: boolean;}const user1: User = { id: 1, ..

TypeScript의 가장 큰 특징은 정적 타입 시스템(Static Type System) 입니다.이 시스템 덕분에 변수, 함수, 객체의 타입을 명확하게 정의하고, 컴파일 시점에 타입 오류를 감지할 수 있습니다.본 섹션에서는 TypeScript의 기본적인 타입 정의 방법과 활용법을 살펴보겠습니다. 1. 기본 타입 (Primitive Types)TypeScript는 JavaScript의 기본 자료형을 그대로 지원하면서, 여기에 명시적인 타입 선언 기능을 제공합니다.let name: string = "Alice";let age: number = 28;let isStudent: boolean = false;※ : 콜론 뒤에 타입을 명시하여 변수의 데이터 형태를 지정할 수 있습니다. 타입스크립트는 다음과 같은 ..

1. TypeScript란 무엇인가TypeScript는 JavaScript의 슈퍼셋(Superset) 으로,기존 JavaScript 문법 위에 정적 타입 시스템과 컴파일 단계의 에러 검출 기능을 추가한 언어입니다.간단히 말하면, "런타임에만 드러나던 버그를 빌드 타임에 미리 잡아주는 JavaScript" 라고 할 수 있습니다. TypeScript의 코드는 브라우저나 Node.js가 직접 실행하지 않습니다..ts 파일은 TypeScript 컴파일러(tsc)를 통해 표준 JavaScript 코드로 트랜스파일(transpile) 되어 실행됩니다.# TypeScript 코드 → JavaScript 코드npx tsc app.ts# 결과: app.js 생성이 덕분에 TypeScript는 ECMAScript 표준을 ..