반응형
TypeScript 모듈 (export, import)
취미/개발

TypeScript 모듈 (export, import)

TypeScript는 정적 타입 검사를 제공하면서도 모듈 시스템을 활용해 코드를 보다 체계적으로 관리할 수 있도록 지원합니다. 이 글에서는 TypeScript에서의 모듈 시스템, 네임스페이스와 모듈의 차이점, 그리고 외부 라이브러리 활용법에 대해 살펴보겠습니다.모듈 시스템 소개TypeScript의 모듈 시스템은 JavaScript의 모듈 시스템(import, export)을 기반으로 동작합니다. 모듈은 코드 조각을 독립적으로 분리해 재사용성을 높이고 충돌을 방지할 수 있도록 도와줍니다.export와 import 사용법export는 모듈에서 특정 값을 외부로 내보내는 데 사용됩니다. 내보낸 값은 다른 모듈에서 import를 사용하여 가져올 수 있습니다.기본 export 예시기본(default)으로 내보낸 ..

TypeScript에서의 클래스
취미/개발

TypeScript에서의 클래스

TypeScript는 객체 지향 프로그래밍(OOP, object-oriented programming) 스타일을 지원하며, 클래스(class)를 사용하여 코드의 구조를 더욱 체계적으로 작성할 수 있도록 돕습니다. 이 글에서는 TypeScript에서 클래스 정의와 생성자 타입, 접근 제어자(public, private, protected), 읽기 전용 속성(readonly), 추상 클래스(abstract class)와 인터페이스 구현에 대해 자세히 알아보겠습니다.클래스 정의 및 생성자클래스는 객체를 생성하기 위한 템플릿입니다. TypeScript에서 클래스는 다음과 같이 정의할 수 있습니다.class User { username: string; age: number; constructor(userna..

조건부 타입(Conditional Types)
취미/개발

조건부 타입(Conditional Types)

TypeScript는 정적 타입을 제공하여 코드의 안정성을 높이지만, 복잡한 로직에 따라 타입을 동적으로 변경해야 하는 상황이 생길 수 있습니다. 이러한 경우에 매우 유용하게 사용되는 것이 조건부 타입(Conditional Types)입니다. 조건부 타입은 타입 수준에서 "조건"을 평가하고, 그 조건에 따라 다른 타입을 선택할 수 있도록 해줍니다. 이를 활용하면 더 유연하고 읽기 쉬운 타입 정의가 가능합니다.조건부 타입의 기본 문법조건부 타입의 기본 문법은 다음과 같습니다:T extends U ? X : YT extends U: 조건부 표현식으로, T가 U에 할당 가능한지 여부를 평가합니다.X: 조건이 참(true)일 때 사용할 타입입니다.Y: 조건이 거짓(false)일 때 사용할 타입입니다. 예제를 통..

TypeScript 매핑 타입(Mapped Types)
취미/개발

TypeScript 매핑 타입(Mapped Types)

타입스크립트는 강력한 타입 시스템을 제공하여 코드 안정성과 개발자 경험을 높여줍니다. 그중에서 매핑된 타입(Mapped Types)은 기존의 타입을 변환하거나 확장할 수 있는 강력한 도구입니다. 이 글에서는 매핑된 타입의 개념, 구현 방법, 그리고 실무에서의 활용 사례를 단계별로 알아보겠습니다.매핑된 타입의 개념매핑된 타입은 타입스크립트에서 제공하는 고급 타입 기능으로, 기존 타입의 각 속성을 반복(iterate)하며 새로운 타입을 생성하는 방법을 제공합니다. 이를 통해 반복적인 타입 선언을 줄이고, 동적인 타입 변환을 간결하게 처리할 수 있습니다.기본 문법매핑된 타입은 keyof 연산자와 함께 사용됩니다. keyof는 객체 타입의 키 집합을 나타내며, 매핑된 타입은 이 키를 기반으로 새로운 타입을 생성..

TypeScript keyof와 인덱스 타입
취미/개발

TypeScript keyof와 인덱스 타입

keyof와 인덱스 타입은 TypeScript의 강력한 기능으로, 객체 타입의 속성과 타입 안정성을 관리하는 데 유용합니다. 이 글에서는 keyof와 인덱스 타입의 개념, 사용 방법, 그리고 이를 활용한 실용적인 예제를 살펴봅니다.keyof 연산자란?keyof 연산자는 특정 타입의 모든 키 이름(key)을 유니언 타입으로 반환합니다. 이를 통해 객체의 속성을 동적으로 접근하면서 타입 안전성을 유지할 수 있습니다.기본 예제interface User { id: number; name: string; email: string;}type UserKeys = keyof User; // "id" | "name" | "email"const key: UserKeys = "name"; // 정상// const in..

TypeScript 타입 가드(Type Guards)
취미/개발

TypeScript 타입 가드(Type Guards)

TypeScript는 정적 타입 언어로서 코드를 작성하는 동안 타입을 지정하고 검사하는 기능을 제공합니다. 이 과정에서 동적 데이터를 다룰 때 특정 타입인지 확인하는 작업이 필요할 수 있습니다. 이를 위해 TypeScript는 타입 가드(type guards)를 제공합니다. 이번 글에서는 타입 가드의 기본 개념과 다양한 활용 방법을 살펴보겠습니다.타입 가드란 무엇인가?타입 가드란 런타임에 변수의 타입을 좁히는(narrowing) 방법입니다. TypeScript는 코드에서 조건문을 통해 특정 타입을 확인하고, 확인된 타입에 따라 코드가 실행되도록 돕습니다. 타입 가드는 주로 다음과 같은 경우에 사용됩니다:여러 타입을 가질 수 있는 변수에서 특정 타입만 처리하고 싶을 때사용자 정의 타입이나 인터페이스를 검사..

Typescript 유니언(Union), 교차(Intersection) 타입
취미/개발

Typescript 유니언(Union), 교차(Intersection) 타입

TypeScript는 정적 타입 언어로, 코드를 더 안전하고 유지보수하기 쉽게 만듭니다. 여기서는 유니언 타입과 교차 타입이라는 두 가지 강력한 타입 시스템 개념을 설명합니다. 이 개념은 TypeScript에서 복잡한 데이터 구조를 다룰 때 매우 유용합니다.유니언 타입(Union Type)유니언 타입은 변수나 함수의 인자가 두 개 이상의 타입 중 하나를 가질 수 있도록 정의하는 타입입니다. 마치 "A 또는 B"를 표현합니다.기본 문법| 기호를 사용하여 유니언 타입을 정의합니다.type Fruit = 'apple' | 'banana' | 'orange';let myFruit: Fruit;myFruit = 'apple'; // 정상myFruit = 'banana'; // 정상myFruit = 'grape'..

TypeScript 제네릭(Generics)
취미/개발

TypeScript 제네릭(Generics)

제네릭의 개념과 필요성제네릭(Generics)는 TypeScript에서 코드 재사용성을 극대화하고 타입 안정성을 보장하는 데 매우 유용한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스를 다양한 타입으로 처리할 수 있습니다.필요성일반적으로 함수나 클래스에서 특정 타입을 다루게 되면, 그 타입이 고정적이어서 재사용성이 떨어집니다. 제네릭은 이러한 문제를 해결하고 다양한 타입을 지원할 수 있도록 설계되었습니다.예를 들어, 배열의 첫 번째 요소를 반환하는 함수를 생각해 봅시다.// 문자열 배열에 대해 동작하는 함수function getFirstElementString(arr: string[]): string { return arr[0];}// 숫자 배열에 대해 동작하는 함수function getFi..

typeScript

14건
TypeScript 모듈 (export, import)
취미/개발

TypeScript 모듈 (export, import)

TypeScript는 정적 타입 검사를 제공하면서도 모듈 시스템을 활용해 코드를 보다 체계적으로 관리할 수 있도록 지원합니다. 이 글에서는 TypeScript에서의 모듈 시스템, 네임스페이스와 모듈의 차이점, 그리고 외부 라이브러리 활용법에 대해 살펴보겠습니다.모듈 시스템 소개TypeScript의 모듈 시스템은 JavaScript의 모듈 시스템(import, export)을 기반으로 동작합니다. 모듈은 코드 조각을 독립적으로 분리해 재사용성을 높이고 충돌을 방지할 수 있도록 도와줍니다.export와 import 사용법export는 모듈에서 특정 값을 외부로 내보내는 데 사용됩니다. 내보낸 값은 다른 모듈에서 import를 사용하여 가져올 수 있습니다.기본 export 예시기본(default)으로 내보낸 ..

TypeScript에서의 클래스
취미/개발

TypeScript에서의 클래스

TypeScript는 객체 지향 프로그래밍(OOP, object-oriented programming) 스타일을 지원하며, 클래스(class)를 사용하여 코드의 구조를 더욱 체계적으로 작성할 수 있도록 돕습니다. 이 글에서는 TypeScript에서 클래스 정의와 생성자 타입, 접근 제어자(public, private, protected), 읽기 전용 속성(readonly), 추상 클래스(abstract class)와 인터페이스 구현에 대해 자세히 알아보겠습니다.클래스 정의 및 생성자클래스는 객체를 생성하기 위한 템플릿입니다. TypeScript에서 클래스는 다음과 같이 정의할 수 있습니다.class User { username: string; age: number; constructor(userna..

조건부 타입(Conditional Types)
취미/개발

조건부 타입(Conditional Types)

TypeScript는 정적 타입을 제공하여 코드의 안정성을 높이지만, 복잡한 로직에 따라 타입을 동적으로 변경해야 하는 상황이 생길 수 있습니다. 이러한 경우에 매우 유용하게 사용되는 것이 조건부 타입(Conditional Types)입니다. 조건부 타입은 타입 수준에서 "조건"을 평가하고, 그 조건에 따라 다른 타입을 선택할 수 있도록 해줍니다. 이를 활용하면 더 유연하고 읽기 쉬운 타입 정의가 가능합니다.조건부 타입의 기본 문법조건부 타입의 기본 문법은 다음과 같습니다:T extends U ? X : YT extends U: 조건부 표현식으로, T가 U에 할당 가능한지 여부를 평가합니다.X: 조건이 참(true)일 때 사용할 타입입니다.Y: 조건이 거짓(false)일 때 사용할 타입입니다. 예제를 통..

TypeScript 매핑 타입(Mapped Types)
취미/개발

TypeScript 매핑 타입(Mapped Types)

타입스크립트는 강력한 타입 시스템을 제공하여 코드 안정성과 개발자 경험을 높여줍니다. 그중에서 매핑된 타입(Mapped Types)은 기존의 타입을 변환하거나 확장할 수 있는 강력한 도구입니다. 이 글에서는 매핑된 타입의 개념, 구현 방법, 그리고 실무에서의 활용 사례를 단계별로 알아보겠습니다.매핑된 타입의 개념매핑된 타입은 타입스크립트에서 제공하는 고급 타입 기능으로, 기존 타입의 각 속성을 반복(iterate)하며 새로운 타입을 생성하는 방법을 제공합니다. 이를 통해 반복적인 타입 선언을 줄이고, 동적인 타입 변환을 간결하게 처리할 수 있습니다.기본 문법매핑된 타입은 keyof 연산자와 함께 사용됩니다. keyof는 객체 타입의 키 집합을 나타내며, 매핑된 타입은 이 키를 기반으로 새로운 타입을 생성..

TypeScript keyof와 인덱스 타입
취미/개발

TypeScript keyof와 인덱스 타입

keyof와 인덱스 타입은 TypeScript의 강력한 기능으로, 객체 타입의 속성과 타입 안정성을 관리하는 데 유용합니다. 이 글에서는 keyof와 인덱스 타입의 개념, 사용 방법, 그리고 이를 활용한 실용적인 예제를 살펴봅니다.keyof 연산자란?keyof 연산자는 특정 타입의 모든 키 이름(key)을 유니언 타입으로 반환합니다. 이를 통해 객체의 속성을 동적으로 접근하면서 타입 안전성을 유지할 수 있습니다.기본 예제interface User { id: number; name: string; email: string;}type UserKeys = keyof User; // "id" | "name" | "email"const key: UserKeys = "name"; // 정상// const in..

TypeScript 타입 가드(Type Guards)
취미/개발

TypeScript 타입 가드(Type Guards)

TypeScript는 정적 타입 언어로서 코드를 작성하는 동안 타입을 지정하고 검사하는 기능을 제공합니다. 이 과정에서 동적 데이터를 다룰 때 특정 타입인지 확인하는 작업이 필요할 수 있습니다. 이를 위해 TypeScript는 타입 가드(type guards)를 제공합니다. 이번 글에서는 타입 가드의 기본 개념과 다양한 활용 방법을 살펴보겠습니다.타입 가드란 무엇인가?타입 가드란 런타임에 변수의 타입을 좁히는(narrowing) 방법입니다. TypeScript는 코드에서 조건문을 통해 특정 타입을 확인하고, 확인된 타입에 따라 코드가 실행되도록 돕습니다. 타입 가드는 주로 다음과 같은 경우에 사용됩니다:여러 타입을 가질 수 있는 변수에서 특정 타입만 처리하고 싶을 때사용자 정의 타입이나 인터페이스를 검사..

Typescript 유니언(Union), 교차(Intersection) 타입
취미/개발

Typescript 유니언(Union), 교차(Intersection) 타입

TypeScript는 정적 타입 언어로, 코드를 더 안전하고 유지보수하기 쉽게 만듭니다. 여기서는 유니언 타입과 교차 타입이라는 두 가지 강력한 타입 시스템 개념을 설명합니다. 이 개념은 TypeScript에서 복잡한 데이터 구조를 다룰 때 매우 유용합니다.유니언 타입(Union Type)유니언 타입은 변수나 함수의 인자가 두 개 이상의 타입 중 하나를 가질 수 있도록 정의하는 타입입니다. 마치 "A 또는 B"를 표현합니다.기본 문법| 기호를 사용하여 유니언 타입을 정의합니다.type Fruit = 'apple' | 'banana' | 'orange';let myFruit: Fruit;myFruit = 'apple'; // 정상myFruit = 'banana'; // 정상myFruit = 'grape'..

TypeScript 제네릭(Generics)
취미/개발

TypeScript 제네릭(Generics)

제네릭의 개념과 필요성제네릭(Generics)는 TypeScript에서 코드 재사용성을 극대화하고 타입 안정성을 보장하는 데 매우 유용한 도구입니다. 제네릭을 사용하면 함수, 클래스, 인터페이스를 다양한 타입으로 처리할 수 있습니다.필요성일반적으로 함수나 클래스에서 특정 타입을 다루게 되면, 그 타입이 고정적이어서 재사용성이 떨어집니다. 제네릭은 이러한 문제를 해결하고 다양한 타입을 지원할 수 있도록 설계되었습니다.예를 들어, 배열의 첫 번째 요소를 반환하는 함수를 생각해 봅시다.// 문자열 배열에 대해 동작하는 함수function getFirstElementString(arr: string[]): string { return arr[0];}// 숫자 배열에 대해 동작하는 함수function getFi..

반응형