TypeScript类型断言与函数参数详解

作者：异步漫步时间：2026-10-25 11:57:07浏览：561

本文深入解析TypeScript中的类型断言机制，涵盖非空断言、as语法及确定赋值断言的使用场景。同时介绍类型守卫（typeof与in）如何缩小类型范围，并详细讲解函数可选参数、默认值参数及函数重载的实现方式，帮助开发者提升代码类型安全性。

开始学习

当前正致力于加速技术积累，若有资深开发者提供内推机会或相关建议，将不胜感激。

具备Vue2与Vue3结合TypeScript的开发经验。

类型断言概述

非空断言机制

非空断言的核心作用在于确认变量并非null或undefined，从而在类型系统中将这些值排除，确保变量具有确定的非空类型。

function demo(message:string|undefined|null) {
    const str: string = message
}
demo(undefined)

若未使用非空断言，变量message的类型将包含undefined和null，此时将其赋值给类型为string的str会引发编译错误，提示Type 'string | null | undefined'不可赋值给type 'string'。

应用非空断言后的代码表现如下：

let message:string
function demo(message:string|undefined|null) {
    const str: string = message!
}
demo(undefined)

开始学习

此时代码通过类型检查，运行无误。

类型断言详解

类型断言用于明确指定变量的预期类型。

尖括号语法

开发者可以使用尖括号语法进行类型断言。

let message: any = "scc"
let mesLength:number = (<string>message).length

开始学习

as关键字

使用as关键字可以判断变量是否属于后续指定的类型，这是TypeScript推荐的断言方式。

let message: any = "scc"
let mesLength:number = (message as string).length

确定赋值断言

当确定某个变量必然会被赋值时，可以使用确定赋值断言来告知编译器。

let message!:string

在变量名后添加感叹号（!）即可实现确定赋值断言。

类型守卫技术

TypeScript中的类型守卫旨在缩小变量的类型范围，使其在特定代码块内具有更具体的类型。

typeof操作符

利用typeof关键字结合===运算符，可以判断变量当前的具体类型。

function demo(message: string | number | boolean) {
    if (typeof message === "string") {
        message.toUpperCase()
    }
}

经过类型守卫处理后，message的类型被缩小为string，因此可以安全调用toUpperCase方法。

该机制逻辑直观，具备一定基础的开发人员能够迅速掌握其应用。

in操作符

in操作符用于判断变量是否包含特定类型的属性，从而确定变量是否在预期的类型范围内。

interface Person {
    name: string
    age:number
}
interface Dog {
    name: string
    walk:string
}
type x = Dog|Person
function all(emp: x) {
    if ("walk" in emp) {
        console.log(d.walk);
    }
}

函数参数与重载

可选参数配置

函数参数可设置为可选，建议将可选参数置于必填参数及带有默认值的参数之后。

function demo(num:number,str?:string){
}

默认值参数

function demo(num:number,bol:boolean = true,str?:string){ 
}

参数bol设有默认值，若调用时传入值则使用传入值，否则使用默认值。

函数重载机制

函数重载允许函数根据传入参数的类型，自动匹配并执行相应的函数逻辑。

function add(a1: number, a2: number):number
function add(a1: string, a2: string):string
function add(a1: any, a2: any):any {
        return a1 + a2
}
console.log(add(20,30));
console.log(add("scc","brd"));

开始学习