Modular Programming Menggunakan External Modules

by

Jika pada modul sebelumnya dibahas internal module menggunakan namespace, pada modul ini kita akan bahas external module.

External module menggunakan file yang terpisah. Sama seperti namespace, external module bertujuan untuk organasasi code yang lebih baik.

Untuk bisa digunakan oleh code lain, external module harus di export dan diimport.

Untuk melakukan import, TypeScript mendukung penggunaan dua keyword, yaitu:

  • require, style node.js.
  • import, standar dari ES2015.

Hal ini terjadi karena, TypeScript terlebih dahulu mendukung import external library. Sementara ES2015 belakangan baru menambahkan fitur ini. Jadi TypeScript tetap mempertahankan penggunaan require, untuk mencegah kode error yang telah dibuat oleh developer sebelum import syntax diperkenalkan.

Untuk keperluan tutorial ini, kita akan buat 2 file TypeScript baru. Yaitu model.ts dan dataAccess.ts. Dan menambahkan setting pada tsconfig.json.

Pada tsconfig.json, tambahkan informasi module. Informasi ini berguna memberi tahu TypeScript, bahwa akan menggunakan external module dan dicompile ke ES versi yang dimaksud.

{
    "compilerOptions": {
        "target" : "es5",
        "module": "System"
    }
}

Untuk file model.ts akan berisi code interface dan enum dari modul sebelumnya, namun tanpa penggunaan namespace.

export interface Todo{
    name: string;
    state: TodoState;
}
  
export enum TodoState{
    New = 0,
    Active,
    Complete,
    Deleted
}

Import menggunakan format require

Untuk file dataAccess.ts, akan berisi code interface dari modul sebelumnya, tanpa penggunaan namespace. Dan ditambahkan perintah untuk melakukan import module model.ts.

Perhatikan, dalam perintah require, tidak diperlukan informasi file extension.

import Model = require("./model");

export interface ITodoService{
    add(todo: Model.Todo): Model.Todo;
    delete(todoId: number): void;
    getAll(): Model.Todo[];
    getById(todoId: number): Model.Todo;
}

Jika modul yang diimport akan menyebabkan kode menjadi panjang, bisa dilakukan import dengan cara berikut.

import Model = require("./model");
import Todo = Model.Todo

export interface ITodoService{
    add(todo: Todo): Todo;
    delete(todoId: number): void;
    getAll(): Todo[];
    getById(todoId: number): Todo;
}

Import menggunakan format ES2015

Perbedaan dari format ES2015 kita dapat mendefinisikan alias dengan keyword as.

import * as Model from "./model";

export interface ITodoService{
    add(todo: Model.Todo): Model.Todo;
    delete(todoId: number): void;
    getAll(): Model.Todo[];
    getById(todoId: number): Model.Todo;
}

Berikut contoh code import yang valid.

import * as Model from "./model";
import {Todo, TodoState} from "./model";
import {Todo as TodoTask, TodoState} from "./model";

Perhatikan dengan code import format dibawah, kita bisa spesifik memilih modul mana yang akan diimport. 

import {Todo, TodoState} from "./model";

export interface ITodoService{
    add(todo: Todo): Todo;
    delete(todoId: number): void;
    getAll(): Todo[];
    getById(todoId: number): Todo;
}

Disarankan untuk menggunakan perintah import dengan format ES2015 karena lebih flexible dan dapat memperpendek code.

Sharing is caring:

Leave a Comment