ts 断言

// 这里的element 默认类型是HTMLElement | null ，这里我们可以直接说明这个element一定存在并且为一个div标签
const element = document.getElementById("el") as HTMLDivElement

let a: string = "whbbit"
a = "whbbit.cn"

const b = "whbbit" // 按照js语法，b的值不能被改变

let c = "whbbit" as const // c的值可以改变，但是只能改变为'whbbit'
// 写法等同于 let c: 'whbbit' = 'whbbit'

const arr = ["whbbit", 25] as const
// 等同于 const arr: ['whbbit', 25] = ["whbbit", 25]

let a: string = "whbbit"
let b: number = 25
const arr1 = [a, b] as const
// 等同于 const arr: [string, number] = [a, b]

let age: number = 20
let c = true as const
const obj = {
  name: "whbbit",
  age,
  c,
} as const
// 类型为 {readonly name: 'whbbit', readonly age: number, readonly c: true}

function func() {
  let a = "whbbit"
  let b = 25
  return { a, b } as const
}
let { a, b } = func()
// 这时ts可以准确的推断a的类型是string，b的类型是number。
// 不使用as const 时，a和b的类型都是 string | number
console.log(a, b)

const el = document.querySelector("#app")
// 类型为 HTMLElement | null

const el: HTMLDivElement = document.querySelector("#app")
// 这时会报错 Type 'HTMLDivElement | null' is not assignable to type 'HTMLDivElement'. Type 'null' is not assignable to type 'HTMLDivElement'.

const el: HTMLDivElement = document.querySelector("#app")!

const el = document.querySelector("#app") as HTMLDivElement

const el = document.querySelector("#app") as HTMLDivElement

el.addEventListener("click", (e: Event) => {
  console.log(e.target)
})