TypeScript ve tsconfig.json

Bu makale TypeScript ve tsconfig.json'u açıklamaktadır.

TypeScript'in temel rolünden başlayarak, tsconfig.json dosyasının bir projede nasıl işlediğini özel örneklerle açıklayacağız.

YouTube Video

TypeScript ve tsconfig.json

TypeScript, 'tiplerle birlikte JavaScript'tir.'. Ancak, TypeScript'i gerçek projelerde etkili bir şekilde kullanmak için tsconfig.json'u doğru anlamak ve kasıtlı olarak yapılandırmak gereklidir.

Neden TypeScript'e ihtiyacımız var?

Öncelikle TypeScript kullanmanın temel nedeni, hataları çalıştırmadan önce yakalama yeteneğidir..

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Bu kod JavaScript'te ancak çalışma zamanında hata verirken, TypeScript'te derleme zamanında tip hatası verir.

Bu 'erken tespit' geliştirme verimliliğini ve kalitesini büyük ölçüde artırır.

TypeScript nasıl çalıştırılır?

Prensip olarak, TypeScript olduğu gibi çalıştırılamaz. Bunu tsc (TypeScript Derleyicisi) ile JavaScript'e dönüştürmeniz gerekir..

1npm install -D typescript
2npx tsc --init

• Bu işlemi yaparak, tsconfig.json oluşturulur ve TypeScript projesinin davranışını tanımlayan ana dosya sağlanır.

tsconfig.json'un rolü nedir?

tsconfig.json, 'hangi dosyalar', 'hangi kurallarla' ve 'nasıl dönüştürüleceklerini' belirleyen bir yapılandırma dosyasıdır. İlk başta karmaşık görünebilir, ancak gerçekten önemli olan yalnızca birkaç ayardır.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Yalnızca bu ayarlarla, modern ve güvenli TypeScript geliştirme mümkündür.

target: Çıktı olarak verilecek JavaScript sürümü

target, çıktı olarak oluşturulan JavaScript'in özellik seviyesini belirler.

1"target": "ES2020"

Bununla, TypeScript ES2020'ye karşılık gelen JavaScript çıktısı üretir. Daha eski ortamlar için ES5 seçin; yalnızca en yeni ortamlar için ES2022 gibi sürümler tercih edin.

ESNext belirlerken

1"target": "ESNext"

• ESNext, en yeni mevcut JavaScript söz diziminin olduğu gibi çıktı olarak kullanılmasını belirtir. TypeScript, söz dizimini dönüştürmez ve bunun yerine yorumlamayı çalışma zamanındaki ortama (ör. Node.js veya tarayıcı) bırakır.

• Bu nedenle, yalnızca en güncel Node.js'i hedefliyorsanız veya Babel ya da bir paketleyici ile ayrıca dönüştürme yapıyorsanız ESNext uygundur. Öte yandan, çalışma zamanı ortamı en yeni söz dizimini desteklemiyorsa, bu çalışma zamanı hatalarına neden olabilir, bu yüzden dikkatli olunmalıdır.

module: Modül biçimini belirtin

module, modül biçimini belirtir.

1"module": "ESNext"

• ESNext, ön yüz ve modern Node.js ortamlarında standarttır.
• Yalnızca CommonJS'e ihtiyacınız varsa "CommonJS" seçin.

strict: Tip güvenliğini en üst düzeye çıkarın

strict, TypeScript'in güvenliğini en üst düzeye çıkaran bir anahtardır.

1"strict": true

• Bunu etkinleştirmek, belirsiz tipleri ve potansiyel hataları kapsamlı şekilde yakalar.

strict modu ve örtük any

strict etkinleştirildiğinde, TypeScript, tipi çıkarılamayan değişkenleri hata olarak sayar.

1function printValue(value) {
2	console.log(value);
3}

• Bu value değişkeni tanımlanırken tip bilgisine sahip değildir, bu nedenle TypeScript tipini belirleyemez. Sonuç olarak, any tipi örtük şekilde kullanılır ve bu strict modunda bir uyarı (hata) oluşturur.

1function printValue(value: number) {
2	console.log(value);
3}

• Bu şekilde tipi açıkça belirtirseniz, TypeScript 'bu değişken sadece sayılarla ilgilenir' olarak anlayabilir. TypeScript'te, tipin açıkça belirlenebilmesi , tipin atlanabilmesinden daha önemlidir.

