屬性不上類型存在「DetailedHTMLProps，HTMLDivElement>」與之反應16

由於陣營16現在允許custom DOM attributes，我想利用這個在我的打字稿代碼：屬性不上類型存在「DetailedHTMLProps，HTMLDivElement>」與之反應16

import * as React from 'react'; 

<div className="page" size="A4"> 
</div>

但收到此錯誤信息：

錯誤TS2339：屬性「大小」不存在於類型 '詳細HTML詳細信息< HTMLAttributes < HTMLDivElement>，HTMLDivElement>'。

這thread建議做一個module augmentation，所以我想是這樣的：

import * as React from 'react'; 

declare module 'react' { 
    interface HTMLProps<T> { 
     size?:string; 
    }  
}

同樣的錯誤消息。

最後，我也試圖聲明page作爲一個新的HTML標籤：

declare global { 
    namespace JSX { 
    interface IntrinsicElements { 
     page: any 
    } 
    } 
} 

<page className="page" size="A4"> 
</page>

它擺脫了錯誤信息，但size屬性完全被忽略在編譯的代碼，我結束了：

<page className="page"> 
</page>

理想情況下，最後一個是我的首選解決方案。我想使用size自定義屬性以及page自定義標籤。

tsconfig.js

{ 
    "compilerOptions": { 
    "outDir": "build/dist", 
    "module": "esnext", 
    "target": "es5", 
    "lib": ["es6", "dom"], 
    "sourceMap": true, 
    "allowJs": true, 
    "jsx": "react", 
    "moduleResolution": "node", 
    "rootDir": "src", 
    "forceConsistentCasingInFileNames": true, 
    "noImplicitReturns": true, 
    "noImplicitThis": true, 
    "noImplicitAny": true, 
    "strictNullChecks": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "allowSyntheticDefaultImports": true, 
    "noUnusedLocals": false, 
    "noUnusedParameters": false, 
    "allowUnusedLabels": true, 
    "allowUnreachableCode": true 
    } 
}

來源

2017-09-14 Greg Forel

我不知道很多關於打字稿，但一個想法-might是stupid-，怎麼樣努力'數據size'？ – bennygenel

哇...它擺脫了我的錯誤，並編譯！是什麼讓你想到這個，爲什麼這個工作與諸如大小這樣的「非短跑」名字相反？你可以寫這個答案，以便我可以驗證嗎？ –

HTML支持數據 - *屬性類型的自定義屬性。你可以閱讀更多here。

定義和用法數據 - *屬性是用來存儲自定義數據專用頁面或應用程序。

data- *屬性使我們能夠在所有HTML元素中嵌入自定義數據屬性。

然後可以在頁面的JavaScript中使用存儲的（自定義）數據，以創建更具吸引力的用戶體驗（不需要任何Ajax調用或服務器端數據庫查詢）。

數據 - *屬性由兩個部分組成：

屬性名稱不應包含任何大寫字母，且必須至少有一個字符長的前綴「數據 - 」

後屬性值可以是任何字符串

注：自定義屬性前綴爲「數據 - 」將通過用戶代理被完全忽略。

而不是僅僅使用size="A4"可以使用data-size="A4"

例

<div className="page" data-size="A4"> 
    // .... 
</div>

來源

2017-09-14 09:57:20 bennygenel

它的工作原理，但我不確定這是完整的解釋：我試過頁面大小，而不是數據大小，它也可以。任何名字我嘗試與' - '在它似乎工作，就好像Typescript忽略警告並強制彙編。謝謝！ –

就像我說的，我對TypeScript不太瞭解。可能有更好的解釋。謝謝你upvote雖然 – bennygenel

屬性不上類型存在「DetailedHTMLProps，HTMLDivElement>」與之反應16

回答

相關問題