[TS] 유틸리티 타입 (Utility Types)

01유틸리티 타입 이란?타입스크립트에는 반복적으로 사용되는 패턴을 쉽게 적용할 수 있는 유틸리티 타입(Utility Types) 이 제공됩니다. 이 유틸리티 타입을 활용하면 코드를 더 간결하고 안전하게 작성할 수 있어요!  유틸리티 타입은 맵드 타입(Mapped Types) 기반과 조건부 타입(Conditional Types) 기반으로 나눌 수 있습니다.📌 맵드 타입 기반 → 객체의 속성을 변형하는 유틸리티 입 예: Partial, Required, Readonly, Pick, Omit 등객체의 특정 속성을 선택적으로 만들거나(Readonly, Partial), 필수로 변경(Required) 하는 등의 변형을 쉽게 수행할 수 있습니다.📌 조건부 타입 기반 → 특정 타입을 제거하거나 추출하는 유틸리티 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 6.
• textsms

[TS] 조건부 타입 (Conditional Types)

01조건부 타입 이란?조건부 타입은 어떤 조건이 참인지 거짓인지에 따라 다른 타입을 반환하는 기능입니다.type A = number extends string ? number : string; 여기서 number extends string은 거짓이니까, A의 타입은 string이 됩니다 💡 예제: 객체 타입 비교객체 타입에서도 동일한 원리가 적용됩니다.type ObjA = { a: number };type ObjB = { a: number; b: number };type B = ObjB extends ObjA ? number : string;ObjB는 ObjA를 포함하는 상위 타입이므로, B의 타입은 number가 됩니다.02제네릭 조건부 타입제네릭을 활용하면 타입을 유동적으로 설정할 수 있습니다!ty..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 5.
• textsms

[TS] 타입 조작하기

01타입 조작 (Type Manipulation)이란?타입 조작(Type Manipulation)은 기존에 정의된 타입을 변형하거나 조합하여 더 유연하게 활용하는 기술입니다. 예를 들어:특정 객체 타입에서 일부 속성만 추출하기기존 타입을 선택적(optional) 속성으로 변환하기문자열 조합을 활용한 새로운 타입 만들기타입스크립트에서 지원하는 주요 타입 조작 기능은 다음과 같습니다.인덱스드 액세스 타입 – 객체, 배열, 튜플에서 특정 요소의 타입만 추출하기Keyof 타입 – 객체의 키 값을 유니온 타입으로 변환하기맵드 타입 – 기존 타입을 기반으로 새로운 타입 생성하기템플릿 리터럴 타입 – 문자열 리터럴을 조합하여 새로운 타입 생성하기02인덱스드 액세스 타입 (Indexed Access Type)인덱스드 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 4.
• textsms

[TS] 제네릭 (Generics)

01제네릭이란?제네릭은 간단하게 "함수나 클래스, 객체 등이 다양한 타입을 처리할 수 있도록 도와주는 도구"라고 할 수 있습니다. 예를 들어, 우리가 숫자나 문자를 다루는 함수가 필요할 때, 각기 다른 타입을 처리하려면, 그때마다 함수를 따로 만들어야 할 수도 있죠. 그런데 제네릭을 사용하면, 한 번만 작성한 함수로 다양한 타입을 처리할 수 있게 됩니다. 1. 제네릭이 필요한 이유예를 들어, 우리가 받은 값에 대해 그 값을 그대로 반환하는 함수가 있다고 생각해 볼게요.처음에는 이런 방식으로 작성할 수 있죠:function func(value) { return value;}이 함수는 어떤 타입이든 받을 수 있지만, 타입스크립트에서 any나 unknown을 사용하게 되면 그 타입이 추론되지 않아서 문제가 ..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 3.
• textsms

[TS] 클래스 (class)

01자바스크립트의 클래스자바스크립트에서 클래스는 객체를 쉽게 만들 수 있도록 도와주는 템플릿 같은 것이죠. 예를 들어, 여러 명의 학생을 관리한다고 할 때, 학생들의 이름, 나이, 성적 등을 매번 하나씩 쓰는 대신에 클래스를 사용하면 학생을 만드는 틀(템플릿)을 만들고, 그 틀을 바탕으로 여러 명의 학생 객체를 만들 수 있어요.1. 클래스 선언클래스는 객체의 틀을 정의하는 것입니다. 클래스 선언은 class 키워드로 시작합니다.class Student { // 클래스의 내용} 2. 필드 (프로퍼티) 선언클래스 안에서 객체가 가질 속성들을 정의할 수 있습니다.class Student { name; age; grade;} 3. 생성자생성자는 객체를 만들 때 사용되는 특수한 메서드입니다. 객체의 프로퍼..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 3. 1.
• textsms

[TS] 인터페이스 (Interface)

01인터페이스 (Interface)인터페이스는 타입을 정의할 때 사용하는 문법 중 하나이며, 타입 별칭과 비슷한 기능을 합니다.하지만 인터페이스는 상속이나 합침 같은 특수한 기능을 제공합니다.1. 선택적 프로퍼티인터페이스에서는 ?를 사용하여 선택적 프로퍼티,즉 해당 프로퍼티가 있어도 되고, 없어도 되는 경우를 정의할 수 있습니다.interface Person { name: string; age?: number; // age는 선택적 프로퍼티}const person1: Person = { name: "John" }; // age가 없어도 됨const person2: Person = { name: "Jane", age: 25 }; // age가 있어도 됨 2. 읽기 전용 프로퍼티readonly 키워드를..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 28.
• textsms

[TS] 함수와 타입

01함수 타입 정의타입스크립트에서 함수 타입을 정의하려면 함수가 받는 매개변수의 타입과 반환값의 타입을 정의해 주면 돼요. 예를 들어, 두 개의 숫자를 더하는 함수는 다음처럼 정의할 수 있어요.여기서 반환값의 타입은 명시적으로 직접 지정해주거나 타입스크립트가 자동으로 추론해서 number로 지정해 줍니다.function add(a: number, b: number) { return a + b;}const add = (a: number, b: number): number => a + b;   ✅ 기본값함수의 매개변수에 기본값을 설정할 수 있어요. 기본값을 설정하면, 인자가 주어지지 않았을 때 기본값이 사용돼요.function greet(name: string = "Guest") { console.log..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 27.
• textsms

[TS] 타입 시스템

01객체 타입 호환성 (Object Type Compatibility)객체 타입 호환성은 간단히 말해서, 두 객체가 비슷한 구조일 때 서로 바꿔 사용할 수 있다는 개념입니다.객체의 속성 이름과 타입이 같으면, 두 객체를 서로 호환된다고 보는 거죠. 예를 들어, name과 price 속성이 있는 객체가 있다면, 이 두 객체는 서로 호환된다고 판단합니다.객체의 구조가 맞다면 타입이 맞다고 간주되기 때문에, 쉽게 값을 교환할 수 있게 되죠.type Book { name: string; price: number;}let myBook: Book = { name: "Learning TypeScript", price: 30000, author: "John Doe" // Error: 타입에 정의되지 않은 속..

• format_list_bulleted DEVELOPMENT/Typescript
• · 2025. 2. 26.
• textsms