TypeScript

TypeScript 유틸리티 타입

유틸리티 타입 소개유틸리티 타입은 타입스크립트에서 기본 제공되는 타입 변형 도구입니다. 이러한 타입을 사용하면 기존 타입을 바탕으로 새로운 타입을 쉽게 정의할 수 있으며, 특정 속성을 선택, 제거, 필수화하거나 옵션으로 변경하는 등 다양한 변형을 수행할 수 있습니다. 주요 유틸리티 타입은 Partial, Required, Readonly, Record, Pick, Omit, Exclude, Extract, ReturnType 등이 있습니다.1. Partial, Required, ReadonlyPartial기능: 객체 타입의 모든 속성을 **옵션(optional)**으로 변경합니다.예시:type Person = { name: string; age: number };type PartialPerson = Pa..

2024. 11. 3. 05:52

TypeScript

TypeScript 조건부 타입

조건부 타입과 제네릭 조건부 타입은 타입스크립트에서 강력한 기능으로, 조건에 따라 다른 타입을 적용할 수 있게 해줍니다. 이 기능을 이해하면 타입의 유연성을 활용하여 코드의 안정성과 재사용성을 높일 수 있습니다. 조건부 타입을 실용적으로 어떻게 사용할 수 있는지 하나씩 살펴보겠습니다.1. 기본 조건부 타입조건부 타입은 **extends**와 삼항 연산자를 사용하여 조건에 따라 타입을 결정하는 방식입니다.type A = number extends string ? number : string;위 코드에서 A 타입은 number extends string 조건이 거짓이기 때문에 string 타입이 됩니다. 조건이 참이라면 number 타입이 되었겠지만, **number**는 **string**의 서브타입이 아..

2024. 11. 3. 03:59

TypeScript

TypeScript 타입조작하기

1. 인덱스드 엑세스 타입 (Indexed Access Type)인덱스드 엑세스 타입은 특정 객체 타입에서 필드의 타입을 참조할 때 사용됩니다. 배열이나 객체의 특정 속성에 접근하여 그 타입을 추출하는 방식입니다.type Person = { name: string; age: number; address: { city: string; zipcode: number; };};// Person 타입에서 address 필드의 타입을 가져옴type Address = Person["address"];// Address 타입은 { city: string; zipcode: number; }// 특정 필드에 접근하여 타입을 가져오기type City = Person["address"]["city"];// ..

2024. 11. 2. 00:41

TypeScript

TypeScript 제네릭2

