![[TypeScript] TypeScript 공부일지: 인터페이스 선언 합치기 [6/14 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fuvtfo%2FbtsHZVB620W%2FAAAAAAAAAAAAAAAAAAAAAL5MM6rBp8cJ4DRLkjl8qdeywaX1-gbIuRdXSmLd3MuI%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DMwNts9bB1GyUd0P7Hrm8OVW6KB8%253D)
TypeScript 공부일지: 인터페이스 선언 합치기 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️인터페이스 선언 합치기/** * 선언 합침(선언 머지) (declaration merging) */// 예전에 타입 별칭을 똑같이 두번쓰면 오류 난다고 배움// interface는 타입 별칭과 달리 이름 똑같아도 오류 안남// 이유: 동일한 이름으로 선언된 interface는 결국 모두 합쳐짐 -> 이러한 현상을 선언 합침이라고 부름interface Person { name: string;}interface Person { // name: number; 동일한 프로퍼티를 중복정의하는데 타입을 다르게 정의하는 경우를 충돌이라함 (오류) name: string; ..
![[TypeScript] TypeScript 공부일지: 인터페이스 확장 [6/14 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fdewscr%2FbtsH0mZ8PSx%2FAAAAAAAAAAAAAAAAAAAAAG4k2dEt_kGv3Tf7kcYYprXYNTvmGME8j5WqkKrdBjCJ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D4WgJ4RLSCy%252BMMxJE6jg7vGUs9jU%253D)
TypeScript 공부일지: 인터페이스 확장 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️인터페이스 확장/** * 인터페이스 확장 * 타입 별칭은 없고 인터페이스에만 있는 특별한 기능 - 인터페이스 확장 */// name, age 프로퍼티가 4번중복 비효율적이고 메인 프로퍼티 바꾸면 서브 프로퍼티도 전부 바꿔줘야 함// 이럴때 인터페이스 확장을 사용함// 사용하는법// 1. 서브 프로퍼티에서 Animal 프로퍼티와 중복된 프로퍼티를 제거// 2. 중복되는 Animal 타입의 프로퍼티를 받아오면됨// 2-1 Dog 라는 이름 옆에 extends 적고 그 옆에 Animal을 적으면 됨 (extends: 확장하다)// 이렇게 extends를 이용해서 다른 interace..
![[TypeScript] TypeScript 공부일지: 인터페이스 [6/14 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbNmfKQ%2FbtsHYJivlXo%2FAAAAAAAAAAAAAAAAAAAAAIiWHmnp4X2SU_thKc9pRVRuOc44GrbluA_XIpwMKW5L%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DzF5clN4IQ9hjqUCOaD8Pmoz7r48%253D)
TypeScript 공부일지: 인터페이스 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️인터페이스/** * 인터페이스 * - 타입별칭과 동일하게 타입의 이름을 지어주는 문법임 * ex) * type = { * a: string; * b: number; * } 이거를 * interface A { * a: string; * b: number; * } 이렇게 바꿀 수 있음 * - 인터페이스라는 뜻은 상호간에 약속된 규칙을 뜻 함 * - 예를들어 이 객체는 이런 형태를 가져야해! 와 같은 일종의 약속 또는 규칙을 만들어 주는 문법이라고 생각 * - 그리고 인터페이스는 객체 타입을 정의하는데 특화된 문법임 * - 그렇기 때문에 타입별칭에서는 제공하지 않는 상속이나 ..
![[TypeScript] TypeScript 공부일지: 사용자 정의 타입가드 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkLxSo%2FbtsHYXAJutC%2FAAAAAAAAAAAAAAAAAAAAAL-ba5qr8qpW0JF39hLuNE7_DTTWUMuef9MABcSH3DHu%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Drz6yS%252FU4rLE6uEp9CG%252F7ErfRY1M%253D)
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] TypeScript 공부일지: 함수 오버로딩 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbRAMJl%2FbtsHZy1vbpV%2FAAAAAAAAAAAAAAAAAAAAAOkJhSf5uMEIIT-NbfLIYw74bLoZizlC3r-PuKUTFH1O%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dt0W2i1L8Pl9qGqaetswVfEbur3E%253D)
TypeScript 공부일지: 함수 오버로딩 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️함수 오버로딩/** * 함수 오버로딩 (JS에서는 지원 안하고 TS에서만 지원함) * - 함수를 매개변수의 개수나 타입에 따라서 여러가지 버전으로 만드는 문법 * - 하나의 함수 func * - 모든 매개변수의 타입 number * - ver1. 매개변수가 1개 -> 이 매개변수에 20을 곱한 값 출력 * - ver2. 매개변수가 3개 -> 이 매개변수를 다 더한 값을 출력 */// TS에서 함수 오버로딩을 구현하려면 첫번째로 할 게 있음// 이 함수에 어떤 버전들이 있는지 알려줘야 함// 구현부 없이 , 중괄호없이 그냥 계속 쓰면됨// 이렇게 구현부 없이 선언식만 쓴것을 -..
![[TypeScript] TypeScript 공부일지: 타입 호환성 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FLpkC3%2FbtsHZSSXGoa%2FAAAAAAAAAAAAAAAAAAAAAFSy9PD_LpQCWe-3Vd12npwa9H6ZW76uJ35ZzrAxHZ-D%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D8oVytph2NHqmjgDb3Zx5vfGqj8A%253D)
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] TypeScript 공부일지: 타입 표현식, 호출 시그니쳐 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcLCvH9%2FbtsHZ5ka7vU%2FAAAAAAAAAAAAAAAAAAAAAKCRXGkW1pj0I98M90CWA5Tnzmr2cRyyE1IV5a49rLYr%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3D6x4Pmn1CurV8WLNwgXgEZSsmiHs%253D)
TypeScript 공부일지: 타입 표현식, 호출 시그니쳐 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️함수 타입 표현식 (fuction type espression)/** * 함수 타입 표현식 (function type expression) */// 이렇게 마치 타입별칭을 이용해서 JS의 화살표 함수를 만들듯이 타입을 타입별칭으로 따로 정의를 할 수 있음// 타입별칭을 이용해 함수의 타입을 별도로 정의하는 문법을 - 함수 타입 표현식 이라 함// 인터넷에서는 이 문법을 호출 시그니쳐 or 함수 시그니쳐라고 부름// 엄밀히 말하면 공식 문서에서는 함수 타입 표현식이라고 부르고 있음type Operation = (a: number, b: number) => num..
![[TypeScript] TypeScript 공부일지: 함수 타입 정의 [6/12 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FOZrdi%2FbtsHZV9RseC%2FAAAAAAAAAAAAAAAAAAAAAPf8KryaA9iC7TDOoGODqHqIZ9Wq9jOuRmA7jpvZfvD2%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Di3R%252B7roj%252B7gQyp3e2QfLQvnZK%252F4%253D)
TypeScript 공부일지: 함수 타입 정의 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 /** * 함수 타입 정의 */// 함수를 설명하는 가장 좋은 방법// 어떤 매개변수를 받고, 어떤 결과값을 반환하는지 이야기// 어떤 [타입의] 매개변수를 받고, 어떤 [타입의] 결과를 반환하는지 이야기function func(a: number, b: number): number { // 리턴문의 타입은 어짜피 초기값을 기준으로 타입추론하기 때문에 없애도 상관없음 지금 상황에서는 return a + b;}/** * 화살표 함수의 타입을 정의하는 방법 */const add = (a: number, b: number): number => a + b;/** * 함수의 매개변수 ..
![[TypeScript] TypeScript 공부일지: 서로소 유니온 타입 [6/7 study]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FuaQyl%2FbtsHZxar6Zx%2FAAAAAAAAAAAAAAAAAAAAALalpk--1KK6w-m_AHLawulAO4xEQ7CwbZMw09_3tJN2%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3DPAYBfbsWui2CO0Dse03IJWPUkrM%253D)
TypeScript 공부일지: 서로소 유니온 타입 ❗️주의지극히 개인 공부한 내용을 올린 거기 때문에 이해하지 못할 수도 있음 ❗️서로소 유니온 타입이란? - 교집합이 없는 타입들로만 만든 유니온 타입을 말함 - ex) string, number는 교집합이 없음 수학에서는 이런 걸 서로소 집합 이라고 함 - string | number 이런걸 서로소 유니온 타입이라고 부름 /** * 서로소 유니온 타입 * 교집합이 없는 타입들로만 만든 유니온 타입을 말함 * ex) string, number는 교집합이 없음 수학에서는 이런 걸 서로소 집합 이라고 함 * string | number 이런걸 서로소 유니온 타입이라고 부름 */type Admin = { tag: "ADMIN"; name: string..