본문 바로가기

TypeScript

(6)
[TypeScript] 유틸리티 타입 - ReturnType 가이드 TypeScript를 사용하다 보면 함수의 반환 타입을 활용해야 할 때가 많습니다. 이럴 때마다 매번 타입을 정의하는 것은 번거롭고, 코드 유지보수에도 좋지 않죠. TypeScript의 내장 유틸리티 타입인 ReturnType을 사용하면 이러한 문제를 깔끔하게 해결할 수 있습니다. 1. ReturnType이란 무엇일까요?ReturnType은 함수의 반환 타입을 추론하여 새로운 타입을 생성해주는 유틸리티 타입입니다. 쉽게 말해, "이 함수의 반환 타입이 뭐지?"라는 질문에 대한 답을 자동으로 찾아주는 똑똑한 친구라고 생각하시면 됩니다. 2. ReturnType의 정의ReturnType은 다음과 같이 정의되어 있습니다.type ReturnType any> = T extends (...args: any) =>..
[TypeScript] 유틸리티 타입 1. Partial 타입의 모든 속성을 선택적(optional)으로 만듭니다.interface Todo { title: string; description: string;}// 모든 필드가 선택적이 됨type PartialTodo = Partial; // { title?: string; description?: string; }const aa: Todo = {}; // 가능const bb: Todo = { title: 'title' }; // 가능const cc: Todo = { description: 'description' }; // 가능const dd: Todo = { title: 'title', description: 'description' }; // 가능 2. Required Partia..
[TypeScript] 함수 오버로딩의 개념과 주의사항 가이드 type Combinable = string | number;function add1(a: Combinable, b: Combinable) { // return a + b; // 타입 추론이 안되는 경우 타입 어노테이션을 사용해야 함 // 타입가드 : typeof type 의 교차 타입인 경우 if (typeof a === "string" || typeof b === "string") { return a.toString() + b.toString(); } return a + b;}const result = add1("type", "script");result.split(" "); 위 코드에서 const ressult = add1("type", "script"); 로 사용하면 split 에서..
[TypeScript] TypeScript 초보자를 위한 tsconfig.json 가이드 타입스크립트를 초기화 하려면 글로벌 인스톨을 먼저 합니다.타입스크립트는 개발 단계에서만 사용하고 컴파일 시에는 자바스크립트로 변환되므로devDependencies 에 인스톨 해주면 됩니다. npm i -D typescript ts 파일을 js 파일로 컴파일 하기 위해선 터미널에 'tsc 파일명' 을 입력하면 js 파일로 변환이 됩니다.하지만 매번 코드를 수정, 작성하고 터미널에서는 tsc 명령어를 입력하기에는 너무 번거롭습니다. 그래서 tsconfig.json 을 생성하여 저장될 때마다 자동 컴파일이 되도록 설정을 하는 것입니다. 그 후 타입스크립트의 기본 설정을 위한 tsconfig.json 생성을 위해아래 명령어를 프로젝트 루트 터미널에 입력합니다.tsc --init 그럼 기본 설정에 관한 속성 및 ..
[TypeScript] enum // case 1enum Shoes { Nike, Adidas,}let myShoes = Shoes.Nike;console.log(myShoes); // 0// case 2enum Shoes { Nike= 10, Adidas,}let myShoes = Shoes.Adidas;console.log(myShoes); // 11// case 3enum Shoes { Nike = 'nike', Adidas = 'adidas',}let myShoes = Shoes.Nike;console.log(myShoes); // nike  java에서 처럼 enum을 출력하면 0,1,2 이런식으로 현재 키의 index가 출력되게 된다.문자를 할당하여 추가로 초기화를 시켜줘야 된다 ( case 3 )
[TypeScript] type VS interface type은 TypeScript에서 타입 별칭(Type Alias)을 정의할 때 사용되는 키워드로 유연성에 그 특징이 있습니다 둘 다 타입 체킹에 사용되며, 객체의 형태를 정의할 수 있고,  제네릭 사용 가능하다는 공통점이 있지만역시나 각자 차이가 있습니다. interface Box { value: T;}type Box = { value: T;}  일단 interface 로 정의하면 객체의 타입을 명확하게 정의할 수 있습니다.( 객체 지향적입니다)그리고 여러 클래스가 구현해야 하는 구조를 다수의 인터페이스로 정의할 수 있습니다.class Person implements Aaa, Bbb {}(자바처럼 여러 interface를 implements 하는 게 가능합니다)  그 외 차이점은 크게 5가지를..