제네릭 인터페이스, 타입 별칭, 그리고 활용 예시**제네릭(Generic)**은 타입을 일반화하여 여러 타입에 대해 유연하게 작동할 수 있는 코드를 작성하는 강력한 도구입니다. 이를 인터페이스, 타입 별칭, 그리고 실용적인 예시에 적용해 봅시다.1. 제네릭 인터페이스제네릭 인터페이스는 특정 인터페이스가 여러 타입을 받을 수 있도록 만들어 주는 기능입니다. 예를 들어, **KeyPair**라는 제네릭 인터페이스를 정의하여 키와 값을 서로 다른 타입으로 설정할 수 있습니다.interface KeyPair { key: K; value: V;}여기서 **K**와 **V**는 각각 key와 value의 타입을 정의하는 타입 변수입니다.사용 예:let keyPair: KeyPair = { key: "key",..

2024. 10. 29. 21:50

TypeScript

TypeScript 제네릭1

제네릭(Generic)이란?제네릭은 타입스크립트에서 함수, 클래스, 인터페이스, 타입 등을 다양한 타입과 함께 동작하도록 만드는 기능입니다. 즉, 특정 타입에 종속되지 않고, 여러 타입에 대해 범용적으로 동작할 수 있는 코드를 작성하는 것을 목표로 합니다.제네릭이 필요한 상황함수에서 다양한 타입의 매개변수를 받아 그대로 반환하는 경우를 예로 들어 설명할 수 있습니다.function func(value: any) { return value;}let num = func(10);let str = func("string");위 코드에서는 매개변수 value의 타입을 **any**로 설정했습니다. 이로 인해 함수 func가 어떤 타입을 받든 받아들일 수 있습니다.그러나 num과 str 모두 any 타입으로 추론..

2024. 10. 29. 21:40

TypeScript

TypeScript 인터페이스로 구현하는 클래스

1. 인터페이스의 역할인터페이스는 타입스크립트에서 클래스의 설계도 역할을 합니다. 인터페이스는 클래스가 가져야 할 **속성(필드)**과 메서드를 정의하여 클래스가 이 규칙을 따르게 합니다. 이렇게 하면 코드의 일관성을 유지하고, 클래스들이 특정 구조를 준수하도록 강제할 수 있습니다.2. 인터페이스와 클래스의 관계타입스크립트에서 클래스가 인터페이스를 "구현"하는 것을 implements 키워드를 사용해 표현합니다. **implements**는 클래스가 해당 인터페이스에서 정의된 모든 속성과 메서드를 구현해야 한다는 의미입니다. 만약 클래스가 인터페이스에서 정의한 내용들을 구현하지 않으면, 컴파일 시 오류가 발생합니다. 이렇게 강제함으로써 타입 안정성을 보장할 수 있습니다.예제를 통해 더 자세히 보겠습니다...

2024. 10. 29. 17:30

TypeScript

TypeScript 클래스

자바스크립트의 클래스자바스크립트에서 클래스는 동일한 형태의 객체를 더 쉽게 생성하기 위한 문법입니다. 클래스는 객체의 **틀(템플릿)**로 작용하여, 반복적인 객체 생성 과정을 효율적으로 처리합니다.자바스크립트의 클래스 주요 개념클래스 선언class ClassName {} 형태로 선언합니다.클래스는 객체를 생성하는 템플릿과 같으며, 생성된 객체는 인스턴스입니다.필드와 생성자필드: 객체가 가지는 프로퍼티를 선언합니다.생성자(Constructor): constructor 메서드를 사용하여 필드를 초기화하고 객체를 생성합니다. 생성자는 클래스가 호출될 때 자동으로 실행됩니다.class Student { name; age; grade; constructor(name, age, grade) { thi..

2024. 10. 29. 17:26

TypeScript

JavaScript this정리

this는 자바스크립트에서 매우 중요한 키워드이지만, 상황에 따라 그 의미가 달라질 수 있기 때문에 많은 개발자들이 처음에 혼란을 겪곤 합니다. this는 코드에서 현재 실행되는 컨텍스트(context)나 객체를 참조하는 역할을 합니다. 즉, this가 가리키는 대상은 코드가 어떻게 호출되었는지에 따라 결정됩니다.자세히 설명해 볼게요.기본적인 this의 동작 방식this는 보통 함수나 메서드가 호출된 객체를 참조합니다. 그러나 이 참조 대상은 함수의 호출 방식이나 선언된 위치에 따라 달라질 수 있습니다. 대표적으로 자바스크립트에서 this가 어떻게 동작하는지를 다양한 케이스를 통해 설명하겠습니다.1. 클래스에서의 this클래스에서 this는 현재 인스턴스 객체를 가리킵니다. 이를 통해 클래스 내부에서 생..

2024. 10. 29. 06:28

TypeScript

자바스크립트, 타입스크립트 스코프,호이스팅

자바스크립트와 타입스크립트의 스코프는 크게 세 가지로 나눌 수 있습니다:전역 스코프 (Global Scope)함수 스코프 (Function Scope)블록 스코프 (Block Scope)다음은 각 스코프와 var, let, const의 차이를 설명해드릴게요.1. var, let, const와 스코프의 차이**var**는 함수 스코프를 가집니다. 이는 var로 선언된 변수는 해당 함수 내에서만 유효하며, 블록({}) 단위로 나뉘지 않습니다. 따라서, 반복문이나 조건문 같은 블록 내에서 선언된 var 변수는 해당 블록 바깥에서도 접근할 수 있게 됩니다.function example() { if (true) { var x = 10; // 함수 스코프 } console.log(x); // 10 }**let**과..

2024. 10. 29. 06:04

TypeScript

TypeScript 인터페이스

1. 인터페이스란?인터페이스는 객체의 타입을 정의할 때 사용되는 타입스크립트의 기능입니다. 인터페이스는 타입 별칭(type)과 비슷하게 특정 타입 구조를 정의하지만, 객체의 형태를 좀 더 명확하게 표현할 수 있다는 특징이 있습니다. 다음은 간단한 예시입니다:interface Person { name: string; age: number;}위와 같이 정의한 Person 인터페이스는 객체의 타입을 정의하는 데 사용됩니다:const person: Person = { name: "이정환", age: 27};인터페이스는 타입 별칭과 기능이 유사하지만, 주로 객체의 구조를 명확하게 기술할 때 많이 사용됩니다.2. 선택적 프로퍼티(Optional Property)인터페이스의 프로퍼티는 선택적으로 설정할 수도 ..

2024. 10. 29. 05:06

TypeScript

TypeScript 정리3 (함수와 타입)

함수의 타입 정의함수 타입 정의: 함수의 매개변수와 반환값에 타입을 지정하여 함수의 동작을 명확히 설명할 수 있습니다.function add(a: number, b: number): number { return a + b; }화살표 함수: 화살표 함수도 매개변수와 반환값에 타입을 지정할 수 있습니다.const add = (a: number, b: number): number => a + b;선택적 매개변수: 매개변수 뒤에 **?**를 붙이면 선택적으로 값을 받을 수 있으며, 해당 매개변수는 **undefined**와 유니온 타입으로 추론됩니다.function introduce(name = "이정환", tall?: number) { console.log(`name: ${name}`); if (typeof ..

2024. 10. 25. 07:39

TypeScript

TypeScript 정리2 (이해하기)

1. object 타입 정의의 문제점자바스크립트에서 객체는 자유롭게 다양한 프로퍼티를 가질 수 있고, 타입스크립트에서도 object 타입을 사용할 수 있습니다. 하지만 object 타입은 객체임을 표현하는 것 외에 객체의 프로퍼티에 대한 정보를 제공하지 않는 타입입니다.예시:let user: object = { id: 1, name: "김수현",};// user.id; // 오류 발생: 'object' 타입에는 'id' 프로퍼티가 없습니다이 경우 user 변수를 object 타입으로 정의했지만, **id**와 같은 특정 프로퍼티에 접근하려고 하면 오류가 발생합니다. 이는 object 타입이 객체의 구조에 대한 정보가 없기 때문입니다.2. 객체 리터럴 타입으로 타입 정의하기객체의 구조를 명확하게 타입..

2024. 10. 25. 07:38