doeunn.log

이번 글에서는 이펙티브 타입스크립트를 공부하며 알게 된 unknown 타입에 대해 더 자세히 알아보려고 합니다 :) ✔️ 함수의 반환값과 관련된 unknown 함수를 하나 작성해 봅시다. function parseYAML(yaml: string): any { // ... } 함수의 반환 타입으로 any를 사용하는 것은 좋지 않은 설계이므로, 대신 호출한 곳에서 반환값을 원하는 타입으로 할당하는 것이 이상적입니다. interface Book { name: string; author: string; } const book: Book = parseYAML(` name: Wuthering Heights author: Emily Brote `) 위와 같이 Book이라고 타입을 선언해주지 않고 생략을 하게 되면, ..

🛫 타입스크립트 type과 interface 타입스크립트에서 type과 interface는 모두 타입을 정의하는 데 사용되는 기능입니다. 🪐 type type은 새로운 타입을 정의할 때 사용됩니다. type은 기존 타입을 확장하거나 별칭을 만들 수 있으며, 유니온 타입, 인터섹션 타입, 제너릭 등의 고급 타입 기능을 활용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 // 유니온 타입 예시 type MyType = string | number; const myVariable: MyType = "Hello"; const myNumber: MyType = 42; // 인터섹션 타입 예시 type Fi..

🦆 덕 타이핑과 구조적 타이핑 타입스크립트에서 "덕 타이핑"은 객체의 타입을 결정하는 데 객체가 필요로 하는 속성이나 메서드의 존재에 초점을 둔 타입 매칭 방식을 말합니다. 덕 타이핑은 "덕 테스트(duck test)"에서 유래되었는데, "오리처럼 걷고, 오리처럼 꽥꽥 소리를 내면, 그것은 오리다"라는 개념을 기반으로 합니다. 즉, 어떤 새가 오리로 태어났는지, 정말 오리인지는 중요하지 않습니다. 새가 오리처럼 보이고 오리처럼 행동하면 오리가 아닐리가 없다고 생각하는 것입니다. ⛳ 덕 타이핑과 구조적 타이핑은 동일한 개념을 가리킨다 두 용어는 모두 객체의 타입을 결정할 때 구조와 필요한 속성의 존재에 초점을 둔 타입 매칭 방식을 의미합니다. 덕 타이핑이라는 용어는 덕 테스트로부터 유래된 것이며, 이를 좀..

🚀 유틸리티 타입이란 ? 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다. 예를 들어 Information이라는 인터페이스에서 일부 속성만 사용하고 싶다면, 일부만 있는 타입을 선언해서 사용하지 않아도 유틸리티 타입 한 줄로 보다 간결하게 사용할 수 있게 됩니다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다! 자주 사용되는 유틸리티 타입 알아보기 자주 사용되는 타입을 몇 개 알아봅시다 ! Partial Partail 타입은 특정 타입의 일부만 사용하는 것을 허용하는 타입을 정의할 수 있습니다. interface Address { e..

▶타입스크립트의 제네릭(Generics) 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징입니다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용되는데요. 🔎 제네릭의 정의와 예시 - 타입을 함수의 파라미터처럼 사용하자 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 일반적인 자바스크립트의 함수 형태에서 살펴봅시다. function getText(text) { return text; } 위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해 주는 함수입니다. 'hi', 10, true 등 어떤 값이 들어가더라도 그대로 반환합니다. getText('hi'); // 'hi' getText(10);..

▶타입스크립트 클래스(Class) 타입스크립트에서의 클래스를 알아봅시다😀 🔎 클래스? 자바스크립트에서는 ES6에서부터 클래스 문법을 지원하고 있습니다. 클래스를 사용하는 가장 큰 이유는 재사용성 입니다. 객체를 직접 작성하여 정의하고 생성할 수도 있지만, 클래스로 만들어주면 여러 객체를 더 쉽게 만들 수 있습니다. → 클래스는 객체를 생성하기 위한 틀 💡 🔎 ES6 이전에는 객체를 그냥 다 작성해줬을까? ES6 이전 문법에서도 재사용성을 위해 생성자 함수라는 것을 통해 ES6에서의 클래스와 동일한 역할을 수행했는데요. 📄 class.js 코드 // ES6 이전 - 생성자 함수 function Person(name, age) { this.name = name; this.age = age; } var doe..