Cara Install TypeScript dengan npm dan Cek Versinya

TypeScript adalah package npm bernama typescript. Instal ke dalam proyekmu dan cek apakah sudah bekerja:

npm install --save-dev typescript
npx tsc --version

Version 7.0.2

Package ini menyediakan perintah tsc, yaitu compiler TypeScript. Kamu butuh Node.js dan npm (yang sudah ikut terpasang bersama Node.js) untuk menginstalnya; unduh Node.js dari nodejs.org atau dari package manager sistemmu, lalu cek dengan node --version.

Untuk mencoba TypeScript, kamu tidak perlu menginstal apa pun. Blok ini bisa kamu compile dan jalankan langsung di browser:

function add(a: number, b: number): number {
    return a + b;
}

console.log(`2 + 3 = ${add(2, 3)}`);

Menginstal TypeScript di Proyek

Cara instalasi yang direkomendasikan adalah lokal, sebagai dev dependency proyek:

mkdir hello-ts
cd hello-ts
npm init -y
npm install --save-dev typescript

npm install --save-dev typescript (bentuk singkatnya npm i -D typescript) menaruh compiler di node_modules dan mencatatnya di package.json:

{
    "devDependencies": {
        "typescript": "^7.0.2"
    }
}

Ini adalah dev dependency karena hanya dibutuhkan untuk build kode, bukan untuk menjalankannya. Siapa pun yang melakukan clone proyek ini dan menjalankan npm install akan mendapat versi compiler yang sama.

Untuk menjalankan compiler lokal, tambahkan npx di depannya, yang mencari perintah di node_modules/.bin:

npx tsc --version

Di dalam script package.json, kamu bisa menulis tsc tanpa npx, karena npm menambahkan node_modules/.bin ke PATH untuk script:

{
    "scripts": {
        "build": "tsc",
        "typecheck": "tsc --noEmit"
    }
}

Lalu npm run build melakukan compile, dan npm run typecheck memeriksa tipe tanpa menulis file apa pun.

Mengecek Versi TypeScript

npm ls typescript

hello-ts@1.0.0 /home/ana/hello-ts
└── typescript@7.0.2

Kalau npx tsc --version dan tsc --version mencetak versi yang berbeda, artinya proyek punya compiler sendiri dan compiler global-nya lebih lama atau lebih baru. Versi milik proyeklah yang menentukan build-nya.

Menginstal TypeScript Secara Global

Instalasi global memberimu perintah tsc di setiap terminal, tanpa npx:

npm install -g typescript
tsc --version

Di macOS dan Linux, ini bisa gagal dengan error izin EACCES kalau Node.js diinstal untuk seluruh sistem. Menginstal Node.js lewat version manager seperti nvm atau fnm menghindari masalah itu, dan sudo npm install -g tidak direkomendasikan.

Pakai perintah global untuk eksperimen cepat. Untuk proyek sungguhan, tetap simpan instalasi lokal juga: dengan begitu package.json mencatat versinya, dan update compiler global tidak bisa mengubah cara build proyekmu.

Menginstal dengan pnpm, Yarn, atau Bun

Setiap package manager JavaScript menginstal package yang sama:

pnpm add -D typescript
yarn add -D typescript
bun add -d typescript

Jalankan compiler dengan pnpm tsc, yarn tsc, atau bunx tsc.

Membuat tsconfig.json dengan tsc --init

File tsconfig.json menandai sebuah folder sebagai proyek TypeScript dan menyimpan opsi compiler. Buat satu:

npx tsc --init

Created a new tsconfig.json

You can learn more at https://aka.ms/tsconfig

File yang dihasilkan (TypeScript 7) mengaktifkan strict dan beberapa pemeriksaan lain, memakai "module": "nodenext" dan "target": "esnext", serta punya baris berkomentar untuk rootDir dan outDir. Hapus tanda komentar pada kedua baris itu agar compiler membaca dari src dan menulis ke dist:

{
    "compilerOptions": {
        "rootDir": "./src",
        "outDir": "./dist",
        "module": "nodenext",
        "target": "esnext",
        "types": [],
        "strict": true
    }
}

Itu tampilan yang dipersingkat; file aslinya punya lebih banyak opsi, masing-masing dengan komentar. Halaman tsconfig menjelaskan fungsinya. Menjalankan npx tsc --init lagi di folder yang sama akan gagal dengan error TS5054: A 'tsconfig.json' file is already defined, jadi perintah ini tidak pernah menimpa pengaturanmu.

