title: How to properly initialise property of the class considering that it's value will be assigned later dynamically?
body: <p>Below is the Vue component class with an event listeners that can receive an instance of service worker at some point of time and save it under <code>registration</code> property.</p>
  
  <p>The problem I experience is that even doing:</p>
  
  <pre><code>if (this.registration &amp;&amp; this.registration.waiting) {
    this.registration.waiting.postMessage(SERVICE_WORKER_MESSAGES.skipWaiting)
  }
  </code></pre>
  
  <p>TypeScript communicates that <code>this.registration</code> is <code>TS2571: Object is of type 'unknown'.</code> which makes sense because of:
  <code>private registration: unknown</code>
  <br><br>
  I would really appreciate if somebody could suggest what is a proper way of initialising and access properties that can be defined later?</p>
  
  <p>P.S: The actual type of <code>registration</code> is <code>ServiceWorkerRegistration</code></p>
  
  <p><strong>Class implementation:</strong></p>
  
  <pre><code>export default class Core extends Vue {
    private refreshing = false
    private updateExists = false
    private registration: unknown
  
    updateApp (): void {
      this.updateExists = false
  
      // this.registration --&gt; TS2571: Object is of type 'unknown'.
      if (this.registration &amp;&amp; this.registration.waiting) {
        //                     ~~~~~~~~~~~~~~~~~  
  
        // this.registration --&gt; TS2571: Object is of type 'unknown'.
        this.registration.waiting.postMessage(SERVICE_WORKER_MESSAGES.skipWaiting)
        // ~~~~~~~~~~~~~~
      }
    }
  
    addEventListeners () {
      document.addEventListener(SERVICE_WORKER_EVENTS.updated, ((event: CustomEvent) =&gt; {
        this.registration = event.detail /* store the ServiceWorkerRegistration instance for later use. */
        this.updateExists = true
      }) as EventListener,
      { once: true })
    }
  
    created () {
      this.addEventListeners()
  
      /*
      Refresh all open app tabs when a new service worker is installed */
      navigator.serviceWorker.addEventListener(`controllerchange`, () =&gt; {
        if (!this.refreshing) {
          this.refreshing = true
          window.location.reload()
        }
      })
    }
  }
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "strict": true,
      "jsx": "preserve",
      "importHelpers": true,
      "moduleResolution": "node",
      "experimentalDecorators": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "allowJs": true,
      "sourceMap": true,
      "noImplicitThis": true,
      "baseUrl": ".",
      "types": [
        "webpack-env",
        "jest"
      ],
      "paths": {
        "@/*": [
          "src/*"
        ]
      },
      "lib": [
        "esnext",
        "dom",
        "dom.iterable",
        "scripthost"
      ]
    },
    "include": [
      "src/**/*.ts",
      "src/**/*.tsx",
      "src/**/*.vue",
      "tests/**/*.ts",
      "tests/**/*.tsx"
    ],
    "exclude": [
      "node_modules"
    ]
  }
  </code></pre>