TypeScript 공부일지: 인터페이스 확장 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️인터페이스 확장/** * 인터페이스 확장 * 타입 별칭은 없고 인터페이스에만 있는 특별한 기능 - 인터페이스 확장 */// name, age 프로퍼티가 4번중복 비효율적이고 메인 프로퍼티 바꾸면 서브 프로퍼티도 전부 바꿔줘야 함// 이럴때 인터페이스 확장을 사용함// 사용하는법// 1. 서브 프로퍼티에서 Animal 프로퍼티와 중복된 프로퍼티를 제거// 2. 중복되는 Animal 타입의 프로퍼티를 받아오면됨// 2-1 Dog 라는 이름 옆에 extends 적고 그 옆에 Animal을 적으면 됨 (extends: 확장하다)// 이렇게 extends를 이용해서 다른 interace..

TypeScript 공부일지: 인터페이스    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️인터페이스/** * 인터페이스 * - 타입별칭과 동일하게 타입의 이름을 지어주는 문법임 * ex) * type = { * a: string; * b: number; * } 이거를 * interface A { * a: string; * b: number; * } 이렇게 바꿀 수 있음 * - 인터페이스라는 뜻은 상호간에 약속된 규칙을 뜻 함 * - 예를들어 이 객체는 이런 형태를 가져야해! 와 같은 일종의 약속 또는 규칙을 만들어 주는 문법이라고 생각 * - 그리고 인터페이스는 객체 타입을 정의하는데 특화된 문법임 * - 그렇기 때문에 타입별칭에서는 제공하지 않는 상속이나 ..

TypeScript 공부일지: 사용자 정의 타입가드   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️사용자 정의 타입가드/** * 사용자 정의 타입가드 */type Dog = { name: string; isBark: boolean;};type Cat = { name: string; isScratch: boolean;};type Animal = Dog | Cat;function isDog(animal: Animal): animal is Dog { // 원래 이건데 animal.isBark !== undefined; 타입이 잘안좁혀지므로 타입 단언하면됨 // 하지만 TS는 함수의 반환값을 가지고는 타입을 잘 좁혀주지 않음 // 이럴때는 함수 자체를 타입 ..

TypeScript 공부일지: 함수 오버로딩   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️함수 오버로딩/** * 함수 오버로딩 (JS에서는 지원 안하고 TS에서만 지원함) * - 함수를 매개변수의 개수나 타입에 따라서 여러가지 버전으로 만드는 문법 * - 하나의 함수 func * - 모든 매개변수의 타입 number * - ver1. 매개변수가 1개 -> 이 매개변수에 20을 곱한 값 출력 * - ver2. 매개변수가 3개 -> 이 매개변수를 다 더한 값을 출력 */// TS에서 함수 오버로딩을 구현하려면 첫번째로 할 게 있음// 이 함수에 어떤 버전들이 있는지 알려줘야 함// 구현부 없이 , 중괄호없이 그냥 계속 쓰면됨// 이렇게 구현부 없이 선언식만 쓴것을 -..

TypeScript 공부일지: 타입 호환성   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️함수 타입 호환성/** * 함수 타입의 호환성 * 특정 함수 타입을 다른 함수 타입으로 취급해도 괜찮은가를 판단하는 말 * 함수 타입 호환성을 판단할 때 체크리스트 2가지 (2가지 모두 만족해야 두 타입이 만족된다고 할 수 있음) * 1. 반환값의 타입이 호환되는지 * 2. 매개변수의 타입이 호환되는지 */// 기준1. 반환값의 타입이 호환되는지type A = () => number;type B = () => 10;let a: A = () => 10; // 반환값 number 타입let b: B = () => 10; // 반환값 number literal 타입a = b; // ..

TypeScript 공부일지: 타입 표현식, 호출 시그니쳐    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️함수 타입 표현식 (fuction type espression)/** * 함수 타입 표현식 (function type expression) */// 이렇게 마치 타입별칭을 이용해서 JS의 화살표 함수를 만들듯이 타입을 타입별칭으로 따로 정의를 할 수 있음// 타입별칭을 이용해 함수의 타입을 별도로 정의하는 문법을 - 함수 타입 표현식 이라 함// 인터넷에서는 이 문법을 호출 시그니쳐 or 함수 시그니쳐라고 부름// 엄밀히 말하면 공식 문서에서는 함수 타입 표현식이라고 부르고 있음type Operation = (a: number, b: number) => num..

TypeScript 공부일지: 함수 타입 정의    ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 /** * 함수 타입 정의 */// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기// 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과를 반환하는지 이야기function func(a: number, b: number): number { // 리턴문의 타입은 어짜피 초기값을 기준으로 타입추론하기 때문에 없애도 상관없음 지금 상황에서는 return a + b;}/** * 화살표 함수의 타입을 정의하는 방법 */const add = (a: number, b: number): number => a + b;/** * 함수의 매개변수 ..

TypeScript 공부일지: 서로소 유니온 타입   ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음  ❗️서로소 유니온 타입이란? - 교집합이 없는 타입들로만 만든 유니온 타입을 말함 - ex) string, number는 교집합이 없음 수학에서는 이런 걸 서로소 집합 이라고 함 - string | number 이런걸 서로소 유니온 타입이라고 부름 /** * 서로소 유니온 타입 * 교집합이 없는 타입들로만 만든 유니온 타입을 말함 * ex) string, number는 교집합이 없음 수학에서는 이런 걸 서로소 집합 이라고 함 * string | number 이런걸 서로소 유니온 타입이라고 부름 */type Admin = { tag: "ADMIN"; name: string..

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