Study/TypeScript (9) 썸네일형 리스트형 Webpack what is webpack? ESmodule(import/export) 구문은 최신 브라우저에게 어떤 파일을 다운로드하고 실행할지 명시해 준다. 즉 import 구문이 많아질수록 더 많은 파일을 다운로드 해야 하고, 이는 더 많은 http request가 필요하다는 것을 의미한다. 물론 import 파일을 다운로드 하는 데에도 시간이 소요되지만, 파일을 다운로드 하기 위해 보내는 request 자체를 준비(set up)를 하는데에도 시간(base overhead)이 소요된다. 이는 dev tool > network > waterfall 그래프에서 확인할 수 있다. 실제 웹에서 다수의 http 요청을 보내는 것은 어플리케이션의 속도를 느리게 만든다. 따라서 request의 빈도를 줄이는 것이 좋고, we.. Module namespace & // models/drag-drop.ts namespace App { export interface Draggable { handleDragStart(event: DragEvent): void; handleDragEnd(event: DragEvent): void; } export interface Droppable { handleDragOver(event: DragEvent): void; handleDrop(event: DragEvent): void; handleDragLeave(event: DragEvent): void; } } // models/project.ts namespace App { export type ProjectStatus = 'active' | 'finished'.. Decorators what is decorators? // tsconfig.json "compilerOptions": { "experimentalDecorators": true, // ... } decorator를 사용하려면, tsconfig에서 위의 옵션을 true로 설정해 주어야 한다. function Logger(target: Function) { console.log("decorator: logging..."); console.log("Logger target: ", target); } @Logger // decorator! class Person { name = "Harry"; constructor() { console.log("creating new obj by Person class...") } } const.. Generic what is generic? In languages like C# and Java, one of the main tools in the toolbox for creating reusable components is generics, that is, being able to create a component that can work over a variety of types rather than a single one. This allows users to consume these components and use their own types. // 1. compile error! const names: Array = []; // Generic type 'Array' requires 1 type argu.. Advanced Types intersection types // 1. object type ErrorHandling = { success: boolean; error?: { message: string }; } interface ArtworksData { artworks: { title: string }[]; } type ArtworksResponse = ArtworksData & ErrorHandling // interface ArtworksResponse extends ArtworksData, ErrorHandling {}; const test: ArtworksResponse = { artworks: [{ title: 'test' }], success: true, } // 2. etc type Languages = 'engl.. Interface what is Interface? | vs. class, type ts에서 인터페이스란, 객체의 구조를 정의할 때 사용하는 키워드이다. 즉, 객체의 타입만을 정의하기 때문에, 같은 구조의 객체를 생성하는 클래스와는 차이가 있다. interface Person { // name: string = 'Harry'; => error! // an interface cannot have an initializer; name: string; age: number; greet(phrase: string): void; } let harry: Person = { name: 'Harry', age: 25, greet(phrase: string) { console.log(this.name + ' : ' + phrase) } .. Class Class basic concepts js에서 class는 같은 구조의 객체를 빠르게 만들 수 있도록 도와준다(a blue print of objects). ts를 이용하면, class에 타입을 더해서 사용할 수 있다. class Department { // property 타입 정의 name: string; // 새로운 객체를 생성할 때 name 매개변수에 인자를 전달할 수 있다 constructor(name: string) { this.name = name; } // methods describe() { // console.log('Department: ' + name); console.log('Department: ' + this.name); } } const hr = new Department('.. tsconfig | ts compiler npx tsc $ npx tsc app.ts --watch $ npx tsc app.ts -w $ npx tsc --init watch 모드를 이용하면, 컴파일러가 지정된 ts 파일의 변화를 관찰하며 자동으로 변환한다. 큰 규모의 프로젝트에서 이런 방식의 컴파일은 불편할 수 밖에 없는데, 여러 개의 ts 파일로 작업하기 때문이다. init 옵션을 이용하면(프로젝트 폴더를 ts 프로젝트로 지정할 때 한번만 사용하면 된다), 해당 프로젝트 폴더를 ts가 관리한다. tsconfig.json 파일이 생성된다. 폴더에 존재하는 모든 ts 파일에 대해 컴파일을 진행한다. => html 에 컴파일된 js를 연결한다. tsconfig.json shortcut) ctrl + space를 이용하면, 옵션에 가능한 자동완성.. 이전 1 2 다음