[TypeScript] TypeScript 공부일지: 타입 좁히기 [6/7 study]
Frontend/TypeScript2024. 6. 7. 16:15[TypeScript] TypeScript 공부일지: 타입 좁히기 [6/7 study]

TypeScript 공부일지: 타입 좁히기    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 좁히기 조건문 등을 이용해 넓은타입에서 좁은타입으로 타입을 상황에 따라 좁히는 방법을 이야기 /** * 타입 좁히기 * 조건문 등을 이용해 넓은타입에서 좁은타입으로 * 타입을 상황에 따라 좁히는 방법을 이야기 */// value => number : toFixed// value => string : toUpperCasefunction func(value: number | string) { // 마치 아래의 조건문이 number타입 값 이외에는 중괄호 내부로 들어갈 수 없도록 가드한다고해서 // TS에서는 타입 가드(Type Guard)라고 부름 if (typeof v..

[TypeScript] TypeScript 공부일지: 타입 단언 [6/7 study]
Frontend/TypeScript2024. 6. 7. 16:11[TypeScript] TypeScript 공부일지: 타입 단언 [6/7 study]

TypeScript 공부일지: 타입 단언  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 단언/** * 타입 단언 */type Person = { name: string; age: number;};// 아래와 같이하면 Person 타입이 지금 초기화 값인 빈 객체를 기준 값으로 추론되어 버리기 때문에// person 변수의 타입이 그냥 빈 객체로 추론되어 버림// 그래서 name 과 age 프로퍼티가 없다는 경고가 나옴// let person = {};// person.name = "이정환";// person.age = 27;// 이렇게 우리 의도와 다르게 변수의 타입이 추론 되어버리기 때문에// 원하는 기능을 만들기 어려울때는 초기화 값의 타입을 단언 해주면 ..

[TypeScript] TypeScript 공부일지: 타입 추론 [6/7 study]
Frontend/TypeScript2024. 6. 7. 16:09[TypeScript] TypeScript 공부일지: 타입 추론 [6/7 study]

TypeScript 공부일지: 타입 추론  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 추론이란? - 변수의 초기값을 가지고 타입 추론을 한다. - 함수의 반환값 타입을 추론할 때는 초기화하는 값이 아니라 리턴문 다음에 오는 반환값을 가지고 추론한다. - 만약에 매개변수에 기본값이 설정되어 있다면 기본값이 설정된 매개변수의 타입도 기본값을 기준으로 타입을 추론한다. - 딱봐도 우리가 봐도 타입이 추론되면 당연히 TS도 타입 추론 똑같이 함 /** * 타입 추론 * - 변수의 초기값을 가지고 타입 추론을 한다. * - 함수의 반환값 타입을 추론할 때는 초기화하는 값이 아니라 리턴문 다음에 오는 반환값을 가지고 추론한다. * - 만약에 매개변수에 기본값이 설정되어 있..

[TypeScript] TypeScript 공부일지: 대수 타입 [6/7 study]
Frontend/TypeScript2024. 6. 7. 16:05[TypeScript] TypeScript 공부일지: 대수 타입 [6/7 study]

TypeScript 공부일지: 대수 타입  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️대수 타입이란?- 여러개의 타입을 합성해서 새롭게 만들어낸 타입 - 합집합, 교집합 타입이 존재함 /** * 1. 합집합 타입(Union 타입) */let a: string | number | boolean;a = "hello";a = 1;a = true;let arr: (number | string | boolean)[] = [1, "hello", true];type Dog = { name: string; color: string;};type Person = { name: string; language: string;};type Union1 = Dog | Person;let..

[TypeScript] TypeScript 공부일지: 타입 호환성 예시 [6/4 study]
Frontend/TypeScript2024. 6. 4. 12:29[TypeScript] TypeScript 공부일지: 타입 호환성 예시 [6/4 study]

TypeScript 공부일지: 타입 호환성 예시  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️타입 호환성 예시// 객체 타입의 호환성/** * 기본타입간의 호환성 */let num1: number = 10;let num2: 10 = 10;num1 = num2;/** * 객체 타입간의 호환성 * -> 어떤 객체타입을 다른 객체타입으로 취급해도 괜찮은가? */type Animal = { name: string; color: string;};type Dog = { name: string; color: string; breed: string;};let animal: Animal = { name: "기린", color: "yellow",};let dog: Dog ..

[TypeScript] TypeScript 공부일지: 계층도 살피기 [6/4 study]
Frontend/TypeScript2024. 6. 4. 12:26[TypeScript] TypeScript 공부일지: 계층도 살피기 [6/4 study]

TypeScript 공부일지: 계층도 살피기 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️계층도 살피기/** * Unknown 타입 - 모든 */function unknownExam() { let a: unknown = 1; // Up Cast로 가능, 반대로 Down Cast는 불가능 let b: unknown = "hello"; let c: unknown = true; let d: unknown = null; let e: unknown = undefined; let unknownVar: unknown; // let num: number = unknownVar; // let str: string = unknownVar; // let bool: bool..

[TypeScript] TypeScript 공부일지: 타입 호환성 [6/4 study]
Frontend/TypeScript2024. 6. 4. 12:23[TypeScript] TypeScript 공부일지: 타입 호환성 [6/4 study]

TypeScript 공부일지: 타입 호환성  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️타입 호환성// 타입은 집합이다// 타입호환성 - 어떤 타입을 다른 타입으로 취급해도 괜찮은지 판단하는 것// ex) number type --->(x) number literal type// number type

[TypeScript] TypeScript 공부일지: void, never [6/4 study]
Frontend/TypeScript2024. 6. 4. 12:21[TypeScript] TypeScript 공부일지: void, never [6/4 study]

TypeScript 공부일지: void, never  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️voidvoid -> 공허 -> 아무것도 없다.void -> 아무것도 없음을 의미하는 타입// 리턴값 타입 지정 가능function func1(): string { return "hello";}function func2() { console.log("hello");}let a: void;// a = 1;// a = "hello";a = undefined; ❗️nevernever -> 존재하지 않는불가능한 타입// while (true) {}

[TypeScript] TypeScript 공부일지: any, unknown [6/4 study]
Frontend/TypeScript2024. 6. 4. 12:18[TypeScript] TypeScript 공부일지: any, unknown [6/4 study]

TypeScript 공부일지: any, unknown  ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음❗️any특정 변수의 타입을 우리가 확실히 모를때 사용let anyVar: any = 10;anyVar = "hello";JS처럼 타입 상관없이 아무 값이나 담게 하려면 any type 사용anyVar = true;anyVar = {};anyVar = () => {};anyVar.toUpperCase();anyVar.toFixed();let num: number = 10;num = anyVar; ❗️unknownlet unknownVar: unknown;unknownVar = "";unknownVar = 1;unknownVar = () => {};num = unknownVa..

image