How to fix error: not assignable to type config: DataSourceSettings? (Grafana 7, tsc 3.8.3)

Grafana Plugin Development
1

I wrote the plugin, compile it using

yarn install 
yarn dev

I got the following error when trying to compile src/ConfigEditor.tsx

src/ConfigEditor.tsx:20:11 - error TS2322: Type '(options: DataSourceSettings<MyDataSourceOptions, {}>) => void' is not assignable to type '(config: DataSourceSettings<DataSourceJsonData, {}>) => void'.
  Types of parameters 'options' and 'config' are incompatible.
    Type 'DataSourceSettings<DataSourceJsonData, {}>' is not assignable to type 'DataSourceSettings<MyDataSourceOptions, {}>'.
      Type 'DataSourceJsonData' is missing the following properties from type 'MyDataSourceOptions': apiKey, instance_crn, result_location, target_cos_url, instance_rate_limit

20           onChange={onOptionsChange}
             ~~~~~~~~

  node_modules/@grafana/ui/components/DataSourceSettings/types.d.ts:4:5
    4     onChange: (config: DataSourceSettings) => void;
          ~~~~~~~~
    The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & HttpSettingsProps & { children?: ReactNode; }'

My tsconfig.json file

{
    "extends": "./node_modules/@grafana/toolkit/src/config/tsconfig.plugin.json",
    "include": ["src", "types"],
    "exclude": ["src/*backup*" ],
    "compilerOptions": {
      "rootDir": "./src",
      "baseUrl": "./src",
      "typeRoots": ["./node_modules/@types"],
      "esModuleInterop": true,
      "jsx": "react"
    }
  }
1 Like
2

Could you share the contents of ConfigEditor.tsx? Especially around line 20.