코딩하는라민

[TypeScript] 함수의 기타 반환타입(unknown, void, never) 📌 unknown 타입스크립트에서 unknown은 JavaScript의 any 타입과 유사한 타입이다. unknown 타입은 컴파일러에게 해당 값에 대한 타입 정보가 없음을 알리는 역할을 한다. unknown 타입은 어떤 값이 들어올지 알 수 없는 경우에 사용된다. 즉, 변수나 매개변수에 할당되는 값의 타입을 정확히 알 수 없을 때 사용하는 것이다. unknown 타입을 가지는 변수나 매개변수는 어떤 타입의 값도 가질 수 있다. 하지만 unknown 타입의 값으로는 직접적인 조작이 불가능하고, 다른 타입으로 할당하기 전에 적절한 타입 검사나 타입 단언(type assertion)을 통해 원하는 타입으로 형 변환을 해줘야 ..

[TypeScript] 함수의 반환 타입과 함수 타입 구문(function type) 📌 반환 타입 함수의 반환문이 함수의 반환 타입으로 할당할 수 없는 값을 반환하는 경우, 다음과 같이 할당 가능성 오류를 표시한다. function home(todo: string): string | indefined { switch (todo) { case "러닝 타입스크립트": return `${todo} 공부하고 블로그 정리`; // Ok case "리액트 프로젝트": return 100; // Error 🔥: Type 'number' is not assignable to type 'string'. defualt: return undefined; // Ok } } 두번째 case 에서 반환값은 100인데, home..

[TypeScript] 함수의 매개변수(선택적 매개변수, 기본 매개변수, 나머지 매개변수) 📌 함수 매개변수 변수와 마찬가지로 타입 애너테이션으로 함수의 매개변수의 타입을 선언할 수 있다. function home(todo: string){ console.log(`오늘 할일 : ${todo}!`); } any 타입 매개변수 function home(todo){ console.log(`오늘 할일 : ${todo}!`); } 매개변수에 명시적 타입 정보가 선언되어 있지 않기 때문에 타입을 알 수 없다. 이 경우 매개변수는 any 타입으로 간주된다. 📌 필수 매개변수와 선택적 매개변수 ✏️ 필수 매개변수 자바스크립트에서는 인수의 수와 상관없이 함수를 호출할 수 있는 반면, 타입스크립트에서는 잘못된 수의 인수로..

[TypeScript] 객체 타입 유니언(|)과 교차 타입(intersection type, &) 📌 객체 타입 유니언 객체 타입 유니언이란 타입스크립트에서 두 개 이상의 객체 타입을 결합하는 방법이다. 객체 타입 유니언은 | 연산자를 사용하여 표현한다. ✏️ 유추된 객체 타입 유니언 변수에 여러 객체 타입 중 하나가 될 수 있는 초깃값이 주어지는 경우. const family = Math.random() > 0.3 ? { name: "june", age: 25 } : { name: "me", hobby: "piano" }; family.name; // string family.age; // number | undefined family.hobby; // string | undefined 타입스크립트는 ..

[TypeScript] 객체의 선택적 속성(Optional Properties, 옵셔널 프로퍼티) 📌 객체의 선택적 속성(Optional Properties) 선택적 속성은 인터페이스나 타입 정의에서 특정 속성이 필수적으로 존재하지 않아도 되는 속성을 의미한다. 즉 해당 속성이 있을 수도 있고 없을 수도 있는 경우에 사용할 수 있다. 이렇게 선택적 속성을 정의하기 위해 속성 이름 뒤에 물음표(?)를 추가할 수 있다. type Person = { name: string; age?: number; } // Ok const me: Person = { name: "ramin", } // Ok const you: Person = { name: "you", age: 27, } Person 타입은 name 은 필수 ..

[TypeScript] 초과 속성 검사 (Excess Property Checks) 📌 초과 속성 검사(Excess Property Checks) 초과 속성 검사란 객체 리터럴을 사용하여 새로운 객체를 생성할 때, 타입스크립트가 추가로 정의되지 않은 속성을 감지하는 기능을 말한다. 이 기능은 구조적 타이핑(structural typing) 개념에 기반한다. ✏️ 객체 리터럴의 타입 검사 type Person = { name: string; age: number; }; const me: Person = { name: "ramin", age: 20, hobby: "game", // Error } 위 코드에서 "hobby" 속성은 "Person" 타입에 정의되어 있지 않다. 이 경우 타입스크립트는 초과 속성 ..

[TypeScript] 객체 타입을 선언하는 방식과 별칭 객체 타입(Type alias) 📌 객체 타입 원시 타입을 제외하고 가장 많이 등장하는 타입. 객체는 프로퍼티를 가지는 자바스크립트 값이다. 객체를 정의하려면 해당 객체의 프로퍼티들과 각 프로퍼티의 타입을 나열하면 된다. const info = { name: 'ramin', favoriteNumber: 7, }; info.name; // 타입: string info['favoriteNumber']; // 타입: number info 가 가지고 있는 속성 외의 이름으로 접근하려고 하면 '타입 오류'가 발생한다. 📌 객체 생성 방법 - 객체 리터럴 객체 리터럴(Object Literal)은 중괄호({})를 사용하여 객체를 생성하는 것을 말한다. 속성값..

[TypeScript] 구조적 타이핑으로 타입 호환성 확인하기, 덕 타이핑이란? 📌 구조적 타이핑의 정의 구조적 타이핑은 객체나 데이터의 구조에 기반하여 타입 호환성을 결정하는 타입 시스템 구조적 타이핑은 객체가 특정한 타입으로 정확히 명시되어 있지 않아도, 객체의 구조가 타입과 일치하는지를 확인하여 타입 호환성을 결정한다. 즉, 객체의 속성 구조와 타입이 일치한다면 타입 호환성이 성립된다. 이러한 특성은 코드의 재사용성과 유연성을 높일 수 있다. 📌 구조적 타이핑 예시 type Cafe = { menu: string; } type Home = { todo: string; } // 특정 타입으로 정확히 명시되어있지 않더라도 const homeCafe = { menu: "cake", todo: "sleep..

[TypeScript] 리터럴 타입(literal types) 📌 리터럴 타입(literal types) 특정한 값 자체를 타입으로 지정하는 기능이다. 리터럴 타입은 값의 정확한 타입을 나타내기 위해 사용된다. const friends = "dana"; friends = "udin"; // ❌ error: Cannot assign to 'friends' because it is a constant. 변수 frineds 는 "dana" 만 값으로 가질 수 있다. 다른 문자열들은 friends 와 호환되지 않는다. 문자열 뿐만아니라 숫자, 불리언, 객체 등의 다양한 값에 대해 사용할 수 있다. type MyFavoriteNumber = 3; type MyBoolean = true; type MyInfo = ..

[TypeScript] 유니언 타입(Union Type)과 내로잉(narrowing) 📌 타입스크립트의 추론 유니언(union) : 값에 허용된 타입을 두 개 이상의 가능한 타입으로 확장하는 것 내로잉(narrowing) : 값에 허용된 타입이 하나 이상의 가능한 타입이 되지 않도록 좁히는 것 📌 유니온 타입 둘 이상의 타입을 허용하는 타입. 함수 매개변수 또는 반환 타입으로 여러 타입을 허용하고자 할 때 유니언 타입을 사용할 수 있다. function yourMenu(menu: boolean | string) { console.log(`menu: ${menu}`); } menu 매개변수에는 불린 또는 문자형을 받을 수 있다. 예를 들어 yourMenu(false) 이 될 수도 있고, yourMenu("..