TS Lint Error; Тип X не может быть назначен типу IntrinsicAttributes & RefAttributes <any>

Question

Я работаю над приложением React и TypeScript, используя webpack, и получаю одну и ту же ошибку для каждого из моих компонентов React. Ошибка всегда такая:

Type X is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

Уже 2 дня ищу решение. Я думаю, что что-то не так в моем tsconfig. json или моем webpack - оба доступны в демонстрационном репозитории GitHub внизу.

Пример 1:

Скажем, у меня есть этот компонент:

export const Container = ({children}) => {
  return (
    <Container>
      {children}
    </Container>
  );
}

Ошибка для вышеуказанного компонента будет жаловаться на опору для детей: TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'.

Пример 2

Допустим, у меня есть этот компонент:

export const Title = ({text, color}) => {
  return (
    <h1 style={{color: color}}>{text}</h1>
  );
}

Затем ошибка жалуется на эти два реквизита: TS2322: Type '{ text: string; color: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any>'

tsconfig. json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Пример репозитория Github: Хотите запустить код самостоятельно?

1. git clone https://github.com/TJBlackman/demo-tslint-error.git
2. cd demo-tslint-error
3. npm install
4. npm run dev

Как избежать этих ошибок? Когда я использую бандлер Create React App TS, я не получаю этих ошибок. Я просто хочу передать несколько простых вещей !!

Answer 1

В вашем tsconfig. json используйте:

"moduleResolution": "node"

Проблема в том, что использование "module": "es6", по-видимому, приводит к изменению стратегии разрешения модуля на classi c. Это довольно раздражает, поскольку это не всегда упоминается в документации (они указывают, что это происходит для AMD | System | ES2015, но не es6).

Чтобы избежать проблем в I рекомендую вручную указать стратегию разрешения модуля:

tsconfig. json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "lib": ["es6", "dom"],
    "noImplicitThis": true,
    "strictNullChecks": true,
    "module": "es6",
    "target": "es6",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    // Explicitly force module resolution strategy to be node,
    //  to prevent "module": "es6" from changing it to classic.
    "moduleResolution": "node"
  },
  "include": ["../src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Я также создал запрос на перенос, чтобы применить это изменение: https://github.com/TJBlackman/demo-tslint-error/pull/1/commits/634ec9889096baca0676ddf3076c66e82addfdd8 (я sliftist на github).

Answer 2

для получения дополнительной информации прочтите эти документы

Do c о том, что делает модуль

Do c о допустимых параметрах и значениях модуля

Do c на webpack react basi c config

используйте module:"commonJS"

Для компиляции мы должны указать цель модуля в командной строке. Для Node.js используйте --module commonjs; для require. js используйте --module amd