1. 程式人生 > 實用技巧 >【分享】用typescript結合react編寫程式碼,引入第三方庫模組報錯的解決辦法

【分享】用typescript結合react編寫程式碼,引入第三方庫模組報錯的解決辦法

1.前提

  我用npx create-react-app my-react-ts-app --template typescript 建立了一個應用,加了typescript到專案中;

  問題來了,我在檔案引入'react-redux'包,卻提示我:

  無法找到模組“react-redux”的宣告檔案

  trynpminstall@types/react-redux

  或者 declare module 'react-redux'

import { Provider } from 'react-redux';

2.解決辦法

  (根據提示來解決,真是個小機智girl)

  方式1: trynpm install @types/react-redux

,庫有自己的宣告檔案

   NPM安裝的格式:npm install @types/<package-name>

   這樣很好,因為我們只需要安裝這個庫,就可以立即使用它了。要知道一個庫是否包含型別,看庫中是否有index.d.ts檔案。

   有些庫會在package.json檔案的typingstypes屬性中指定型別檔案。

   需要注意的是:該庫包含了自己的宣告檔案時只需要安裝就好,如果沒有再從DefinitelyTyped 獲取它的宣告檔案(也就是npm安裝)

  方式2: declare module 'react-redux' 自給自足

   如果這個庫沒有自己的宣告檔案,那麼就需要動手建立一個定義檔案了

   首先在根目錄下建立資料夾‘typings’

   再新建檔案'react-redux.d.ts'

/typings/react-redux.d.ts
declare module 'react-redux'{
  const content: any;
  export = content;
}

   然後在ts配置檔案中加入'typings'

  大功告成,噢耶~