topic Re: Unable to compile with TypeScript with React and ArcGIS Types in ArcGIS JavaScript Maps SDK Questions

Unable to compile with TypeScript with React and ArcGIS Types

JamesTruong — Sat, 11 Dec 2021 07:35:39 GMT

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"]   
  }
  
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Unable to compile with TypeScript with React and ArcGIS Types

ReneRubalcava — Wed, 03 Apr 2019 21:59:14 GMT

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.

Re: Unable to compile with TypeScript with React and ArcGIS Types

JamesTruong — Thu, 04 Apr 2019 19:58:46 GMT

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

Re: Unable to compile with TypeScript with React and ArcGIS Types

Jack_Zhang — Sat, 11 Dec 2021 07:35:42 GMT

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"]
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