Front-End 16

타입스크립트[TypeScript] | 인터페이스 vs Type alias

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 인터페이스 인터페이스는 객체의 구조(형태)를 설명한다. 타입을 작성하고 값을 할당하려고 하면 인터페이스는 이니셜라이져를 사용할 수 없다는 에러메시지가 뜬다. 이를 통해 인터페이스는 구체적인 값이 있는 구조가 아니라, 객체의 구조를 정의하는 것이라고 할 수 있다. 타입 별칭 vs 인터페이스 1) 기본 구조 // 타입 별칭 type Sushi = { calories: number salty: boolean tasty: boolean } // 인터페이스 interface Sushi { calories: number salty: boolean tas..

타입스크립트[TypeScript] | 4장 연습 문제

1. TypeScript가 추론하는 함수의 타입 시그니처 부분은 무엇입니까? 매개변수, 반환 유형 또는 둘 다? 반환 유형을 추론한다. 함수가 콜백함수여서 TS 컨텍스트에서 추론할 수 있는 경우엔 매개변수의 유형을 추론하기도 한다. 2. 자바스크립트의 인수 객체는 타입에 안전한가요? 그렇지 않다면 무엇을 대신 사용할 수 있습니까? 안전하지 않다. 나머지 매개변수를 대신 사용할 수 있다. function f() { console.log(arguments) } function f(...args: unknown[]) { console.log(args) } 3. 기존 reserve 함수에 시작 날짜가 현재인 휴가를 예약하는 기능을 추가하여 구현하자. (세 번째 호출 시그니처 추가 및 reserve 구현 갱신) ..

타입스크립트[TypeScript] | 제네릭(Generic) 제약조건 설정하기

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! T extends type 전달받은 두 개의 객체를 하나로 합치는 함수를 구현해 보자. function merge(objA: T, objB: U) { return Object.assign(objA, objB); } 코드 실행은 잘 되지만, 에러가 발생하는 것을 확인할 수 있었다. 에러는 return 문에서 assign메서드에 전달되는 objA에서 발생했는데, 다음과 같은 오류가 발생했다. (더 보기를 누르면 발생한 오류 문구를 확인할 수 있어요.) 더보기 No overload matches this call. Overload 1 of 4, '..

타입스크립트[TypeScript] | 제네릭(Generic)이란? + filter, map 함수 구현해보기

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! 제네릭(Generic) 지금까지 boolean, string, number 등에 대해 알아보았었는데, 이러한 타입을 구체 타입이라고 한다. 구체 타입은 변수에 전달 될 타입을 정확하게 알고 있으며 실제로 이 타입이 전달되었는지 확인할 때 사용된다. 그러면 이와 반대로 어떤 타입이 사용될지 미리 알 수 없을 때 는 어떻게 해야 할까? 바로 제네릭(Generic)을 이용해서 해결할 수 있다. 함수를 정의하기 위해 타입을 정의해야 한다고 하자. 매개변수의 타입을 정의할 때 지금은 어떤 타입이 올지 알 수 없고, 누군가 함수를 호출 또는 정의할 때 ..

타입스크립트[TypeScript] | 클래스 상속(extend), 추상 클래스(abstrct), 정적 메서드(static)

🔍 글을 시작하기 전에 해당 글은 타입스크립트 프로그래밍 책과 유데미 타입스크립트 강의를 공부하여 정리한 글입니다. 수정해야 할 부분이 있다면 언제든지 알려주세요! Class(클래스) 클래스는 같은 구조로 이루어진 객체를 쉽게 생성할 수 있도록 해준다. 즉, 클래스를 사용하면 동일한 구조, 동일한 클래스를 기반으로 하는 동일한 메서드로 여러 객체를 빠르게 복제할 수 있는 것이 장점이다. 객체는 클래스의 인스턴스이며 클래스는 객체의 형태, 포함해야 할 속성과 메소드를 정의하는 데 도움을 준다. 따라서 클래스는 객체의 생성 속도를 높여주는, 객체 리터럴 표기법을 사용하는 것에 대한 대안 이다. 타입스크립트에서 클래스를 정의하는 방법은 다음과 같다. 클래스 내에서 사용할 변수(클래스의 속성)를 상단에 타입과 ..