Mengintegrasikan Typescript Dan Gulp

3 min read

Masih tetap sebagai pengembang website/web developer. Itu yang saat ini saya kejar dan berharap agar tetap dalam industri ini. Untuk membuatnya menjadi kenyataan adalah terus mengembangkan skillset saya dalam bidang web development. Dan saya bersyukur sekarang sudah mulai tau bagaimana cara memakai typescript di proyek saya yang akan datang.

Gulp + TypeScript
Gulp + TypeScript

Sejauh ini saya sudah membuat beberapa project dan masih memegang bagaimana agar kode yang saya tulis dapat dibaca oleh semua orang, istilahnya humanize, dan saya juga selalu memiliki target bagaimana caranya agar aplikasi web yang saya buat bisa loading cepat, sebenarnya sudah mempraktekan beberapa metode seperti optimasi asset css, dan minimize kode javascript yang saya tulis terkadang berukuran besar.

Jatuh Hati Dengan TypeScript

Awal mula saya mau mempelajari TypeScript ketika sedang memperbarui theme di blog ini, saat itu saya memiliki masalah dengan babel, terlebih lagi pada proses minimize kode yang dihasilkan olehnya.

Tanpa berfikir panjang lagi saya langsung mencoba TypeScript, untungnya jauh-jauh hari yang lalu saya sudah mempelajari bagian dasarnya.

Gulp Sebagai Pelengkapnya

Saya sudah terbiasa menggunakan bundler seperti webpack, dan juga task runner, gulp misalnya. Menurut saya pribadi sebenarnya TypeScript saja sudah cukup karena memang kenyataanya TypeScript adalah compiler.

Tetapi masalahnya adalah bagaimana jika kita membangun proyek yang lumayan besar dan membutuhkan assets dengan tipe file lain, mungkin css untuk stylingnya, demi mempercepat proses pengembangan, kamu akan menggunakan sass/scss namun kalian masih membutuhkan compiler untuk sass/scss seperti node-sass , postcss berperan sebagai penguat rasanya.

Disini ada sedikit argumen dikalangan para programmer khususnya frontend, sebagian dari mereka memilih menggunakan task runner (gulp,grunt, dan lainnya), sisanya lebih memilih menggunakan test command yang sudah disediakan oleh npm.

Tapi, itu semuanya tergantung pada kamu sendiri ingin memilih yang mana.

Tanpa harus berlama-lama lagi mari kita lanjutkan ke inti artikel ini.

Step by Step Integrasikan TypeScript dengan Gulp Task Runner

  • Initialize project
$ npm init
  • Install devDependencies, gulp dan typescript.
$ npm install -D gulp gulp-typescript typescript
  • Membuat file config untuk gulp Gulpfile.js di root directory project, disini saya menggunakan vim sebagai text editornya.
$ vim Gulpfile.js
  • Membuat task di Gulpfile.js
const { src, dest, watch } = require('gulp'),
    gulpTypeScript = require('gulp-typescript');

const compile = {
    scripts(cb) {
        return src(['./src/ts/*.ts'])
            .pipe(gulpTypeScript({
                // konfigurasi typescript ada disini
                noImplicitAny: true,
                module: 'es6',
                target: 'es5',
            }))
            .pipe(dest('assets/scripts/'))
        cb();
    }
}

exports.default = function() {
    watch(['./src/ts/*.ts'], compile.scripts);
}
  • Menambahkan target file yang ingin di compile ke javascript.
$ mkdir -p src/ts/
$ touch src/ts/main.ts
  • Sekarang saatnya untuk testing, mari kita isi file main.ts dengan kode typescript sederhana seperti dibawah ini.
document.addEventListener("DOMContentLoaded", () => {
    const simpleAlert = (message: string, element: any) => {
        element.addEventListener("click", () => {
            alert(message);
        });
    }
    simpleAlert("This is a simple alert", document.querySelector("#trigger"));
})
  • Disini saya menggunakan typeScript sebagai frontend, saya membutuhkan file ber extension .html, jadi saya akan membuat file index.html.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <button id="trigger">Click Me</button>
    </div>
    <script src="assets/scripts/main.js"></script>
</body>
</html>
  • Sekarang kita jalankan project sederhana yang sudah kita buat.
    Test Proyek Simple
    Test Proyek Simple

Oke mungkin itu saja yang saya bisa sampaikan, terimakasih.

comments powered by Disqus

Post Navigation