TypeScript
-
Typescript - DecoratorsTypeScript 2022. 9. 20. 10:52
- 데코레이터는 메타 프로그래밍하는 데 매우 유용하게 사용될 수 있다. function Logger(constructor: Function) { console.log('Logging...'); console.log(constructor); } @Logger class Person { name = 'Max'; constructor() { console.log('Creating person object...'); } } - 데코레이터는 실체화되기 전 클래스가 정의만 돼도 실행된다. 클래스를 실체화할 필요가 없다 데코레이터 팩토리 : 데코레이터 함수를 도출하는데 어떤 대상에 데코레이터를 할당할 때 설정할 수 있도록 해준다. // EX1 function Logger(logString: string) { retu..
-
Typescript - 고급타입TypeScript 2022. 9. 16. 18:01
인터렉션 타입 type Admin = { name: string; privileges: string[]; }; type Employee = { name: string; startDate: Date; }; type ElevatedEmployee = Admin & Employee; 타입 가드 type Combinable = string | number; function add(a: Combinable, b: Combinable){ if(typeof a === 'string' || typeof b === 'string'){// 타입가드 return a.toString() + b.toString(); } return a + b;// a와 b가 숫자형이어야 한다는 것을 안다. } - 타입가드는 유니온 타입이 지닌..
-
Typescript - 클래스 & 인터페이스TypeScript 2022. 9. 15. 17:00
클래스 - 객체는 코드로 작업을 수행하면서 사용할 수 있는 구체적인 요소들 - 클래스는 데이터를 저장하고 메소드를 실행하기 위해 메소드를 저장하는데 사용하는 데이터 구조 - 클래스를 사용하여 객체의 형태, 포함해야 하는 데이터, 클래스 기반으로 객체를 쉽게 만들 수 있으려면 어떤 메소드가 필요한지 정의할 수 있기 때문에 이를 클래스 내의 인스턴스라고 부른다. ㆍ객체는 클래스 내의 인스턴스인 것이다. - 이러한 클래스를 기반으로 하면 동일한 구조, 동일한 클래스를 기반으로 하는 동일한 메소드로 여러 객체를 빠르게 복제 가능 - 이처럼 클래스는 객체의 형태, 포함해야 할 속성과 메소드를 정의하는 데 도움이 된다. - 따라서 클래스는 객체의 생성 속도를 높여주며 객체 리터럴 표기법을 사용하는 것에 대한 대안이..
-
Typescript - 컴파일러( 및 구성 )TypeScript 2022. 9. 14. 17:41
* 관찰모드 tsc app.ts -w * 프로젝트 컴파일 tsc --init - 이 프로젝트를 타입스크립트 프로젝트라고 처음에 지정하면서 한 번만 실행 - 이 커맨드가 실행되는 폴더의 모든 항목을 알려주는 역할 - tsconfig.json 생성 ㆍ파일들을 어떻게 컴파일해야하는지 타입스크립트에게 알려준다. 추가 자료 1. tsconfig https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 2. tsc CLI https://www.typescriptlang.org/docs/handbook/compiler-options.html
-
Typescript - 시작TypeScript 2022. 9. 13. 17:34
타입스크립트 - 자바스크립트를 기반으로 하는 프로그래밍 언어 - 코드를 실행하여 타입스크립트 코드를 자바스크립트로 컴파일하는 강력한 컴파일러 const button = document.querySelector("button"); const input1 = document.getElementById("num1")! as HTMLInputElement; const input2 = document.getElementById("num2")! as HTMLInputElement; const add = (num1: number, num2: number) => { return num1+num2; } button.addEventListener("click", () => { console.log(add( +input1...