React找不到TypeScript声明模块

Question

I'm trying to use the react-csv-reader package in a React project that was created with create-react-app --typescript . Since react-csv-reader doesn't come with a types declaration file, I created one myself. I created a file types/react-csv-reader/index.d.ts . VS Code's Intellisense can find it just fine (I can command-click on the function name in module where I'm using react-csv-reader, and it takes me to my declarations file. It also complains when I don't have all the required props, etc.).

But when I run npm start , I get this:

Failed to compile.

./src/screens/ReadCsv.tsx
Module not found: Can't resolve '../types/react-csv-reader' in '/my/proj/root/src/screens'

Here's my index.d.ts :

import React from 'react'

interface CSVReaderProps {
  cssClass?: string
  cssInputClass?: string
  label?: string
  onFileLoaded: (data: any, filename: string) => void
  onError: () => void
  inputId?: string
  inputStyle?: any
  parserOptions?: any
}

declare const CSVReader: React.SFC<CSVReaderProps>

export default CSVReader

Answer 1

Because typescript don't know where are your definition files, so you have to tell him in your tsonfig.json.

{ 
  "compilerOptions": {
    "typeRoots" : [
      "node_modules/@types",
      "./your/types/folder"
    ] 
  } 
}

Note that I added node_modules , otherwise its types are not included.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

Answer 2

The right combination of things to make this work was:

1. Put everything in index.d.ts inside a declare module 'react-csv-reader' {} block
2. import it as import CSVReader from 'react-csv-reader' instead of what I was doing, which was import CSVReader from '../types/react-csv-reader' .

I did not have to change anything in tsconfig.json. I still don't understand why it worked before as far as VS Code Intellisense was concerned, but this way works with that and is compiled happily by React.