TypeScript assertion usage

Enums enumeration

Enumerations are widely used in programming languages ​​and databases such as mysql

When no value is set, the value starts incrementing at 0

Here's how to set gender using an enum

enum SexType {
    
    
    BOY, GIRL
}

const hd = {
    
    
    name: 'wgchen',
    sex: SexType.GIRL
}
console.log(hd);

When a field is set to a value of a numeric type, the subsequent ones are incremented based on it

enum SexType {
    
    
    BOY = 1, GIRL
}

const hd = {
    
    
    name: 'wgchen',
    sex: SexType.GIRL
}
console.log(hd); 

Values ​​can be set to other types

enum SexType {
    
    
    BOY = '男', GIRL = '女'
}
console.log(SexType);

as assertion

The as assertion means that the user determines what type it is, and does not use the type inferred by the system. To put it bluntly, it means "what I say is what it is"

In the following example, TS will infer the type of variable f based on the function:string | number

function hd(arg: number) {
    
    
    return arg ? 'wgchen' : 2030
}

let f = hd(1) //let f: string | number
console.log(f); // wgchen

We can assert (assert) that this is a string by the developer, this is an assertion

function hd(arg: number) {
    
    
    return arg ? 'wgchen' : 2030
}

let f = hd(1) as string //let f: string
console.log(f); // wgchen

You can also use the following assertion syntax

function hd(arg: number) {
    
    
  return arg ? 'wgchen' : 2030
}

let f = <string>hd(1) //let f: string

const assertion

let & const

• const guarantees the strict type of the literal
• let is a generic type such as a string type

const hd = 'wgchen' //const hd: "houdunren"
let xj = 'wgchen' //let xj: string

const

A const assertion tells the compiler to infer the narrowest or most specific type it can infer for an expression, rather than the broad type.

• String, boolean type conversion to concrete value
• Object converted to read-only property
• Array converted to read-only tuple

The following restricts the user type to the narrowest type wgchen

let user = '博客' as const
user = 'wgchen'

//与以下很相似
let user: 'wgchen' = 'wgchen'
user = 'wgchen'

Object converted to read-only property

let user = {
    
     name: '博客' } as const
user.name = 'wgchen' //因为是只读属性，所以不允许设置值

When it is a variable, it is converted to a variable type, and the specific value is converted to a value type

let a = 'wgchen'
let b = 2030

//readonly [string, number, "sina.com", true, 100]
let f = [a, b, 'wgchen', true, 100] as const 
console.log(f);

let hd = f[0]
hd = '博客'

console.log(hd); // 博客

array assignment

The type obtained by the variable f is the type of the array string|number, so as long as the value is of these two types

let a = 'wgchen'
let b = 2039

let hd = [a, b] //let hd: (string | number)[]

let f = hd[1] //let f: string | number

f = '博客' //不报错，因为类型是 string | number

After using const, you will get the specific type of the value, the surface is not the type of the array

let a = 'wgchen'
let b = 2039

let hd = [a, b] as const //let hd: readonly [string, number]

let f = hd[1] //let f: number
f = '博客' //报错，只能是最窄类型即变量 b 的类型 number

You can also use the following syntax

let a = 'wgchen'
let b = 2039

let hd = <const>[a, b] //let hd: readonly [string, number]
let f = hd[1] //let f: number
f = 199 

deconstruct

The variable type obtained by destructuring below is not a concrete type, but an array type, such as the type of variable y string | (() => void).

This is not safe when writing projects, because y can be changed to a string at any time,
and there will be no friendly code hints:

function hd() {
    
    
    let a = 'wgchen'
    let b = (x: number, y: number): number => x + y
    return [a, b]
  }
  let [n, m] = hd() //变量 m 的类型为 string | (() => void)
  
  m(1, 6) //报错：因为类型可能是字符串，所以不允许调用

You can assert that m is a function and then call

