TypeScript Kurulumu: npm ile Yükleme ve Sürüm Kontrolü

TypeScript, typescript adlı bir npm paketidir. Projenize kurun ve çalıştığını kontrol edin:

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

Version 7.0.2

Paket, TypeScript derleyicisi olan tsc komutunu sağlar. Kurmak için Node.js ve npm (Node.js ile birlikte gelir) gerekir; Node.js'i nodejs.org'dan veya sisteminizin paket yöneticisinden edinin ve node --version ile kontrol edin.

TypeScript'i denemek için hiçbir şey kurmanıza gerek yok. Bu blok tarayıcınızda derlenir ve çalışır:

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

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

TypeScript'i Bir Projeye Kurmak

Önerilen kurulum, projenin geliştirme bağımlılığı olarak yerel kurulumdur:

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

npm install --save-dev typescript (kısa hali npm i -D typescript) derleyiciyi node_modules içine koyar ve package.json dosyasına kaydeder:

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

Geliştirme bağımlılığıdır, çünkü yalnızca kodu derlemek için gerekir, çalıştırmak için değil. Projeyi klonlayıp npm install çalıştıran herkes aynı derleyici sürümünü alır.

Yerel derleyiciyi çalıştırmak için başına npx ekleyin; npx komutları node_modules/.bin içinde bulur:

npx tsc --version

package.json betiklerinde npx olmadan tsc yazabilirsiniz, çünkü npm betikler için node_modules/.bin klasörünü PATH değişkenine ekler:

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

Ardından npm run build derler, npm run typecheck ise hiçbir dosya yazmadan tipleri kontrol eder.

TypeScript Sürümünü Kontrol Etmek

npm ls typescript

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

npx tsc --version ve tsc --version farklı sürümler yazdırıyorsa, projenin kendi derleyicisi vardır ve global olan daha eski ya da daha yenidir. Projenin derlemesi için önemli olan, projenin sürümüdür.

TypeScript'i Global Olarak Kurmak

Global kurulum, npx olmadan her terminalde bir tsc komutu sağlar:

npm install -g typescript
tsc --version

macOS ve Linux'ta Node.js sistem geneline kurulduysa bu komut EACCES izin hatalarıyla başarısız olabilir. Node.js'i nvm veya fnm gibi bir sürüm yöneticisiyle kurmak bunu önler; sudo npm install -g önerilmez.

Global komutu hızlı denemeler için kullanın. Gerçek bir projede yerel kurulumu da tutun: böylece package.json sürümü kaydeder ve global derleyicinin güncellenmesi projenin nasıl derlendiğini değiştiremez.

pnpm, Yarn veya Bun ile Kurulum

Her JavaScript paket yöneticisi aynı paketi kurar:

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

Derleyiciyi pnpm tsc, yarn tsc veya bunx tsc ile çalıştırın.

tsc --init ile tsconfig.json Oluşturmak

Bir tsconfig.json dosyası, bir klasörü TypeScript projesi olarak işaretler ve derleyici seçeneklerini tutar. Bir tane oluşturun:

npx tsc --init

Created a new tsconfig.json

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

Oluşturulan dosya (TypeScript 7) strict ve birkaç ek kontrolü açar, "module": "nodenext" ve "target": "esnext" kullanır ve rootDir ile outDir için yorum satırına alınmış satırlar içerir. Derleyicinin src klasöründen okuyup dist klasörüne yazması için bu ikisinin yorumunu kaldırın:

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

Bu kısaltılmış bir görünüm; gerçek dosyada her biri yorumlu daha fazla seçenek var. Ne yaptıklarını tsconfig sayfası açıklıyor. Aynı klasörde npx tsc --init komutunu tekrar çalıştırmak error TS5054: A 'tsconfig.json' file is already defined hatasıyla başarısız olur, yani ayarlarınızın üzerine asla yazmaz.

İlk Dosyanızı Derlemek

src/index.ts dosyasını oluşturun:

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

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

Sonra derleyin ve çalıştırın:

npx tsc
node dist/index.js

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

