전체 글(82)
-
타입스크립트 조건부 타입
타입스크립트 조건부 타입 (Conditional Types)조건부 타입은 삼항 연산자와 비슷한 문법으로 타입을 조건에 따라 다르게 정의할 수 있는 기능이다. 다음과 같은 형태를 가진다.T extends U ? X : Y위 표현은 "T가 U에 할당 가능하면 X, 그렇지 않으면 Y"라는 의미이다.예제: 기본 조건부 타입type IsString = T extends string ? "Yes" : "No";type A = IsString; // "Yes"type B = IsString; // "No"이 예제에서 IsString 타입은 주어진 타입이 문자열이면 "Yes"를, 아니면 "No"를 반환한다.분산적인 조건부 타입 (Distributive Conditional Types)유니언 타입에 조건부 타입을 적용하..
2025.06.12 -
에러처리
export async function fetchPlaces() { const res = await fetch(`http://localhost:3000/places`); console.log(res); if (!res.ok) { throw new Error("에러가 발생했습니다."); } const data = await res.json(); return data.places;} 패치 후 res 값을 확인 시 Response { status: 200, statusText: 'OK', headers: Headers { 'x-powered-by': 'Express', 'access-control-allow-origin': '*', 'access-control-allow..
2025.06.12 -
타입스크립트 타입좁히기 / 타입가드
타입좁히기 (Type Narrowing)타입 내로잉이란, 조건문 등을 활용하여 넓은 타입에서 좁은 타입으로 범위를 좁히는 것을 의미한다. value의 타입이 string | number | boolean인 경우, 각각에 대해 적절히 처리되도록 타입 좁히기function handleValue(value: string | number | boolean) { // string이면 문자열 길이, if(typeof value ==="string"){ return value.length // number면 10을 더한 값 }else if(typeof value ==="number") { return value +10 // boolean이면 반전된 값을 리턴 }else if(typeof val..
2025.06.10 -
타입스크립트 타입단언( Type Assertion )
타입스크립트에서 타입 단언(Type Assertion)은 컴파일러에게 "이 값의 타입을 내가 더 잘 안다"고 명시적으로 알려주는 방법이다. 타입 단언은 타입스크립트의 타입 시스템을 우회하거나, 점진적으로 타입을 적용할 때 유용하게 사용할 수 있다. 하지만 타입 단언의 남용은 런타임 오류로 이어질 수 있으니, 꼭 필요한 경우에만 사용하는 것이 좋다 형식이 맞지 않을 경우Student 라는 타입을 만들어서 student 라는 객체의 타입을 지정을 했다.그리고 객체를 만들고 나중에 속성을 정의 하기 위해 빈 객체를 대입하게 되면 타입오류가 발생한다. 그렇다고 타입 지정을 안해버리면속성을 정의하기 위한 코드에서 오류가 발생한다. 이럴때 타입 단언을 적용하여 해결이 가능하다.type Student = { ..
2025.06.05 -
타입스크립트 튜플(tuple) / 열거형(enum)
튜플(tuple) 타입스크립트에서 튜플(tuple)은 고정된 크기를 가지는 배열로, 각 요소가 서로 다른 타입을 가질 수 있고, 요소의 순서가 매우 중요하다. 튜플 타입은 타입스크립트의 타입 시스템에서만 존재하며, 자바스크립트에는 없는 개념이다.1. 튜플의 특징고정된 개수의 요소를 가진다.각 요소마다 타입이 다를 수 있다.요소의 순서와 타입이 모두 일치해야 한다.자바스크립트에는 없고, 타입스크립트 타입 시스템에서만 동작한다.2. 튜플 기본 문법// 튜플 타입 선언let myTuple: [string, number, boolean];// 올바른 예시myTuple = ["hello", 15, false];// 잘못된 예시 (순서 오류)myTuple = ["hello", false, 15]; // 오류 발생/..
2025.06.05 -
인터페이스( Interfaces )
특정 객체가 어떤 프로퍼티와 메서드를 가져야 하는지 명확하게 제시해주고, 클래스나 객체가 따라야 할 계약(Contract) 역할을 한다. 구현 방법이 아닌 구조의 가이드라인을 제공하며, 확장 및 조합이 매우 용이하다.1. 인터페이스 기본 문법interface 키워드를 사용해 정의하며, 속성 이름과 타입을 명시한다. 여러 속성은 세미콜론으로 구분한다. 메서드도 타입과 함께 정의할 수 있다.interface User { id: number; name: string; isPremium: boolean; someMethod(): void;}객체에 인터페이스를 적용하려면 해당 구조를 반드시 따라야 한다.const userA: User = { id: 1, name: "bill", isPremium: f..
2025.06.05