include/exclude: Derlenecek dosyaların kontrolü

tsconfig.json'da, derlemeye hangi dosyaların dahil edileceğini ve hangilerinin hariç tutulacağını belirtebilirsiniz.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Bununla, yalnızca src altındaki dosyalar TypeScript tarafından yönetilecektir.
• exclude içinde belirtilen node_modules, include ile dahil edilmiş bir yolun altında olsa bile derlemeye dahil edilmez.

outDir: Çıktı dizinini belirtin

Derleme çıktılarınızın konumunu yönetmek için outDir belirtin.

1"outDir": "dist"

• Bununla, tüm derlenmiş sonuçlar dist klasörüne çıkarılacaktır. Pratikte, kaynak kodlarını ve derleme çıktısını ayırmak standart bir uygulamadır.

rootDir: Kaynak dizinini belirtin

rootDir, TypeScript'in kaynak kodun kökü olarak kabul ettiği dizini belirtir.

1"rootDir": "src"

• Bu ayar sayesinde, dosyaları çıkartırken TypeScript dizin yapısını src temelinde koruyacaktır. Örneğin, src/index.ts, dist/index.js olarak çıkartılır.

• rootDir içinde belirtilen dizin yapısı outDir'de aynen kopyalanacaktır.

esModuleInterop: CommonJS ve ES Modülleri Arasında Köprü

Sıradaki konu esModuleInterop.

1"esModuleInterop": true

• Etkinleştirildiğinde, CommonJS modüllerini güvenli bir şekilde import sözdizimi ile kullanabilirsiniz.

1import fs from "fs";

• Node.js kullanıyorsanız bu ayar neredeyse zorunludur.

noImplicitAny: Örtük 'any' tiplerini yasaklayın

tsconfig.json'da tip kontrollerini güçlendirmek de önemlidir.

1"noImplicitAny": true

• Bununla, örtük any tiplerini yasaklayabilirsiniz. Böylece, tip belirtmeyi unuttuğunuz yerleri güvenilir bir şekilde tespit edebilirsiniz.

Kullanılmayan kodları tespit için yapılandırma

Kullanılmayan kodları tespit etmeye yönelik ayarlar, bakımı kolaylaştırmak için de faydalıdır.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Bununla, gereksiz değişkenler ve argümanlar hemen uyarıyla işaretlenir.

lib: Kullanılabilen yerleşik API'leri tanımlayın

lib, TypeScript'in mevcut olduğunu varsaydığı standart API'leri belirten bir ayardır.

1"lib": ["ES2020", "DOM"]

• Bu ayarla, aşağıdaki tipler kullanılabilir olur:. ES2020 ile Promise, Map ve Set gibi modern özellikler kullanıma açılır. DOM ile, document, window ve HTMLElement gibi tarayıcı API'leri kullanılabilir olur.

Ön yüz geliştirmede DOM ekleyin; yalnızca Node.js projelerinde ise gereksiz global tiplerin dahil edilmemesi için DOM'u çıkarın.

moduleResolution: Modül bulma kuralları

moduleResolution, import ifadelerinde belirtilen modüllerin nasıl çözümleneceğini belirler.

1"moduleResolution": "Node"

İki ana seçenek şunlardır:.

• Node belirtirseniz, Node.js modül çözümleme kuralları kullanılır.
• Classic, eski ve TypeScript'e özgü bir yöntemdir ancak artık nadiren kullanılır.

Node.js veya bir paketleyici kullanıyorsanız, 'Node'u açıkça belirtmek güvenlidir.

Minimum, üretime hazır bir tsconfig.json

Şimdiye kadar öğrendiklerimize dayanarak, minimum ve üretime hazır bir tsconfig.json şöyle görünebilir:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Bu yapılandırma hem ön yüz hem de Node.js projeleri için güvenli bir temel sunar.

Özet: tsconfig.json bir 'kurallar kitabıdır'

tsconfig.json sadece bir yapılandırma dosyası değil, tüm projeye uygulanan bir 'kurallar kitabıdır'. tsconfig.json ile aşağıdakiler gibi önemli politikalar açıkça tanımlanır:.

• Tip güvenliği seviyesi.
• Ekibiniz için kodlama standartları.
• Gelecekteki hataların önlenmesi.

tsconfig.jsonu anladığınızda, yalnızca TypeScript yazmakla kalmayıp projelerinizi güvenli TypeScript kullanımı için tasarlayabileceksiniz.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video