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
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 :
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 :
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 .
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 :
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 :
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.
Rey
terimakasih mas, langsung work, sebelumnya ikut kelas online, tpi stuck dibagian build index.ts
setelah saya ikutin saran mas, langsung lancar, ternyata kesalahan di bagian penulisan script
saya pake :
“scripts”:{
“tsc”: “rm -rf build && tsc”,
“ts”: “rm -rf build && tsc -w”,
“dev”: “nodemon ./build/index.js”
}