Unable to compile with TypeScript with React and ArcGIS Types

3763
3
Jump to solution
04-03-2019 11:51 AM
JamesTruong
New Contributor II

No idea who would I contact.

Using Typescript 3.4.1, React 16.8 and ArcGIS JS 4.11

I'm unable to compile when I added @types/arcgis-js-api, even when not using it.

Attached is a very simple typescript react.

It does nothing but unable to compile when @types/arcgis-js-api is installed.

Any suggestions?

Error output:

node_modules/@types/react/index.d.ts:100:31 - error TS2344: Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
    Type 'number' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)'.
      Type 'T' is not assignable to type 'string'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string'.
          Type 'number' is not assignable to type 'string'.

100     > extends ReactElement<P, T> { }

package.json

{
  "name": "test2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@types/arcgis-js-api": "^4.11.0",
    "@types/react": "^16.8.11",
    "@types/react-dom": "^16.8.3",
    "typescript": "^3.4.1"
  }
}

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "umd",
    "removeComments": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "declaration": false,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,

    "lib": ["dom", "scripthost", "es5", "es2015.promise", "es2015.core", "es2015.collection", "es2015.iterable"]   
  }
  
}
0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

Add

"skipLibCheck": true

to your tsconfig.json and the compiler won't check all declaration files. Not sure why that error occurs, but our typings shouldn't effect it. This fixes your issue.

View solution in original post

3 Replies
ReneRubalcava
Frequent Contributor

Add

"skipLibCheck": true

to your tsconfig.json and the compiler won't check all declaration files. Not sure why that error occurs, but our typings shouldn't effect it. This fixes your issue.

Jack_Zhang
Occasional Contributor

Hi Rene, 

I'm using Typescript 3.8.3, and ArcGIS JS 4.15 and having similar issue in which the compiler reports errors as below on autocasting Color from string. The complied js works fine but it's a bit eyesore to have see this in VS code. I've added "skipLibCheck": true in the tsconfig.json within the compilerOptions but that didn't fix my problem.  wonder if you could help me. thanks.

view
  .when(() => {
    map.ground.navigationConstraint = { type: 'none' };
    map.ground.surfaceColor = '#fff';
    map.ground.opacity = 0.4;

    map.add(featureLayer);
  })‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

error

app/main.ts:104:5 - error TS2322: Type '"#fff"' is not assignable to type 'Color'.
104 map.ground.surfaceColor = '#fff';

tsconfig.json

{
  "compilerOptions": {
    "module": "amd",
    "noImplicitAny": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "jsx": "react",
    "jsxFactory": "tsx",
    "target": "es5",
    "experimentalDecorators": true,
    "preserveConstEnums": true,
    "suppressImplicitAnyIndexErrors": true,
    "skipLibCheck": true
  },

  "include": ["./app/*"],
  "exclude": ["node_modules"]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
JamesTruong
New Contributor II

Yeah, that got it to compile.

I don't get that error either.

 

The closest thing that could affect the react typing is the creating custom widgets

0 Kudos