调试涉及匿名对象的不清楚的打字稿错误的最佳方法是什么?

时间:2019-06-10 22:53:59

标签: reactjs typescript next.js

我正在尝试将Typescript集成到现有的Next.js项目中,并收到此错误,目前尚不清楚它的语法错误。

$ tsc & PORT=3000 node --max-old-space-size=4096  server.ts
/Users/lassiter.gregg/code/candidco-web/lib/contentful/factory.ts:3
interface ContentfulAsset {
          ^^^^^^^^^^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:718:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/lassiter.gregg/code/candidco-web/lib/contentful/fetchLandingPages.ts:1:16)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
    at Module.load (internal/modules/cjs/loader.js:641:32)
    at Function.Module._load (internal/modules/cjs/loader.js:556:12)
    at Module.require (internal/modules/cjs/loader.js:681:19)
    at require (internal/modules/cjs/helpers.js:16:16)
    at Object.<anonymous> (/Users/lassiter.gregg/code/candidco-web/lib/contentful/index.ts:4:27)
    at Module._compile (internal/modules/cjs/loader.js:774:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
error Command failed with exit code 1.

我已经搜索并重构了它,它可以在其他项目中使用。我只是对为什么它会引发语法错误感到困惑。

这是/fetchlandingpages.ts

const assets = require('./factory.ts').ContentfulAssetFactory;
const lps = require('./factory.ts').LandingPageFactory;
const client = require('./client');

const LANDING_PAGE_CONTENT_TYPE_ID = 'campaignLandingPage';

module.exports = async () => {
  const entries = await client.getEntries({
    content_type: LANDING_PAGE_CONTENT_TYPE_ID,
  });

  const linkedAssets = await entries.includes.Asset.map((asset) =>
    assets.create(asset.fields)
  );

  const items = entries.items.map((item) =>
    lps.create(item.fields, linkedAssets)
  );

  return items;
};

这是有内容的/index.ts

const contentfulClient = require('./client');
const fetchArticles = require('./fetchArticles');
const fetchLegal = require('./fetchLegal');
const fetchLandingPages = require('./fetchLandingPages.ts');

module.exports = {
  contentfulClient,
  fetchArticles,
  fetchLegal,
  fetchLandingPages,
};

这是factory.ts:

interface ContentfulAsset {
    id: string;
    contentType: string;
    url: string;
    title: string;
  }

class ContentfulAssetFactory {
  static create(asset: ContentfulAsset) {
      return {
        id: asset.id,
        contentType: asset.contentType,
        url: asset.url,
        title: asset.title
      }
  }
}


interface LandingPage {
  campaignTitle: string;
  promoCode: string;
  template: string;
  pageImages: Array<ContentfulAsset> | null;
  ctaPrimary: Object;
  ctaPrimaryButtonText: string;
  ctaPrimaryHyperlink: string;
  ctaAlt1: Object;
  ctaAlt1Hyperlink: string;
  ctaAlt1TextColor: string;
  ctaAlt1BackgroundColor: string;
}

class LandingPageFactory {
  static create(page: LandingPage, assets: Array<ContentfulAsset>) {
    // const pageImgs = page.pageImages.map(asset => {
    //   assets.find(item => {
    //     if (item.sys.id === asset.sys.id) {

    //     }
    //   })
    // })

    const lp = {
      campaignTitle: page.campaignTitle,
      promoCode: page.promoCode,
      template: page.template,
      ctaPrimary: page.ctaPrimary,
      ctaPrimaryButtonText: page.ctaPrimaryButtonText,
      ctaPrimaryHyperlink: page.ctaPrimaryHyperlink,
      ctaAlt1: page.ctaAlt1,
      ctaAlt1Hyperlink: page.ctaAlt1Hyperlink,
      ctaAlt1TextColor: page.ctaAlt1TextColor,
      ctaAlt1BackgroundColor: page.ctaAlt1BackgroundColor,
      pageImages: assets
    }
      return lp
  }
}

export {
  ContentfulAsset,
  ContentfulAssetFactory,
  LandingPage,
  LandingPageFactory
}

我不希望出现语法错误。

0 个答案:

没有答案