Argümansız npx tsc, tsconfig.json dosyasını okur, dahil ettiği her dosyanın tipini kontrol eder ve çıktıyı dist klasörüne yazar. Oluşturulan ayarlarla her dosya için index.js ile birlikte index.d.ts (tip bildirimleri) ve .map dosyaları (source map'ler) elde edersiniz.

Çıktı hakkında bilinmesi gereken iki şey:

• Tip hataları varsayılan olarak çıktıyı durdurmaz. tsc hataları bildirir, sıfır olmayan bir kodla çıkar ve yine de JavaScript'i yazar. Hatalar varken hiçbir şey yazılmaması için "noEmitOnError": true ayarlayın.
• Bir tsconfig.json varken dosya adı vermeyin. npx tsc src/index.ts komutu error TS5112: tsconfig.json is present but will not be loaded if files are specified on commandline. hatasıyla başarısız olur. Düz npx tsc çalıştırın ya da gerçekten tek bir dosyayı varsayılan ayarlarla derlemek istiyorsanız --ignoreConfig ekleyin.

Watch Modu

--watch (kısaca -w) derleyiciyi çalışır halde tutar ve bir dosya değiştiğinde yeniden derler:

npx tsc --watch

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

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

Editörünüzün yanında bir terminalde açık bırakın. Ctrl+C ile durdurun.

Belirli Bir TypeScript Sürümünü Kurmak

Sürümü @ işaretinden sonra ekleyin:

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, derleyicisi JavaScript ile yazılmış son sürümdür. Derleyicinin JavaScript API'sini çağıran bazı araçlar hâlâ ona ihtiyaç duyar; bunu ve nasıl yükseltileceğini TypeScript 7 sayfası anlatıyor.

Editör Kurulumu

VS Code'da TypeScript desteği yerleşiktir: bir .ts dosyası açın, hiçbir şey kurmadan hata alt çizgileri, otomatik tamamlama, üzerine gelince tipler ve yeniden adlandırma elde edersiniz. Editörde TypeScript 7 hızı için TypeScript ekibi, VS Code'u yerel TypeScript 7 language server'ına geçiren ayrı bir eklenti yayınlıyor. WebStorm ve diğer JetBrains IDE'leri TypeScript'i kutudan çıktığı gibi destekler; Neovim, Vim, Emacs, Zed ve Sublime Text ise LSP desteği üzerinden bir TypeScript language server kullanır.

Sık Karşılaşılan Kurulum Hataları

This is not the tsc command you are looking for. TypeScript kurulu olmayan bir klasörde npx tsc çalıştırdınız ve npx tesadüfen tsc adını taşıyan, kullanımdan kaldırılmış bir paketi getirdi. Gerçek olanı npm install --save-dev typescript ile kurun.

tsc: command not found ya da Windows'ta 'tsc' is not recognized as an internal or external command. TypeScript global olarak kurulu değil veya global npm klasörü PATH üzerinde değil. Yerel kurulumu olan bir projede npx tsc kullanın ya da global kurup yeni bir terminal açın.

error TS2591: Cannot find name 'process' (veya require; __dirname ise TS2304 verir). Node.js'in kendi API'lerinin tipleri ayrı bir pakettedir. npm install --save-dev @types/node ile kurun, ardından compilerOptions içine "types": ["node"] ekleyin: TypeScript 7 artık kurulu her @types paketini otomatik olarak yüklemiyor.

error TS5011: The common source directory of 'tsconfig.json' is './src'. Dosyalarınız src içinde ve outDir ayarladınız ama rootDir ayarlamadınız. "rootDir": "./src" ekleyin.

error TS1295: ECMAScript imports and exports cannot be written in a CommonJS file under 'verbatimModuleSyntax'. npm init -y, package.json içine "type": "commonjs" yazar; bu yüzden tsc --init yapılandırması (verbatimModuleSyntax ile birlikte "module": "nodenext") her .ts dosyasını, import ve export kullanılamayan CommonJS olarak ele alır. Bunu "type": "module" olarak değiştirin ve göreli import'ları .js uzantısıyla yazın: import { add } from "./math.js".