Beranda >

Cara Install Typescript dengan Yarn atau NPM

Cara Install Typescript dengan Yarn atau NPM

cara install typescript

Setelah di tutorial typescript sebelumnya kita telah mengenal apa itu typescript , di tutorial kali ini kita akan mempelajari cara install typescript dengan menggunakan yarn atau NPM . Seperti yang telah kita ketahui sebelumnya jika typescript sendiri merupakan subset dari javascript sehingga ketika kita akan melakukan penginstallan typescript ini kemungkinan requirement yang perlu kalian persiapkan hampir sama ketika kalian akan melakukan penginstallan javascript. Sebenernya yang akan kita lakukan penginstallan pada tutorial ini adalah compiler typescript dimana compiler ini yang akan bekerja untuk mengcompile file typescript dengan extensi .ts ke dalam file javascript sehingga kode yang telah kalian buat akan dapat berjalan di browser. Sehingga dengan kata lain typescript ini hanya akan berjalan atau digunakan saat proses development saja, sedangkan saat di production yang akan di jalankan adalah file javascript hasil compile lan dari compiler.

Cara Install Typescript

Ada dua cara utama untuk menginstal TypeScript. Yang pertama adalah dengan menggunakan package manager NPM (Node Package Manager ) atau Yarn dan yang kedua adalah melalui visual studio marketplace . Untuk tutorial kali ini kita akan membahasa cara instal typescript dengan menggunakan NPM atau Yarn . Namun sebelum melakukan proses penginstallan typescript kalian harus mempersiapkan requirement yang kalian butuhkan seperti Node Js, NPM atau Yarn dll. Kalian juga harus menginstall text editor pada komputer kalian . Untuk text editor sendiri saya menyarankan agar kalian menginstall Visual Studio Code dikarenakan semenjak versi 2019 keatas visual studio code sudah dilengkapi dengan TypeScript.

Berikut ini adalah langkah-langkah menginstall TypeScript :

1. Install Node.js

Langkah Pertama yang perlu kalian lakukan sebelum melakukan installasi TypeScript adalah menginstall Node.js . Namun, pada artikel kali ini saya mengasumsikan bahwa kalian sudah memiliki installasi Node.js pada komputer kalian masing-masing. Jika belum kalian dapat mengikuti tutorial saya tentang Cara Install Node js .

2. Install Package Manager

Langkah selanjutnya yaitu menginstall package manager seperti NPM atau Yarn . Kalian dapat memilih salah satu sesuai dengan kebiasaan kalian. Namun saya lebih menyarankan untuk menggunakan Yarn.

3. Install Visual Studio Code

Langkah selanjutnya yaitu menginstall text editor . Pada tutorial kali ini saya menyarankan anda untuk menginstall Visual Studio Code dikarenakan text editor ini mempunyai banyak extension – extension yang dapat membantu kalian dalam proses penulisan kode kalian nantinya.

4. Membuat Project Baru

Pertama silakan buat sebuah folder baru kemudian silakan buka terminal di visual studio code kalian atau kalian juga bisa menggunakan CMD kalian bagi pengguna windows.

Untuk membuat project baru dengan menggunakan NPM kalian dapat menjalankan perintah berikut ini pada terminal atau CMD kalian :

npm init

Atau bagi kalian pengguna package manager Yarn kalian dapat menjalankan perintah berikut untuk membuat project baru :

yarn init

Jika muncul dialog pertanyaan cukup klik enter saja sampai proses nya selesai. Jika proses ini berhasil maka akan terbentuk sebuah file baru dengan nama package.json pada folder kalian.

3. Install TypeScript

Setelah kita berhasil membuat sebuah project baru dengan menggunakan NPM atau YARN maka langkah selanjutnya adalah menginstall Typescript nya.

Bagi pengguna NPM ketikkan perintah berikut pada CMD atau Terminal kalian untuk memulai proses installasi typescript :

npm install -g typescript

Sedangkan bagi pengguna Yarn ketikkan perintah berikut ini untuk memulai proses installasi typescript :

yarn add global typescript

Selanjutnya cek versi dari typescript yang telah kalian install untuk memastikan jika typescript sudah benar-benar terinstall dan tidak terjadi kegagalan saat proses installasi tadi. Untuk melihat versi dari typescrypt dapat menggunakan perintah berikut ini :

node_modules.bin\tsc -v

4. Install Nodemon

Langkah selanjutnya lakukan installasi nodemon . Nodemon disini nanti akan berguna ketika kita melakukan perubahan code pada aplikasi typescript yang kita buat dimana nantinya aplikasi yang kita buat akan di restart secara otomatis oleh nodemon ini sehingga kita akan selalu mendapatkan tampilan hasil dari code yang terupdate. Dengan adanya nodemon kita tidak perlu repot-repot merestart aplikasi kita setiap ada perubahan kode .

Bagi pengguna NPM ketikkan perintah berikut pada CMD atau Terminal kalian untuk memulai proses installasi nodemon :

npm install -g nodemon

Sedangkan bagi kalian pengguna YARN , kalian dapat mengetikkan perintah berikut ini untuk memulai proses installasi nodemon :

