Study/TypeScript

[TypeScript_study] Pick & Omit & Exclude & NonNullable

* Pick T에서 원하는 K만 골라서 사용한다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Omit - 특정 property를 생략하고 사용 가능 - age, gender property는 제외되고 나머지가 사용된다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Exclude - T1의 type들 중에서 T2 type과 겹치는 부분을 제외하고 사용하는 ..

[TypeScript_study] Record

Record K : key T : type - TypeScript는 Version 2.1부터 Utility Type인 Record Type을 도입했습니다. Record Type은 Record 형식으로 키가 Key이고 값이 Type인 객체 타입입니다. * Record를 활용하기 전 interface Score { "1" : "A" | "B" | "C" | "D" "2" : "A" | "B" | "C" | "D" "3" : "A" | "B" | "C" | "D" "4" : "A" | "B" | "C" | "D" } const score:Score { 1 : "A", 2 : "C", 3 : "B", 4 : "D", }; * Record를 활용한 코드 type Grade = "1" | "2" | "3" | "4..

[TypeScript_study] 함수 오버로딩(Function Overloading)

* 함수 오버로딩이란? TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다. * 매개변수의 개수는 동일하지만, 타입이 다른 경우 interface User { name: string; age: number; } function join(name: string, age: number|string):User|string { if(typeof age === 'number') { return ( name, age, ); } else { return "type number"; } } const kim:User = join("kim", 30); const par..

[TypeScript_study] Typescript 설치와 셋팅 & 간단 사용법(Vue, React 포함)

* 타입스크립트 쓰는 이유 - TypeScript는 JavaScript의 타입부분을 업그레드해서 사용하고 싶을 때 사용하는 일종의 JavaScript의 일종의 확장판이다. 완전 다른 언어가 아니라 JavaScript문법 그대로 이용가능한대 타입 문법을 업그레이드 해서 사용할 수 있다. - JavaScript는 타입에 관대하다. 따라서 숫자와 문자를 연산해도 아무런 문제 없이 정상적으로 작동한다. 혹은 숫자로 바꿔주는 함수에 이상한 값을 넣어도 아무런 오류가 없다. 언어 자체에서 알아서 타입을 변경해준다. (JavaScript는 Dynamic typing를 지원하는 언어이기 때문이다.) ex) 5 - "3" 혹은 parseInt([1, 2, 3]) - Dynamic typing은 간단한 기능을 개발할 때는..