it-swarm.dev

كيفية تكوين واجهات عمومية مخصصة (ملفات .d.ts) لـ TypeScript؟

لقد كنت أواجه هذه المشكلة منذ الساعات القليلة الماضية ، ولا يمكنني العثور على أي شيء على الإنترنت من شأنه أن يفسر هذا المفهوم البسيط بشكل واضح.

أنا أعمل حاليًا على مشروع ReactJS الذي يستخدم Webpack2 و TypeScript. كل شيء يعمل تمامًا بعيدًا عن شيء واحد - لا أستطيع إيجاد طريقة لنقل الواجهات التي كتبت نفسي في ملفات منفصلة بحيث تكون مرئية للتطبيق بالكامل.

لأغراض النماذج الأولية ، كان لدي في البداية واجهات معرّفة في الملفات التي تستخدمها ، لكن في النهاية بدأت في إضافة بعض ما كان مطلوبًا في فئات متعددة ، وهذا عندما بدأت جميع المشكلات. بغض النظر عن التغييرات التي أجريها على tsconfig.json وبغض النظر عن المكان الذي أضع فيه الملفات الخاصة بي IDE و Webpack ، يشتكي كلاهما من عدم القدرة على العثور على أسماء (Could not find name 'IMyInterface').

ها هي حالي tsconfig.json الملف:

{
  "compilerOptions": {
    "baseUrl": "src",
    "outDir": "build/dist",
    "module": "commonjs",
    "target": "es5",
    "lib": [
      "es6",
      "dom"
    ],
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ],
  "types": [
    "typePatches"
  ]
}

كما ترون ، يا tsconfig.json في جذر دليل المشروع ، كل المصدر موجود في ./src ، لقد وضعت عادتي .d.ts ملفات في ./typings وأدرجته في typeRoots.

اختبرت ذلك مع TypeScript 2.1.6 و 2.2.0 ولا يعمل.

تتمثل إحدى طرق الحصول على كل شيء في العمل في نقل دليل typings إلى src ثم import {IMyInterface} from 'typings/blah' لكن هذا لا يبدو لي الحق لأنه ليس شيئاً أحتاجه. أريد أن تكون هذه الواجهات متاحة "بطريقة سحرية" خلال طلبي.

تحرير: إليك عينة app.d.ts الملف:

interface IAppStateProps {
}

interface IAppDispatchProps {
}

interface IAppProps extends IAppStateProps, IAppDispatchProps {
}

هل أحتاج إلى export لهم أو ربما declare؟ آمل ألا أضطر إلى لفهم في مساحة اسم ؟!

46
Andris

"الواجهات المتاحة بطريقة سحرية" أو الأنواع العالمية محبطة للغاية ويجب تركها في معظمها للإرث. أيضًا ، يجب ألا تستخدم ملفات التعريف المحيطة (مثل d.ts ملفات) للرمز الذي تكتبه. وتهدف هذه إلى الوقوف في مكان الكود الخارجي غير الخاص بـ TypeScript (بشكل أساسي ملء أنواع TypeScript في كود js بحيث يمكنك دمجها بشكل أفضل مع javascript).

بالنسبة للكود الذي تكتبه ، يجب أن تستخدم ملفات عادي .ts لتحديد واجهاتك وأنواعك.

على الرغم من عدم تشجيع الأنواع العالمية ، فإن إجابتك هي أن هناك نوعين من ملفات .ts في TypeScript. هذه تسمى scripts و modules.

أي شيء في script سيكون عالميًا. لذلك إذا قمت بتحديد واجهاتك في برنامج نصي ، فسيتم توفيرها على مستوى العالم خلال التطبيق الخاص بك (طالما يتم تضمين البرنامج النصي في التجميع من خلال علامات ///<reference path=""> أو من خلال files:[] أو includes:[] أو الافتراضي **/*.ts في tsconfig.json.

نوع الملف الآخر هو "وحدة نمطية" ، وأي شيء في module سيكون خاصًا بالوحدة. إذا قمت بتصدير أي شيء من وحدة نمطية ، فستكون متاحة لوحدات أخرى إذا اختارت تلك الوحدات النمطية الأخرى استيرادها.

ما الذي يجعل ملف .ts "نصًا" أو "وحدة نمطية"؟ حسنًا .... إذا استخدمت import/export في أي مكان في الملف ، فسيصبح ذلك الملف "وحدة نمطية". إذا لم تكن هناك عبارات import/export فهي نص عالمي.

أظن أنك قد استخدمت import عن غير قصد أو export في إعلاناتك وجعلتها في وحدة نمطية ، والتي حولت جميع واجهاتك إلى الخصوصية داخل تلك الوحدة. إذا كنت تريد أن تكون عالمية ، فتأكد من أنك لا تستخدم بيانات الاستيراد/التصدير داخل ملفك.

98
dtabuenc