타입스크립트 16

Generic(제네릭)이란? 개념 및 Typescript 예제. "any 쓰지마세요"

Generic? 사전적 의미: 일반적인, 추상적인, 포괄적인 반의어) 구체적 (specific) Generic in TypeScirpt(타입스크립트, 이하 TS) TS의 "유연한 타입 제약"을 가능케하는 문법. 하나의 함수, 또는 클래스 코드가 여러 타입의 객체를 받을 수 있게. 해준다. 그래서 코드의 간결함과 가독성, 재사용성등을 향상 시킬수 있다. TS는 타입에 제약조건을 걸어 오류가없고 깔끔한 JS코드를 생성하기위해 만들어진 언어이다. 하지만 여러타입의 객체에대해 작업을 수행하는 코드를 작성할때 타입별로 비슷한내용의 코드를 반복해서 작성해야 하는 번거로움이 있다. Generic을 사용하면 이런 수고로움을 덜 수있다. Generic은 JS에는 존재하지 않는 TS만의 구성요소이다. Genric 문법 T..

union type(유니온 타입)과 type guard(타입가드)란? 개념 및 Typescript예제

Union? 사전적 의미: 조합, 결합, 연합 in Mathematics(수학에서): 합집합 타입스크립트에서: 잠재적인 타입들을 열거해 놓은 타입이다. 아직 어떤타입의 값이 대입될지 정해져 있지 않았을 때 사용한다. 열거에는 | 기호를 사용한다. ex) number | string 자바스크립트에는 존재하지 않는 타입스크립트 고유의 문법요소이다. Union Type 예제 //TypeScript 코드 //string과 number중 하나를 가질 수 있는 타입 type stringOrNumber = string | number; //string let burgerName: stringOrNumber; burgerName = 'HamBurger'; // number let price: stringOrNumber..

Intersection type(인터섹션 타입) 개념 및 Typescript 예제

Intersection? 사전적 의미: 교차로, 교집합, 어떤 것들이 가로지르는 지점 Intersection type (in Typescript): 여러 타입을 융합하여 만든 하나의 타입. "&" 연산자를 활용하여 정의한다. 융합된 타입들의 요소를 전부 가지고있다. type예제 type CheeseBurger = { numBread: number; numCheese: number; } type BeefBurger = { numBread: number; numBeef: number; } //numBread라는 공통의 요소를 가지고있는 두 타입을 정의했다. type BeefCheeseBurger = CheeseBurger & BeefBurger; //& 연산자가 바로 intersection 연산자이다. //..

interface(인터페이스) 개념 및 Typescript 예제

타입스크립트 소개 및 개발 준비 게시물의 링크는 이 글의 맨 밑에 있습니다. Art and design icons created by Freepik - Flaticon 목차. A. interface의 개념 사전적 정의, 프로그래밍 언어에서의 정의 사용이유 B. Typescript예제 1. object와 class의 청사진이 되는 interface 2. function의 청사진이 되는 interface 3. +@: readonly제어자와 option(옵션) 항목 A. Interface 개념 interface(인터페이스)란? 타입스크립트의 interface : class(클래스), object(오브젝트), function(함수) 등을 정의하기 위한 blueprint(청사진)을 제공하는 구성요소. 사전적 의미..

VSCODE에서 TypeScript 개발 준비하기

썸네일 이미지 Microsoft icons created by Freepik - Flaticon 저번에 소개했던 TypeScript의 개발준비를 위한 설정을 해보자. https://batcave.tistory.com/33 TypeScript(타입스크립트)? 간단하게 알아보기 Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입 batcave.tistory.com 0. Node.js, VScode설치하기 TypeScript(이하 TS)를 활용하는 데에 npm이 유용하게 ..

TypeScript(타입스크립트)? 간단하게 알아보기

Typescript icons created by Freepik - Flaticon TypeScript(타입스크립트 이하 TS)란? 프로그래밍언어: JavaScript(자바스크립트, 이하 JS)의 super set(상위집합) JS에 새로운 요소를 추가하여 만든 언어. Type check(타입체크) 기능을 통해, JS를 마치 자바처럼 static(정적)으로 프로그래밍할 수 있게 해 준다. 컴파일러: ". ts" 확장자 파일을 ". js"파일로 컴파일러 사실 TS는 그 자체로 실행가능한 언어가 아니다. TS로 작성한 모든 코드 들은 JS로 컴파일되어 실행된다. TS의 장점 js코드의 오류를 run-time 이 아닌 compile-time에 발견할 수 있다. js코드가 프로그래머의 의도와 다른 논리로 작동하는..