TypeScript - איך להשתמש בכמה קבצי tsconfig ב-VS Code?

אני משתמש ב-Visual Studio Code ויש לי מבנה פרויקט די נפוץ:

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

שני קובצי ה-tsconfig מכילים הגדרות שונות (למשל, זה שבתיקייה client/ מציב יעד ES5, וזה שבתיקייה server/ מציב יעד ES6). שים לב שאין קובץ tsconfig בתיקיית השורש.

הבעיה היא שאני רוצה שהתיקייה המשותפת תיכלל בשני הפרויקטים. אני לא יכול לעשות זאת באמצעות tsconfig כי האפשרות exclude לא מאפשרת לי לכלול תיקייה שנמצאת ברמה גבוהה יותר מה-tsconfig.json, ובהתאם ל-files אני צריך לעדכן כל הזמן את רשימת הקבצים כי זה לא תומך בתבניות גלובליות.

שים לב שאני יכול לקמפל בסדר על ידי הוספת התיקייה המשותפת ל-tsc, מה שאני רוצה הוא שה-IDE של Visual Studio Code יזהה את הקוד המשותף עבור אינטליסנס וכו'.

האם האפשרות היחידה היא לחכות ל-filesGlob?

תשובה #1

בימים אלו זה הרבה יותר קל מכיוון של-vscode יש תמיכה טובה יותר לכך.

אתה יכול להשתמש במבנה התיקיות הזה כך שכל הקוד יהיה עצמאי:

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

לאחר מכן הן ב-backend והן ב-frontend tsconfig.json:

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

כדי לאפשר גישה לקוד המשותף לדוגמה:

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

תשובה ישנה

השתמש בקובץ tsconfig.json אחד עבור השורש. ואז הרחב אותו עבור כל פרויקט (backend tsconfig.server.json, frontend tsconfig.webpack.json).

• שורש tsconfig.json include: ['src'] כדי להבטיח שכל הקבצים ייבדקו טיפוסית ב-IDE
• Backend tsconfig.server.json exclude: ['src/app'] את קבצי ה-frontend
• Frontend : tsconfig.webpack.json exclude: ['src/server'] את קבצי ה-backend

מבנה תיקיות

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

קבצי תצורה

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"
  ]
}

עוד

שיעור לדוגמה (על ידי אני)

תשובה #2

כפי שאחרים ציינו, התשובה הקיימת אינה פותרת את הבעיה אם לחזית האפליקציה ולאחורי שלה יש סוגים שונים - שזה כמעט תמיד המקרה, כיוון שקוד החזית תומך ב-DOM (ולא בספריית הסטנדרט של node.js) בעוד שקוד האחורי תומך בספריית הסטנדרט של node.js (ולרוב לא ב-DOM).

קיום קובץ tsconfig.json ברמה עליונה יהווה משמעות לכך שקוד dom יוצג כטעויות בקוד פרונטאנד (אם dom הוא ספרייה) או שקוד dom יותר בקוד בקאנד (אם dom לא כלול).

הנה פתרון עובד:

מבנה תיקיות

הפרויקטים שלנו נוטים להיות 'בצד השרת כברירת מחדל' עם תיקייה ספציפית עבור קוד הצד הקדמי.

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

Backend tsconfig.json

זה בדרך כלל די מינימלי. אנחנו משתמשים ב-jest לבדיקות וב-es2019 JS stdlib.

{
  "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

זה מיועד ל-Svelte אבל יעבוד בצורה דומה במסגרת ישנות יותר. החזית כוללת סוגים שונים כי היא תומכת בקבצי .svelte וב-dom

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

כלים ספציפיים לפיתוח צד לקוח

הגדרת Rollup להשתמש בקובץ tsconfig נפרד:

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

תשובה #3

ענהתי על זה כאן: תשובת ההרחבה של tsconfig

העיקר של התשובה:

אתה יכול לעשות זאת על ידי הרחבת קובץ tsconfig.json הבסיסי שלך:

סיומת tsconfig

פשוט אל תחריג תיקיות בקובץ tsconfig.json הבסיסי ו-TypeScript אמור להיות מסוגל לפתור עבורך את ההגדרות שלך (יודע שזה נכון כאשר משתמשים ב-node_modules/@types, או במודול typings)

לדוגמה:

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
   }
}