Compile File Pertamamu

Buat src/index.ts:

function greet(name: string): string {
    return `Hello, ${name}!`;
}

const names = ["Ada", "Grace", "Linus"];
for (const name of names) {
    console.log(greet(name));
}

Lalu compile dan jalankan:

npx tsc
node dist/index.js

Hello, Ada!
Hello, Grace!
Hello, Linus!

npx tsc tanpa argumen membaca tsconfig.json, memeriksa tipe setiap file yang disertakannya, dan menulis hasilnya ke dist. Dengan pengaturan hasil generate tadi, kamu mendapat index.js ditambah index.d.ts (deklarasi tipe) dan file .map (source map) untuk masing-masing file.

Dua hal yang perlu diketahui tentang hasilnya:

• Secara default, error tipe tidak menghentikan output. tsc melaporkan error-nya, keluar dengan kode bukan nol, dan tetap menulis JavaScript-nya. Atur "noEmitOnError": true agar tidak ada yang ditulis selama masih ada error.
• Kalau ada tsconfig.json, jangan kirim nama file. npx tsc src/index.ts gagal dengan error TS5112: tsconfig.json is present but will not be loaded if files are specified on commandline. Jalankan npx tsc saja, atau tambahkan --ignoreConfig kalau kamu memang ingin compile satu file dengan pengaturan default.

Watch Mode

--watch (singkatnya -w) membuat compiler terus berjalan dan melakukan compile ulang setiap kali ada file yang berubah:

npx tsc --watch

06:28:22 AM - Starting compilation in watch mode...

06:28:22 AM - Found 0 errors. Watching for file changes.

Biarkan terbuka di terminal di samping editormu. Hentikan dengan Ctrl+C.

Menginstal Versi TypeScript Tertentu

Tambahkan versinya setelah @:

npm install --save-dev typescript@7.0.2   # an exact version
npm install --save-dev typescript@6       # the newest 6.x
npm install --save-dev typescript@latest  # the newest stable release
npm install --save-dev typescript@next    # nightly builds of the next version

TypeScript 6 adalah versi terakhir yang compiler-nya ditulis dalam JavaScript. Beberapa tool yang memanggil JavaScript API milik compiler masih membutuhkannya; halaman TypeScript 7 membahas hal itu sekaligus cara upgrade-nya.

Pengaturan Editor

VS Code sudah punya dukungan TypeScript bawaan: buka file .ts dan kamu langsung mendapat garis bawah error, autocompletion, tipe saat hover, dan rename tanpa menginstal apa pun. Untuk kecepatan TypeScript 7 di editor, tim TypeScript merilis extension khusus yang membuat VS Code memakai language server TypeScript 7 yang native. WebStorm dan IDE JetBrains lainnya mendukung TypeScript langsung, sedangkan Neovim, Vim, Emacs, Zed, dan Sublime Text memakai language server TypeScript lewat dukungan LSP mereka.

Error Instalasi yang Umum

This is not the tsc command you are looking for. Kamu menjalankan npx tsc di folder yang belum ada TypeScript-nya, dan npx mengambil package usang yang kebetulan bernama tsc. Instal package yang benar dengan npm install --save-dev typescript.

tsc: command not found, atau 'tsc' is not recognized as an internal or external command di Windows. TypeScript tidak terinstal secara global, atau folder npm global tidak ada di PATH-mu. Pakai npx tsc di proyek yang punya instalasi lokal, atau instal secara global lalu buka terminal baru.

error TS2591: Cannot find name 'process' (atau require; __dirname menghasilkan TS2304). Tipe untuk API bawaan Node.js ada di package terpisah. Instal dengan npm install --save-dev @types/node, lalu tambahkan "types": ["node"] ke compilerOptions: TypeScript 7 tidak lagi memuat semua package @types yang terinstal secara otomatis.

error TS5011: The common source directory of 'tsconfig.json' is './src'. Filemu ada di src dan kamu mengatur outDir tetapi tidak rootDir. Tambahkan "rootDir": "./src".

error TS1295: ECMAScript imports and exports cannot be written in a CommonJS file under 'verbatimModuleSyntax'. npm init -y menulis "type": "commonjs" ke dalam package.json, sehingga konfigurasi dari tsc --init ("module": "nodenext" dengan verbatimModuleSyntax) memperlakukan setiap file .ts sebagai CommonJS, tempat import dan export tidak diizinkan. Ubah menjadi "type": "module", dan tulis import relatif dengan ekstensi .js: import { add } from "./math.js".