How do I access the "checked" property of a HTML checkbox element using TypeScript?

I have the following HTML Code:

<input type="checkbox" id="check-one">

The following CSS code:

.check-one {
accent-color: #9d3039; }

And the following TypeScript code:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  arrayName = new Array(10000);
}

const checkInput = document.getElementById('check-one') as HTMLInputElement;

console.log(checkInput.checked);

Whenever I view the console, all I get is an error that reads: Uncaught TypeError: checkInput is null

I'm wondering why this is happening? Why is it not returning either True or False since checkInput.checked is a boolean? Additionally, how to I manipulate this property so that the box can be checked and unchecked using a line of code in Typescript?