Visual Studio Code ile TypeScript Kurulumu

Visual Studio Code (VSCode), TypeScript geliştirme için mükemmel destek sağlayan güçlü ve popüler bir kod düzenleyicisidir. Bu kılavuz, VSCode'da TypeScript'i kurma adımlarında size yol gösterecek ve etkili bir şekilde kodlamaya başlamak için ihtiyacınız olan her şeye sahip olmanızı sağlayacaktır.

Visual Studio Code'u Yükleme

Visual Studio Code'u henüz yüklemediyseniz şu adımları izleyin:

1. resmi VSCode web sitesine gidin.
2. İşletim sisteminize uygun yükleyiciyi indirin.
3. Yükleyiciyi çalıştırın ve kurulumu tamamlamak için ekrandaki talimatları izleyin.

Node.js ve npm kurulumu

TypeScript, Node.js gerektiren npm (Node Paket Yöneticisi) aracılığıyla yönetilir. Node.js ve npm'yi yüklemek için:

1. resmi Node.js web sitesini ziyaret edin.
2. Npm'i de içeren Node.js'nin LTS sürümünü indirin ve kurun.
3. Kurulumu doğrulamak için bir terminal açın ve Node.js ve npm sürümlerini kontrol etmek için node -v ve npm -v komutlarını çalıştırın.

TypeScript'i Yükleme

Node.js ve npm kurulu olduğunda artık TypeScript'i global olarak kurabilirsiniz. Bir terminal açın ve aşağıdaki komutu çalıştırın:

npm install -g typescript

Bu komut TypeScript'i global olarak kurar ve sisteminizin herhangi bir yerinden TypeScript dosyalarını derlemek için tsc komutunu kullanmanıza olanak tanır.

Bir TypeScript Projesi Kurma

Yeni bir TypeScript projesi başlatmak için şu adımları izleyin:

1. Projeniz için yeni bir dizin oluşturun ve içine gidin:

mkdir my-typescript-project
cd my-typescript-project

1. Yeni bir npm projesi başlatın:

npm init -y

1. TypeScript'i bir geliştirme bağımlılığı olarak yükleyin:

npm install --save-dev typescript

1. Bir TypeScript yapılandırma dosyası oluşturun:

npx tsc --init

Bu komut, TypeScript derleyicisi için yapılandırma ayarlarını içeren proje dizininizde tsconfig.json dosyasını oluşturur.

TypeScript için VSCode'u Yapılandırma

VSCode yerleşik TypeScript desteğiyle gelir, ancak düzenleyiciyi yapılandırarak geliştirme deneyiminizi daha da geliştirebilirsiniz:

Projenizi Açma

TypeScript projenizi VSCode'da açın:

1. VSCode'u başlatın.
2. Dosya > Klasörü Aç... seçeneğini seçin ve proje dizininizi seçin.

TypeScript Uzantılarını Yükleme

VSCode, TypeScript desteğini kullanıma hazır olarak mükemmel bir şekilde sağlasa da gelişmiş işlevsellik için ek uzantılar yükleyebilirsiniz:

• TypeScript Uzantısı: TypeScript dil desteği ve IntelliSense, kod gezintisi ve daha fazlası gibi özellikler sağlar.
• Daha Güzel: Kod biçimlendirme için bir uzantı, tutarlı kod stilini garanti eder.

TypeScript Derleyicisini Yapılandırma

TypeScript derleyici ayarlarını yapılandırmak için tsconfig.json dosyasını açın. İşte bir yapılandırma örneği:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Bu yapılandırma hedef ECMAScript sürümünü ES6 olarak ayarlar, CommonJS modül biçimini belirtir, sıkı tip denetimini etkinleştirir ve çıktı dizinini ./dist olarak ayarlar. Ayrıca daha kolay hata ayıklama için kaynak haritaları da içerir.

TypeScript Kodu Yazma ve Çalıştırma

src dizininde yeni bir TypeScript dosyası oluşturun:

mkdir src
touch src/index.ts

index.ts: dosyasına biraz TypeScript kodu ekleyin:

const message: string = "Hello, TypeScript!";
console.log(message);

TypeScript kodunuzu derlemek için şunu çalıştırın:

npx tsc

Bu komut TypeScript dosyalarınızı derler ve JavaScript dosyalarını dist dizinine çıkarır.

Derlenmiş JavaScript kodunu çalıştırmak için şunu kullanın:

node dist/index.js

Çözüm

Visual Studio Code ile TypeScript kurulumu, gerekli araçları yüklemeyi, projenizi yapılandırmayı ve VSCode'un güçlü özelliklerini kullanmayı içeren basit bir işlemdir. Bu kılavuzu izleyerek, tam işlevli bir TypeScript geliştirme ortamına sahip olacak ve TypeScript ile sağlam uygulamalar oluşturmaya hazır olacaksınız.