typescript - vs-code'da birden fazla tsconfig dosyası nasıl kullanılır?

Visual Studio Code kullanıyorum ve oldukça yaygın bir proje yapısına sahibim:

├── client/
│   ├── tsconfig.json
├── shared/
├── server/
│   ├── tsconfig.json
├── project.json

İki tsconfig dosyası farklı ayarlara sahip (ör. client/ altındaki dosya ES5'i hedefliyor, server/ altındaki dosya ES6'yı hedefliyor). Kök dizinde herhangi bir tsconfig dosyası olmadığını unutmayın.

Sorun şu ki, paylaşılan dizinin her iki projeye de dahil olmasını istiyorum. Bunu tsconfig kullanarak yapamıyorum çünkü exclude seçeneği, tsconfig.json'dan daha üst bir dizinde olan bir klasörü dahil etmeme izin vermiyor ve files kullanırsam, glob desteği olmadığı için dosya listesini sürekli güncel tutmam gerekiyor.

Paynote edin, shared klasörü tsc’ye ekleyerek derlemeyi sorunsuz yapabiliyorum, istediğim şey Visual Studio Code IDE’nin shared kodu intellisense gibi özellikler için tanıması.

DosyalarGlob'u beklemek tek seçenek mi?

Cevap #1

Bu günlerde, vscode bunun için daha iyi destek sağladığından çok daha kolay.

Tüm kodun bağımsız olması için bu dizin yapısını kullanabilirsiniz:

├── frontend/
│   ├── src/
│   │   ├── <frontend code>
│   ├── package.json
│   ├── tsconfig.json
├── shared/
│   ├── package.json
├── backend/
│   ├── src/
│   │   ├── <backend code>
│   ├── package.json
│   ├── tsconfig.json

Sonra hem backend hem de frontend için tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "~shared/*": ["../shared/*"]
    },
    "rootDirs": [
      "./src",
      "../shared"
    ]
  }
}

Paylaşılan koda erişime izin vermek için örneğin:

import { Foo } from '~shared/foo';

Eski Cevap

Kök için tek bir tsconfig.json kullanın. Ve sonra her proje için bunu genişletin (backend tsconfig.server.json, frontend tsconfig.webpack.json).

  • Tüm dosyaların IDE'de tür kontrolünden geçirilmesini sağlamak için kök tsconfig.json include: ['src']
  • Backend tsconfig.server.json exclude: ['src/app'] frontend dosyaları
  • Frontend : tsconfig.webpack.json exclude: ['src/server'] backend dosyaları

Klasör Yapısı

├── src/
│   ├── app/    < Frontend
│   ├── server/ < Backend
│   ├── common/ < Shared
├── tsconfig.json
├── tsconfig.server.json
├── tsconfig.webpack.json

Yapılandırma Dosyaları

tsconfig.json
{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": [
    "src"
  ]
}

tsconfig.webpack.json
{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/app"
  ]
}

tsconfig.server.json
{
  "extends": "./tsconfig.json",
  "exclude": [
    "src/server"
  ]
}

Daha

Örnek ders (benim tarafımdan)

Cevap #2

Başka kişiler de belirttiği gibi, mevcut cevap, frontend ve backend farklı türlere sahipse problemi çözmüyor - ki bu neredeyse her durumda geçerlidir, çünkü frontend kodu DOM'u destekler (ve node.js standart kütüphanesini değil) whereas backend kodu node.js standart kütüphanesini destekler (ve genellikle DOM'u desteklemez).

En üst düzey bir tsconfig.json dosyasına sahip olmak, dom kodunun frontend kodunda hata olarak gösterileceği anlamına gelir (eğer dom bir kitaplıksa) veya dom kodunun backend kodunda izin verileceği anlamına gelir (eğer dom atlanmışsa).

İşte çalışan bir çözüm:

Klasör Yapısı

Projelerimiz genellikle 'varsayılan olarak backend' şeklindedir ve frontend kodu için özel bir klasör bulunur.

├── src/
│   ├── frontend/ < Frontend
│   │     ├── `tsconfig.json` (extends frontend framework defaults, eg Svelte)
│   ├── http/ < Backend
│   ├── events/ < Backend
├── tsconfig.json `tsconfig.json` (backend tsconfig)

Backend tsconfig.json

Bu genellikle oldukça minimaldir. Test için jest kullanıyoruz ve es2019 JS standart kütüphanesini kullanıyoruz.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "outDir": "dist",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "lib": ["es2019"],    
    "types": ["jest"],
  },
  "exclude": [
    "node_modules",
    "public/*",
    "src/frontend/*"
  ],
  "include": ["src/**/*"]
}

Frontend tsconfig.json

Bu Svelte içindir ama eski frameworklerde de benzer şekilde çalışır. Ön yüzde farklı türler vardır çünkü .svelte dosyalarını ve dom öğesini destekler.

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    // Default included above is es2017
    "target": "es2019",
  },
  "lib": ["es2019", "dom"],
}

Frontend özel araçlar

Rollup'ın ayrı bir tsconfig dosyası kullanmasını sağlamak:

export default {
  input: ...
  output: ...
  plugins: [
    ...
    typescript({
      tsconfig: "src/frontend/tsconfig.json",
      sourceMap: isDevelopment,
      inlineSources: isDevelopment,
    }),
    ...
  ],
   ...
};

Cevap #3

Buna burada cevap verdim: tsconfig uzantısı cevabı

Cevabın özü:

Bunu, temel tsconfig.json dosyanızı genişleterek yapabilirsiniz:

tsconfig uzantısı

sadece base tsconfig.json içinde dizinleri hariç tutma ve TypeScript tip tanımlarını senin için çözebilmelidir (bunu node_modules/@types veya typings modülünü kullanarak doğru olduğunu bil)

Örneğin:

configs/base.json:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

tsconfig.json:

{
  "extends": "./configs/base",
  "files": [
    "main.ts",
    "supplemental.ts"
  ]
}

tsconfig.nostrictnull.json:

{
   "extends": "./tsconfig",
   "compilerOptions": {
     "strictNullChecks": false
   }
}

İlgili makaleler