TypeScript 断言使用

我不是女神ヾ 2023-10-06 21:54 68阅读 0赞

#### 阅读目录 ####

*  Enums 枚举
 *  as断言
 *  const 断言
 *   *  let & const
     *  const
     *  数组赋值
     *  解构
 *  null / undefined
 *  非空断言
 *  DOM
 *   *  类型推断
     *  null 处理
     *  断言处理
     *   *  示例

## Enums 枚举 ##

枚举在程序语言及 mysql 等数据库中广泛使用

不设置值时，值以 0 开始递增

下面是使用枚举设置性别

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

![在这里插入图片描述][4da50fb4aab4437da9c2b3bc72a6daed.png]

当某个字段设置数值类型的值后，后面的在它基础上递增

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

![在这里插入图片描述][a6959ce057294e87943af08f0b5a9b63.png]  
可以将值设置为其他类型

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

![在这里插入图片描述][112c0c537d7647cfa566bdb09f3ffffd.png]

## as断言 ##

as 断言的意思就是用户断定这是什么类型，不使用系统推断的类型，说白了就是『我说是什么，就是什么』

下例中TS 会根据函数推断变量 f 的类型是 `string | number`

function hd(arg: number) {
        
        return arg ? 'wgchen' : 2030
    }
    
    let f = hd(1) //let f: string | number
    console.log(f); // wgchen

我们可以由开发者来断定（断言）这就是字符串，这就是断言

function hd(arg: number) {
        
        return arg ? 'wgchen' : 2030
    }
    
    let f = hd(1) as string //let f: string
    console.log(f); // wgchen

也可以使用下面的断言语法

function hd(arg: number) {
        
      return arg ? 'wgchen' : 2030
    }
    
    let f = <string>hd(1) //let f: string

## const 断言 ##

### let & const ###

*  const 保证该字面量的严格类型
 *  let 为通用类型比如字符串类型

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

### const ###

const 断言告诉编译器为表达式推断出它能推断出的最窄或最特定的类型，而不是宽泛的类型。

*  字符串、布尔类型转换为具体值
 *  对象转换为只读属性
 *  数组转换成为只读元组

下面限定 user 类型为最窄类型 wgchen

let user = '博客' as const
    user = 'wgchen'
    
    //与以下很相似
    let user: 'wgchen' = 'wgchen'
    user = 'wgchen'

对象转换为只读属性

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

当为变量时转换为变量类型，具体值是转为值类型

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); // 博客

![在这里插入图片描述][8d68be74d0e4410888305255e24133fb.png]

### 数组赋值 ###

变量 f 得到的类型是数组的类型 `string|number`，所以只要值是这两个类型都可以

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

使用 const 后会得到值的具体类型，面不是数组的类型

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

也可以使用以下语法

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

### 解构 ###

下面解构得到的变量类型不是具体类型，面是数组类型，比如变量 y 的类型是 `string | (() => void)`。

这在写项目时是不安全的，因为可以将 y 随时修改为字符串，  
同时也不会有友好的代码提示:

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) //报错：因为类型可能是字符串，所以不允许调用

可以断言 m 为函数然后调用

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)

![在这里插入图片描述][f8acb7ee6cc249689bdb36fe34a98a73.png]

可以在调用时对返回值断言类型

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))

![在这里插入图片描述][76916b72840e43dbaf21f36424591d43.png]  
也可以在函数体内声明返回类型

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))

![在这里插入图片描述][c0429fd247a24c6686cccd5dedaaeb5d.png]

## null / undefined ##

默认情况下 null 与 undefined 可以赋值给其他类型

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

当我们修改 `tsconfig.json` 配置文件的 `strictNullChecks` 字段为 `true`（默认即为 true） 时，则不能将 `null、undefined` 赋值给其他类型

"strictNullChecks": true

除非向下面一样明确指定类型

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

## 非空断言 ##

下面的示例获取的值可能为 `HTMLDivElement` 或 `null`，所以直接分配类型`“HTMLDivElement”` 将报错误。

下例操作需要开启 `tsconfig.json` 的配置项 `strictNullChecks` 字段为 `true`。

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

可以使用 as 断言类型

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

在值后面使用 `!` 来声明值非 `null`

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

## DOM ##

为了演示示例我们创建 html 文件如下

下面的操作需要开启 tsconfig.json 的配置项 strictNullChecks 字段为 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>

### 类型推断 ###

对于获取的标签对象可能是为 `null` 也可能是该标签类型

`body` 等具体标签可以准确标签类型或 `null`  
根据 `class` 等获取不能准确获取标签类型，推断的类型为 `Element|null`

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

下面是根据 `class` 获取标签结果是 `ELement` 并不是具体的标签，因为根据 `class` 无法确定标签类型

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

### null 处理 ###

针对于其他标签元素，返回值可能为 `null`，所以使用 `as` 断言或！

处理

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

### 断言处理 ###

使用 `as` 将类型声明为 `HTMLAnchorElement` 则 `TS` 会将其按 `a` 链接类型处理

现在所有的提示将是 `a` 链接属性或方法

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

下例中的 DOM 类型会报错，因为 `.hd` 是Element 类型，而构建函数参数 `el` 的类型是 HTMLDivElement

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

这时可以使用 `as` 断言处理，明确告之获取的值类型是 `HTMLDivElement`

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

#### 示例 ####

`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);

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][17573e6f2dc74620a17f0c43e35d3b7f.png]

[4da50fb4aab4437da9c2b3bc72a6daed.png]: https://img-blog.csdnimg.cn/4da50fb4aab4437da9c2b3bc72a6daed.png
[a6959ce057294e87943af08f0b5a9b63.png]: https://img-blog.csdnimg.cn/a6959ce057294e87943af08f0b5a9b63.png
[112c0c537d7647cfa566bdb09f3ffffd.png]: https://img-blog.csdnimg.cn/112c0c537d7647cfa566bdb09f3ffffd.png
[8d68be74d0e4410888305255e24133fb.png]: https://img-blog.csdnimg.cn/8d68be74d0e4410888305255e24133fb.png
[f8acb7ee6cc249689bdb36fe34a98a73.png]: https://img-blog.csdnimg.cn/f8acb7ee6cc249689bdb36fe34a98a73.png
[76916b72840e43dbaf21f36424591d43.png]: https://img-blog.csdnimg.cn/76916b72840e43dbaf21f36424591d43.png
[c0429fd247a24c6686cccd5dedaaeb5d.png]: https://img-blog.csdnimg.cn/c0429fd247a24c6686cccd5dedaaeb5d.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2lsbGVtX3dn_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/442d5b768d1a4dbcbc37d56ee060e6a9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2lsbGVtX3dn,size_20,color_FFFFFF,t_70,g_se,x_16
[17573e6f2dc74620a17f0c43e35d3b7f.png]: https://img-blog.csdnimg.cn/17573e6f2dc74620a17f0c43e35d3b7f.png