function hd() {
    
    
    let a = 'wgchen'
    let b = (x: number, y: number): number => x + y
    return [a, b]
}
let [n, m] = hd()

console.log((m as Function)(1, 2))

//使用以下类型声明都是可以的
console.log((m as (x: number, y: number) => number)(1, 5)

The type of the return value can be asserted at call time

function hd() {
    
    
    let a = 'wgchen'
    let b = (x: number, y: number): number => x + y
    return [a, b]
}

let [n, m] = hd() as [string, (x: number, y: number) => number]
console.log(m(9, 19))

You can also declare the return type in the function body

function hd() {
    
    
    let a = 'wgchen'
    let b = (x: number, y: number): number => x + y
    return [a, b] as [typeof a, typeof b]
}

let [n, m] = hd()
console.log(m(9, 19))

null / undefined

By default null and undefined can be assigned to other types

let hd: string = 'wgchen.blog'
hd = null
hd = undefined

When we tsconfig.jsonmodify the strictNullChecksfield of the configuration file to true(the default is true), we cannot null、undefinedassign it to other types

"strictNullChecks": true

unless the type is explicitly specified as below

let hd: string |undefiend|null = 'wgchen.blog'
hd = null
hd = undefined

Non-empty affirmation

The following example gets values ​​that may be HTMLDivElementor null, so assigning the type directly “HTMLDivElement”will throw an error.

The following example operation needs to enable tsconfig.jsonthe configuration item strictNullChecksfield is true.

const el: HTMLDivElement = document.querySelector('.hd') 
console.log(el.id);

Types can be asserted using as

const el: HTMLDivElement = document.querySelector('.hd') as HTMLDivElement
console.log(el.id);

Use after the value !to declare that the value is notnull

const el: HTMLDivElement = document.querySelector('.hd')!
console.log(el.id);

JUDGMENT

To demonstrate the example we create the html file as follows

The following operations need to enable the strictNullChecks field of the configuration item in tsconfig.json to be true

<!DOCTYPE html>
<html lang="en">
<head>
    <title>wgchen</title>
    <script src="1.js" defer></script>
</head>
<body>
    <div class="hd">https://wgchen.blog.csdn.net</div>
    <button id="bt">插入元素</button>
</body>
</html>

type inference

For the obtained label object, it may be nullor may be the label type

bodyand other specific tags can be accurate tag type null
or classcan not accurately obtain the tag type according to etc., the inferred type isElement|null

//const body: HTMLBodyElement|null
const body = document.querySelector('body') 

The following is based on classGet the label result is ELementnot a specific label, because the label type classcannot be

//const el: Element | null
const el = document.querySelector('.hd') 

null handling

For other tag elements, the return value may be null, so use asassert or !

deal with

//const div: HTMLDivElement
let div = document.querySelector('div') as HTMLDivElement

//或使用
div = document.querySelector('div')! //非空断言
console.log(div.id);

Assertion Handling

asDeclaring a type as with will treatHTMLAnchorElement it as a linked typeTSa

Now all prompts will be alinked properties or methods

// const el: HTMLAnchorElement
const el = document.querySelector('.hd') as HTMLAnchorElement 
console.log(el.href);

The DOM type in the following example will report an error because .hdis of type Element and elthe type of the constructor parameter is HTMLDivElement

class Hd {
    
    
    constructor(el: HTMLDivElement) {
    
    
    }
}
const el = document.querySelector('.hd'); //el: Element
new Hd(el)

At this time, you can use asassertion processing, which explicitly informs that the value type obtained isHTMLDivElement

class Hd {
    
    
    constructor(el: HTMLDivElement) {
    
    
    }
}
const el = document.querySelector('.hd') as HTMLDivElement;
new Hd(el)

Example

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<a class="hd" href="https://wgchen.blog.csdn.net">博客</a>

<script src="./ts.js"></script>
</body>
</html>

ts.ts

const el = document.querySelector('.hd') as HTMLAnchorElement;
console.log(el.href);