Please enable JavaScript.

Coggle requires JavaScript to display documents.

11: Working with the DOM (non-null assertion & casting) - Coggle…

- - - - { "compilerOptions": { "lib": [ "DOM", "ES2019" ], ... } }
      - default
        
        includes a default set of type definitions
        
        for built-in JS API's
        
        like Math
        
        and things found in browser environments
        
        like document
        
        and newer JS features
        
        matching the target you specify
      - you might want to change this
        
        say your program doesn’t run in a browser
        
        you don’t want the DOM type definitions
- - - - whare HTMLElement is a generic type
    - - what kind of element it might be
      - if it even exists
  - - - 'btn' is possibly 'null'
  - - - ?.
        
        like the chaining operator
        
        except
        
        if the property is null or undefined
        
        the expression short-circuits
        
        with a return value of undefined
        
        .
      - btn?.addEventListener('click', () => {...});
      - JavaScript operator
    - - !
      - TypeScript operator
        
        post-fix #
      - asserts that its operand
        
        is guaranteed
        
        to be non-null and non-undefined
      - const btn = document.getElementById("submit")!;
        
        btn is now of type
        
        HTMLElement
        
        so you can call the event listener #
- - - - we might try
        
        userInputElement.value = 'Hi there!';
      - but this will give an error
        
        because TS thinks the type of the variable is HTMLElement #
        
        a generic type
        
        Property 'value' does not exist on type 'HTMLElement' :no_entry:
        
        even though we know it's really HTMLInputElement
      - so we need to cast it
        
        there are two syntaxes we can use
        
        put the type in angle brackets
        
        in front of the value we want to convert
        
        const userInputElement = <HTMLInputElement>document.getElementById('user-input')!;
        
        note that angle brackets can be troublesome in other environments :warning:
        
        such as React
        
        as keyword
        
        const userInputElement = document.getElementById('user-input')! as HTMLInputElement; userInputElement.value = 'Hi there!';