TypeScripts & 3rd Library

JavaScript Library 사용

• type이 선언되어 있지 않아서 TypeScript가 실행되지 않음
• @types/... 패키지를 설치 (declaration 파일이 있음)

types 패키지가 없는 경우, declare로 타입 지정

declare const GLOBAL : any;

• 존재한다는 것을 아는 특성 혹은 변수를 선언함

class-transformer library

• 백엔드에서 받는 JSON 데이터는 기본 데이터만 전송됨
• 데이터를 클래스의 인스턴스로 변환하고자 하는 경우, class-transfomer 라이브러리를 사용함

class-validator libaray

• TypeScript의 decorator의 도움을 받아 검증 규칙 (validation rule)을 추가해줌
• 클래스를 인스턴스화 할 때마다 설정한 규칙에 따라 검증할 수 있음
• tsconfig.json에서 experimentalDecorators를 true로 설정해야함
• class-validator 라이브러리의 validate 함수를 사용함

Declaration Reference

declare Object with Properties

// code
let result = myLib.makeGreeting("hello, world");
console.log("The computed greeting is:" + result);
let count = myLib.numberOfGreetings;

• dot notation으로 접근하는 타입이나 값을 설명하기 위해 declare namespace 키워드를 사용함

// declaration
declare namespace myLib {
    function makeGreeting(s: string): string;
    let numberOfGreetings: number;
}

declare Overloaded Functions

// code
let x: Widget = getWidget(43);
let arr: Widget[] = getWidget("all of them");

// declaration
declare function getWidget(n: number): Widget;
declare function getWidget(s: string): Widget[];

declare Reusable Type Interface

// code
greet({
  greeting: "hello world",
  duration: 4000
});

• property를 갖는 타입을 정의하기 위해 interface를 사용함

// declaration
interface GreetingSettings {
  greeting: string;
  duration?: number;
  color?: string;
}
declare function greet(setting: GreetingSettings): void;

declare Reusable Types (Type Alias)

// code
function getGreeting() {
    return "howdy";
}
class MyGreeter extends Greeter { }
greet("hello");
greet(getGreeting);
greet(new MyGreeter());

• type에 대한 약칭으로 type alias를 사용할 수 있음

// declaration
type GreetingLike = string | (() => string) | Greeter;
declare function greet(g: GreetingLike): void;

Organizing Types

// code
const g = new Greeter("Hello");
g.log({ verbose: true });
g.alert({ modal: false, title: "Current Greeting" });

• type을 구조화하기 위해 namespace를 사용함

// declaration
declare namespace GreetingLib {
    interface LogOptions {
        verbose?: boolean;
    }
    interface AlertOptions {
        modal: boolean;
        title?: string;
        color?: string;
    }
}

• 중첩된 namespace를 하나로 선언할 수 있음

declare namespace GreetingLib.Options {
    // Refer to via GreetingLib.Options.Log
    interface Log {
        verbose?: boolean;
    }
    interface Alert {
        modal: boolean;
        title?: string;
        color?: string;
    }
}

declare Classes

// code
const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();
class SpecialGreeter extends Greeter {
    constructor() {
        super("Very special greetings");
    }
}

• class 혹은 class 같은 객체를 선언할 때 declar class 키워드를 사용함

declare class Greeter {
    constructor(greeting: string);
    greeting: string;
    showGreeting(): void;
}

declare Global Variable

// code
console.log("Half the number of widgets is " + (foo / 2));

• 변수를 선언할 때 declare var 키워드를 사용함
  • 변수가 읽기 전용이라면 declare const 키워드를 사용함
  • 변수가 블록 스코프인 경우 declare let 키워드를 사용함

// declaration
declare var foo: number;

declare Global Function

// code
greet("hello, world");

• 함수를 선언할 때 declare function 키워드를 사용함

// declaration
declare function greet(greeting: string): void;

참고링크

3rd party library의 타입 지정 방법

1. index.d.ts 파일 생성

• tsconfig.ts의 compierOption에 typeRoots 속성을 추가함
• typeRoots의 배열에 index.d.ts를 선언할 root를 설정함

{
  "compilerOptions" : {
    "typeRoots" : [
      "./@type"
    ]
  }
}

• typeRoot로 지정된 곳에 index.d.ts 파일을 생성함

2. index.d.ts 선언 방식

• index.d.ts의 기본 선언 방식 : ambient declarations

  • ambient = 타입스크립트 컴파일러에 JS에 대한 구현 '환경'에 대한 정보를 줌

• 선언할 때 맨 앞에 declare 키워드를 붙여줌

// ambient variables
declare var hello: any;

• module 키워드를 사용하여 ambient module을 선언함
• 모듈 내에 interface, class, function 등의 요소를 선언할 수 있음
• 큰따옴표("")를 통해 모듈 이름을 정의함

//ambient module
declare module "module1" { ...}

• 이름으로 선언된 모듈은 import * as alias로 가져올 수 있음

import * as Module from 'module1';
let test = Module.func(...);

• namespace 키워드를 사용하여 ambient namespace를 선언함

// namespace ambient module
declare namespace module1 { ... }

3. Module Export 종류

• Global Export
  • 모듈이 global namespace에 값만 할당하고 export하지 않는 경우에 사용
  • 변수, 함수, 클래스 선언 앞에 declare를 추가함
  • 명시적으로 import하지 않아도 프로젝트 전역에서 사용 가능함

declare let someGlobal: GlobalType // 전역 변수
declare class GlobalClass {} // 전역 클래스
declare function globalFunction(): string // 전역 함수

• ES2015 Export
  • declare로 선언 후, export 해줌

declare let defaultExport: SomeType
export default defaultExport

• CommonJS Export
  • 여러 가지를 선언하는 경우, 선언을 합쳐서 사용해야함

declare namespace Module1 {
	export let someExport: SomeType
	export type SomeType = number
	export class OtherExport {
		otherType: string
	}
}

export = Module1 

참고링크