Typescript full-stack projeleri icin proje dizin yapisi ve tsconfig dosyasi nasil olmali

typescript, project structure, project management

1042009.png

Ornek Proje Dizini

my-fullstack-project/
โ”œโ”€โ”€ node_modules/  // Ana proje iรงin global baฤŸฤฑmlฤฑlฤฑklar
โ”œโ”€โ”€ packages/
โ”‚   โ”œโ”€โ”€ backend/
โ”‚   โ”‚   โ”œโ”€โ”€ node_modules/  // Backend iรงin lokal baฤŸฤฑmlฤฑlฤฑklar
โ”‚   โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ controllers/
โ”‚   โ”‚   โ”‚   โ”œโ”€โ”€ models/
โ”‚   โ”‚   โ”‚   โ””โ”€โ”€ index.ts
โ”‚   โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ”‚   โ””โ”€โ”€ tsconfig.json  // Backend iรงin tsconfig
โ”‚   โ””โ”€โ”€ frontend/
โ”‚       โ”œโ”€โ”€ node_modules/  // Frontend iรงin lokal baฤŸฤฑmlฤฑlฤฑklar
โ”‚       โ”œโ”€โ”€ src/
โ”‚       โ”‚   โ”œโ”€โ”€ components/
โ”‚       โ”‚   โ”œโ”€โ”€ utils/
โ”‚       โ”‚   โ””โ”€โ”€ App.tsx
โ”‚       โ”œโ”€โ”€ public/
โ”‚       โ”œโ”€โ”€ package.json
โ”‚       โ””โ”€โ”€ tsconfig.json  // Frontend iรงin tsconfig
โ”œโ”€โ”€ package.json  // Ana proje package.json
โ”œโ”€โ”€ tsconfig.json  // Ana proje tsconfig (opsiyonel)
โ”œโ”€โ”€ lerna.json
โ””โ”€โ”€ README.md

ร–rnek tsconfig.json ฤฐรงerikleri

Ana Proje (Opsiyonel)

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "composite": true
  },
  "references": [
    { "path": "./packages/backend" },
    { "path": "./packages/frontend" }
  ]
}

Backend Proje

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts"]
}

Frontend Proje

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "jsx": "react",
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Bu yapฤฑ ve tsconfig.json dosyalarฤฑ, projenin ihtiyacฤฑna baฤŸlฤฑ olarak deฤŸiลŸtirilebilir. Ancak temel olarak bu yapฤฑ genellikle iลŸ gรถrรผr.

Sadece FrontEnd Proje Dizini

my-ts-project/
โ”œโ”€โ”€ node_modules/ // DฤฑลŸ paketlerin yรผklendiฤŸi klasรถr.
โ”œโ”€โ”€ src/ // Kaynak kodlarฤฑnฤฑzฤฑn olduฤŸu ana klasรถr.
โ”‚   โ”œโ”€โ”€ components/ // Reaktif bileลŸenler gibi UI bileลŸenlerini iรงerir.
โ”‚   โ”‚   โ”œโ”€โ”€ Button.tsx
โ”‚   โ”‚   โ””โ”€โ”€ Header.tsx
โ”‚   โ”œโ”€โ”€ utils/ // Yardฤฑmcฤฑ fonksiyonlar ve araรงlar.
โ”‚   โ”‚   โ””โ”€โ”€ helpers.ts
โ”‚   โ”œโ”€โ”€ services/ // API รงaฤŸrฤฑlarฤฑ gibi servisler.
โ”‚   โ”‚   โ””โ”€โ”€ api.ts
โ”‚   โ”œโ”€โ”€ models/ // Data modelleri veya interface'ler.
โ”‚   โ”‚   โ””โ”€โ”€ user.ts
โ”‚   โ”œโ”€โ”€ index.ts // Ana giriลŸ dosyasฤฑ.
โ”‚   โ””โ”€โ”€ App.ts // Uygulamanฤฑn ana bileลŸeni.
โ”œโ”€โ”€ dist/ // DerlenmiลŸ JavaScript kodunun saklandฤฑฤŸฤฑ dizin.
โ”œโ”€โ”€ public/ // Statik dosyalarฤฑn saklandฤฑฤŸฤฑ dizin.
โ”œโ”€โ”€ package.json // Proje baฤŸฤฑmlฤฑlฤฑklarฤฑnฤฑ ve script'leri iรงerir.
โ”œโ”€โ”€ tsconfig.json // TypeScript konfigรผrasyon dosyasฤฑ.
โ””โ”€โ”€ README.md // Proje hakkฤฑnda bilgiler.

Bu dizin yapฤฑsฤฑ, birรงok projede sฤฑklฤฑkla karลŸฤฑlaลŸฤฑlan bir yapฤฑdฤฑr ve geniลŸletilebilirlik ve modรผlerlik saฤŸlar. Ancak, her proje iรงin bu yapฤฑyฤฑ takip etmek zorunda deฤŸilsiniz. Projeye ve ihtiyacฤฑnฤฑza gรถre bu yapฤฑnฤฑn iรงeriฤŸi deฤŸiลŸebilir.

Last updated

Was this helpful?