spfx extension unrelated ApplicationCustomizerContext type tsc error

Question

I encountered dificulties working the ApplicationCustomizerContext type using the TypesSript

1) I have created a spfx application customizer

2) I have added in the application customizer main ts file:

import ApplicationCustomizerContext from "@microsoft/sp-application-base/lib/extensibility/ApplicationCustomizerContext";

3) And on its onInit() method added:

 var ctx: ApplicationCustomizerContext = this.context;

The TypeScript compiler (ver 2.4.2) eded up with error:

error TS90010: Type 'ApplicationCustomizerContext' is not assignable to type 'ApplicationCustomizerContext'. Two different types with this name exist, but they are unrelated.

Do you know by chance how the import should be defined to typescript didn't complain?

additional info: the project was generated using "@microsoft/generator-sharepoint 1.5.1

"environment": "spo",
"version": "1.5.1",
"packageManager": "npm",
"componentType": "extension",
"extensionType": "ApplicationCustomizer"

tsconfig.json leaved untouch (as generated originally)

  "compilerOptions": {
    "target": "es5",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es5",
      "dom",
      "es2015.collection"
    ]

Answer 1

Looks like there is some change in the way ApplicationCustomizerContext import is done in SPFx v1.5.1 compared to the way it was done in 1.4.1

Modify your import statement as below:

import { ApplicationCustomizerContext } from "@microsoft/sp-application-base";