MapleStory Finger Point
[TypeScript] 타입 좁히기 (Type Narrowing)
·
🟣 TypeScript
타입 좁히기는 조건문 등을 이용해 넓은 타입(유니온 타입 등)에서 더 구체적이고 좁은 타입으로 범위를 축소하는 과정을 말한다. 👉🏻 컴파일러에게 특정 코드 블록 내에서는 변수가 특정 타입임을 보장할 수 있다.이때 타입을 좁히기 위해 사용하는 조건식 표현(typeof, instanceof 등)을 타입 가드(Type Guard)라고 부른다.1. typeof 타입 가드자바스크립트의 기본 연산자인 typeof를 사용하여 원시 타입(Primitive Type)을 좁힐 때 주로 사용한다.function func(value: number | string) { // ❌ Error: value가 number인지 string인지 확신할 수 없음 // value.toFixed(); if (typeof value ..
[TypeScript] 타입 추론 (Type Inference)
·
🟣 TypeScript
타입스크립트는 변수에 명시적으로 타입을 정의하지 않아도,초기화된 값을 기준으로 타입을 자동으로 결정하는 타입 추론(Type Inference) 기능을 제공한다.이를 통해 모든 변수에 일일이 타입을 타이핑하는 번거로움을 줄일 수 있다.⚠️ 단, 함수의 매개변수처럼 추론할 근거가 없는 경우에는 추론이 불가능하며, strict 모드에서는 이를 에러로 간주할 수 있다.1. 타입 추론이 발생하는 경우타입스크립트는 다음과 같은 상황에서 문맥을 파악하여 타입을 자동으로 추론한다.1-1. 변수 초기화변수 선언과 동시에 값을 할당하면, 해당 값의 타입을 기준으로 추론한다.객체나 배열 같은 복잡한 구조도 문제없이 추론된다.let a = 10; // number로 추론let b = "hello"; // str..
[TypeScript] 대수 타입 (Algebraic Type)
·
🟣 TypeScript
대수 타입은 여러 개의 타입을 합성하여 만드는 새로운 타입을 의미한다.집합론의 개념을 차용하여 타입을 구성하며, 크게 합집합(Union) 타입과 교집합(Intersection) 타입으로 나뉜다.1. 합집합 - 유니온(Union) 타입유니온 타입은 | (버티컬 바) 기호를 사용하여 정의하며, 나열된 타입 중 하나라도 만족하면 되는 합집합의 개념을 갖는다.1-1. 기본 타입의 유니온변수에 다양한 타입의 값을 저장해야 할 때 사용한다. 타입의 개수에는 제한이 없다.// string 또는 number 또는 boolean 타입 허용let a: string | number | boolean;a = 1; // ✅ OKa = "hello"; // ✅ OKa = true; // ✅ OK1-2. 배열에서의..
[TypeScirpt] 타입 계층도와 함께 기본타입 살펴보기
·
🟣 TypeScript
타입스크립트의 모든 타입은 집합의 포함 관계(계층)를 가진다.이 계층 구조를 이해하면 unknown, never, void, any의 동작 방식을 논리적으로 파악할 수 있다.1. Unknown 타입 (전체 집합)unknown은 타입 계층도의 최상단에 위치한다. 집합으로 비유하면 모든 타입을 포함하는 전체 집합(Universal Set)이다.업캐스팅 (가능): 모든 타입은 전체 집합의 부분집합이므로, unknown 타입 변수에는 어떤 값이든 할당할 수 있다.let a: unknown = 1; // number -> unknownlet b: unknown = "hello"; // string -> unknownlet c: unknown = () => {}; // function -> un..
[TypeScript] 타입은 집합이다(업캐스팅, 다운캐스팅)
·
🟣 TypeScript
타입스크립트의 '타입'을 이해하는 가장 쉬운 방법은 이를 여러개의값을포함하는집합(Set)으로 바라보는 것이다.집합은 동일한 속성을 갖는 여러 요소를 하나의 그룹으로 묶은 단위다.1. 슈퍼타입과 서브타입집합의 포함 관계를 통해 타입 간의 부모-자식 관계를 정의할 수 있다.슈퍼타입 (Super Type / 부모 타입): 다른 타입을 포함하는 거대한 집합이다.예: number 타입 (모든 숫자의 집합)서브타입 (Sub Type / 자식 타입): 슈퍼타입에 포함되는 부분 집합이다.예: number literal 타입 (특정 숫자 하나만 포함하는 집합, 예: 20)숫자 20은 '20이라는 리터럴 타입'에 속하지만, 동시에 '숫자(Number) 타입'이라는 더 큰 집합에도 속한다.따라서 모든 Number Liter..
[TypeScript] Void와 Never 타입
·
🟣 TypeScript
이번에는 '값을 반환하지 않음'을 나타내는 두 가지 특수 타입, void와 never에 대해 알아본다.두 타입은 비슷해 보이지만, "종료가 되느냐, 안 되느냐"에 따라 명확한 차이가 있다.1. Void 타입void는 "아무런 값도 없음"을 의미하는 타입이다. 주로 값을 반환하지 않는 함수의 반환 타입으로 사용된다.1.1. 함수에서의 사용함수가 명시적인 return 문을 가지지 않거나, return;으로 종료될 때 사용한다. 실제로 자바스크립트 함수는 반환값이 없으면 암묵적으로 undefined를 반환하지만, 타입스크립트에서 "이 함수의 반환값은 사용하지 않는다"는 의도를 표현할 때 void를 쓴다.function func2(): void { console.log("hello"); // 명시적인 ret..
[TypeScript] Any와 Unknown 타입
·
🟣 TypeScript
Any와 Unknown 타입타입스크립트는 모든 변수의 타입을 엄격하게 관리하지만,개발 과정에서 불가피하게 타입을 알 수 없거나 유연한 처리가 필요한 상황이 발생한다.이때 사용하는 것이 any와 unknown이다.Any 타입any는 타입스크립트의 모든 타입 검사를 무력화하는 치트키(Cheat Key) 같은 타입이다. 특정 변수의 타입을 우리가 확실히 모를때 사용한다. (any: 어떤 타입이든지 가능!) 특징모든 값 허용: 숫자, 문자열, 불리언 등 어떤 타입의 값이라도 할당할 수 있다.모든 연산 허용: 타입 검사를 받지 않으므로, 메서드 호출이나 연산 등 모든 동작이 허용된다.모든 곳에 할당 가능: any 타입의 값은 다른 어떤 타입의 변수에도 할당할 수 있다.let anyVar: any = 10;anyV..
[TypeScript] 타입 별칭 (Type Alias)과 인덱스 시그니쳐 (Index Signature)
·
🟣 TypeScript
타입 별칭 (Type Alias)타입 별칭은 변수를 선언하듯 타입에 이름을 붙여 별도로 정의하는 문법이다.복잡한 타입을 매번 작성할 필요 없이, 이름을 통해 쉽게 재사용할 수 있어 코드의 가독성과 유지보수성이 높아진다. 👍🏻정의 및 사용법type 키워드를 사용해 정의한다.// 타입 별칭 정의type User = { id: number; name: string; nickname: string; birth: string; bio: string; location: string;};// 타입 별칭 사용let user1: User = { id: 1, name: "이정환", nickname: "winterlood", birth: "1997.01.07", bio: "안녕하세요", locati..
[TypeScript] 객체(Object)
·
🟣 TypeScript
object 타입의 한계object는 단순히 해당 변수가 "객체임"을 명시하는 타입이다.let user: object = { id: 1, name: "이정환",};// ❌ Error: 'object' 형식에 'id' 속성이 없습니다.// user.id;위 코드에서 user는 객체로 잘 정의되었지만, user.id에 접근하려 하면 에러가 발생한다. → object 타입이 객체의 내부 구조(프로퍼티 정보)에 대한 정보는 전혀 가지고 있지 않기 때문이다.따라서 실무에서는 거의 사용되지 않는다. 객체 리터럴 타입 (Object Literal Type)객체의 구조를 정확히 반영하기 위해서는 객체 리터럴 타입을 사용해야 한다. 중괄호 {}를 열고 객체가 가진 프로퍼티와 그 타입을 직접 나열하는 방식이다.let ..