yarn add global nodemon

5. Edit file package.json

Setelah menginstall nodemon selanjutnya yang perlu kalian lakukan adalah menambahkan scribt berikut ini ke dalam file package.json kalian :

"scripts":{
    "tsc": "del build && tsc",
    "ts": "del build && tsc -w",
    "dev": "nodemon ./build/index.js"
  }

Sehingga akan menjadi seperti berikut ini

Edit file package.json typescript

6. Membuat file config pada typescript

Untuk membuat file config pada project typescript kalian dapat dilakukan dengan menggunakan perintah berikut ini :

node_modules.bin\tsc --init

Jika berhasil maka akan terbentuk sebuah file baru dengan nama tsconfig.json . Modify file tsconfig.json pada baris allowJs dan outDir menjadi seperti berikut ini :

 "allowJs": true, 
 "outDir": "./build", 

Sehingga akan menjadi seperti berikut ini :

install typescript npm

Sampai disini sebenarnya proses installasi Typescript serta konfigurasi kita telah selesai . Untuk selanjutnya kita akan mencoba membuat program sederhana “hello world” dengan typescript serta menjalankanya.

Membuat Program Sederhana Dengan Typescript

Setelah kalian menyelesaikan proses installasi dan konfigurasi typescript pada komputer kalian, selanjutnya kita akan mencoba membuat sebuah program sederhana menggunakan Typescript . Program yang akan kita buat hanya bertujuan untuk menampikan tulisan “hello world” saja. Berikut adalah langkah-langkah memulai belajar typescript yang pertama adalah :

1. Membuat file baru dengan nama index.ts

Untuk membuat sebuah file baru dengan extensi .ts , pertama-tama silakan masuk pada folder project typescript kalian di visual studio code. Setelah itu buat file baru dengan nama index.ts. Selanjutnya copykan sourcecode berikut ini pada file index.ts .

console.log("Hello World")

Kira-kira hasilnya akan menjadi seperti berikut ini :

install typescript yarn

2. Build File index.ts

Seperti yang telah kita ketahui jika untuk menjalankan typescript kita perlu membuild file index.ts ke dalam file .js , maka sebelum menjalankan program yang telah kita buat tadi kita perlu membuild file index.ts .

Bagi pengguna NPM kalian dapat menjalankan perintah berikut untuk melakukan proses build file index.ts :

npm ts

Sedangkan bagi pengguna Yarn kalian dapat menjalankan perintah berikut ini untuk membuild file index.ts :

yarn ts

Dari hasil perintah diatas maka akan didapati sebuah folder baru pada project kalian dengan nama build yang didalamnya ada file index.js hasil dari compile file index.ts .

Membuild file typescript

3. Menjalankan Scribt Program Typescript

Langkah terakhir adalah menjalankan program typescript yang telah kita buat. Untuk menjalankan scribt program typescript yang telah kita buat sebelumnya silakan buka terminal baru pada visual studio code kalian .

Bagi pengguna NPM kalian dapat menjalankan perintah berikut untuk menjalankan scribt program kalian :

npm run dev

Sedangkan bagi pengguna Yarn kalian dapat menjalankan perintah berikut ini untuk menjalankan program kalian :

yarn dev

Jika tidak ada error maka kalian akan mendapati hasil seperti berikut ini :

Cara Install Typescript dengan Yarn atau NPM
Menjalankan Typescript

Ok selanjutnya silakan modifikasi scribt program pada file index.ts menjadi seperti berikut ini :

console.log("Belajar Typescript Kodekreasi")

Maka secara otomatis hasil dari scribt yang telah kita modifikasi akan langsung ditampilkan pada console seperti berikut ini :

Menggunakan Nodemon Pada Typescript
Menggunakan Nodemon Pada Typescript

Hal itu dikarenakan kita telah menginstall nodemon pada project kita sehingga secara otomatis perubahan dari program kita akan langsung ditampilkan tanpa kita perlu menjalankan ulang.

Sekian artikel dari saya kali ini tentang ” Cara Install Typescript dengan Yarn atau NPM “ untuk tutorial selanjutnya saya akan segera buat yang tentunya masih seputar typescript.

SHARE

Postingan Lainnya

profil
Fullstack engineer
cara install typescript

Cara Install Typescript dengan Yarn atau NPM

Setelah di tutorial typescript sebelumnya kita telah mengenal apa itu typescript , di tutorial ka .....

profil
Fullstack engineer
apa itu typescript

Tutorial Typescript 1 – Mengenal Apa Itu Typescript

Hai kembali lagi di blog saya kodekreasi.com . Di tutorial typescript kali ini kita terlebih dahu .....

profil
Fullstack engineer
apa itu javascript

Apa Itu Javascript dan Fungsinya

Hai kembali lagi di kodekreasi.com, ditutorial kali ini kita akan mempelajari apa itu javascript .....

profil
Fullstack engineer
Cara Membuat Migration Laravel

Cara Membuat Migration Laravel – Tutorial Laravel 2

Hai kembali lagi di kodekreasi.com pada seri belajar laravel 9 . Pada tutorial sebelumnya kita te .....