javascript - TS Lint Hatası; Tip X, tip 'IntrinsicAttributes & RefAttributes' ile atanamaz

Webpack kullanarak bir React ve TypeScript uygulaması üzerinde çalışıyorum ve React bileşenlerimin her biri için aynı hatayı alıyorum. Hata her zaman şöyle:

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

Şu iki gündür bir çözüm arıyordum. tsconfig.json veya webpack'imde bir sorun olabileceğini düşünüyorum - ikisi de aşağıdaki GitHub demo deposunda mevcut.

Örnek 1:

Diyelim ki bu bileşene sahibim:

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

Yukarıdaki bileşen için hata, children özelliği hakkında uyaracaktır: TS2322: Tür ''{ children: Element; }'' türü ''IntrinsicAttributes & RefAttributes<any>'' ile atanabilir değil.

Örnek 2

Diyelim ki bu bileşene sahibim:

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

Sonra hata bu iki prop hakkında şikayet ediyor: 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 Örnek Deposu: Kodu kendiniz mi çalıştırmak istiyorsunuz?

1. git clone https://github.com/TJBlackman/demo-tslint-error.git

2. cd demo-tslint-error

3. npm install

4. npm run dev

Bu hatalardan nasıl kaçınabilirim? Create React App TS paketleyicisini kullandığımda bu hataları almıyorum. Sadece bazı basit prop'ları geçirmek istiyorum!!

Cevap #1

Kendi tsconfig.json dosyanızda şunu kullanın:

"moduleResolution": "node"

Sorun, "module": "es6" kullanımının modül çözümleme stratejisinin klasik moduna geçmesine neden gibi görünmesidir. Bu oldukça rahatsız edici, çünkü bu durum dokümantasyonda tek tip olarak belirtilmemiştir (bunun AMD | System | ES2015 için olduğu belirtiliyor, ancak es6 için değil).

Sorunlardan kaçınmak için modül çözümleme stratejisini manuel olarak belirtmenizi tavsiye ederim:

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

Ayrıca bu değişikliği uygulamak için bir pull request oluşturdum: https://github.com/TJBlackman/demo-tslint-error/pull/1/commits/634ec9889096baca0676ddf3076c66e82addfdd8 (Github'da sliftist kullanıcısıyım).

Cevap #2

daha fazla bilgi için bu belgeleri okuyun

Modülün ne işe yaradığı hakkında doküman

Modül seçenekleri ve izin verilen değerler hakkında doküman

Webpack React temel yapılandırması hakkında doküman

module:"commonJS" kullan

Derlemek için, komut satırında bir modül hedefi belirtmeliyiz. Node.js için --module commonjs; require.js için --module amd kullanın