참치코더의 꿈 메모장

함수 타입 TypeScript에서 함수 타입은 함수가 입력으로 받는 매개변수와 반환값의 타입을 명시하는 것이다. ex)function add(a: number, b: number): number{ return a + b;} 함수 타입 선언 방법 1. 함수 선언 시 타입 명시 function greet(name: string): string { return `Hello, ${name}`;} - 매개변수 타입과 반환값 타입을 바로 함수에 붙인다. 2. 변수에 함수 타입 지정 let add: (x: number, y: number) => number; add = (a, b) => a + b; - 변수에 이 타입을 지정하면, 타입에 맞는 함수만 할당 가능하다.- JS의 콜백 함수 타입을 지정할 때 유..

여러 형태로 구성된 타입을 하나의 큰 유니언 타입으로 묶되, 내부적으로 구분을 통해 정확하게 좁히는 패턴을 말한다. 서로소 유니언의 특징 1. 공통된 식별자 키가 있다.2. 각 타입은 그 식별자에 서로 다른 값을 가지며 여러 타입이 유니언으로 묶여 있다.3. switch문에서 자동으로 타입을 좁힌다.4. 특정 키를 검사하는 순간 타입을 정확하게 추론한다.5. 조건문 기반 Narrowing이 매우 직관적이다.6. 실수 발생 가능성이 적으며 컴파일러의 보호를 받는다. type Shape = {kind: "circle"; radius: number} | {kind: "square"; size: number} | {kind: "tri..

타입 좁히기는 값의 타입을 더 구체적으로 추론하도록 만드는 과정이다.예를 들어, String / number 처럼 유니온 타입일때, 실제 실행 흐름에서 타입을 점점 특정 타입으로 좁혀 나가는 방식이다. typeof (타입 가드) - 기본적인 타입 좁히기 방식이다. function print(value: string | number) { if(typeof value === "string"){ console.log(value.toUpperCase()); } else { console.log(value.toFixed(2)); }} - typeof 타입가드는 원시타입에 많이 사용된다. in (타입 가드) - 객체의 속성 존재 여부로 타입을 좁히는 방식이다. type Dog = { ba..

개발자가 직접 타입스크립트 컴파일러에게 타입을 지정해주는 것이다.그럼 타입스크립트 컴파일러는 아 개발자가 나보다 더 똑똑하니까 이게 답이구나! 라고 믿게 해주는 것이다.단언은 당하는 타입이 가하는 타입의 슈퍼타입이거나 서브타입이어야만 해당 기능을 사용할 수 있다.(동등한 레벨의 타입이라면 오류가 발생한다.) const value: any = "hello";const length = (value as string).length; - 컴파일러는 value의 타입이 any라서 아무것도 모른다.- 하지만 개발자는 이것이 문자열임을 알고 있기 때문에, 직접 타입을 알려주는 것이다. 왜 타입 단언이 필요할까? 1. DOM 조작 시 const e1 = document.querySelector("#title") as ..

TypeScript 대수타입 - 대수타입은 수학적 조합 관점에서 타입을 설명하는 방법이고, 크게 합 타입(UNION) 과 곱 타입 (Intersection)으로 구성된다. 합 타입 (Union Type) - 여러 개 중 하나일 수 있는 타입 특징- 상태가 여러 가지 중 하나만 가능할 때 사용- 프론트엔드에서 API 상태 관리, 폼 상태 표현 등에 많이 쓰임- 협소한 타입으로 구성해서 런타임 오류를 줄이기 좋다. 123456789type ResponseData = string | null; function printData(data: ResponseData) { if(data === null) { console.log('No data'); } else { consol..

타입 호환성 표 참조 .....! https://www.typescriptlang.org/ko/docs/handbook/type-compatibility.html Documentation - Type CompatibilityHow type-checking works in TypeScriptwww.typescriptlang.org - 타입스크립트는 구조적 타이핑(Structural Typing)을 기반으로 하기 때문에 형태(구조)가 같거나 더 많은 속성을 가지고 있으면, 호환 가능하다는 규칙을 가진다. 기본 타입(Type) 호환성 1. 더 넓은 타입 -> 더 좁은 타입 (슈퍼 타입이 서브타입에 들어가는것) 은 호환이 불가능하다 2. 더 좁은 타입 -> 더 넓은 타입 (서브 타입이 슈퍼타입에 들어가는 ..

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081// 타입 별칭// 일일이 유저별로 type을 지정하면 몇 백개씩 지정해야 하므로 // type을 사용하면 해당 타입을 따로 지정해서 타입을 사용할 수 있다. type User = { id: number, name: string, nickname: string, bio: string; location?: string;}; let user1: User = { id: 1, name: "홍길동", ..

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667//numberlet num1: number = 123;let num2: number = -123;let num3: number = 0.123;let num4: number = -0.123;let num5: number = Infinity;let num7: number = NaN; //stringlet str1: string = "hello";let str2: string = 'hello';let str3: string = `hello`;let str4: string = `hello ..