【TS】类型别名和类型推断

zoe驿鹿

已于 2023-04-20 16:33:54 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： TS 文章标签： ts typescript

于 2021-07-30 14:41:19 首次发布

本文链接：https://blog.youkuaiyun.com/webFrontEndDev/article/details/119247247

TS 专栏收录该内容

5 篇文章

订阅专栏

本文详细解读了TypeScript中类型声明的原理，包括可选参数、默认值和类型别名的使用。通过实例展示了函数类型定义、联合类型、类型断言及解构赋值类型注解。深入理解了如何在实际开发中利用这些特性提高代码质量和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在TS中凡是在冒号: 后面的都是在声明类型和实际业务逻辑并无关系，是对参数和返回值类型约束的写法。

?标识符表示可选，可选参数需置后。添加默认值的参数也会自动识别为可选参数。

function add(x: number, y: number, z?: number, q: number = 10): number {
    if(typeof z === 'number'){
        return x + y + z
    }else {
       return x + y 
    }
    
}
let result = add(2, 3)

// 函数表达式
const add2 = function (x: number, y: number, z?: number, q: number = 10): number {
    if(typeof z === 'number'){
        return x + y + z
    }else {
       return x + y 
    }
}

const add2: (x: number, y: number, z?: number) => number = add

此处的箭头不是es6中的箭头函数，而是TS中声明函数类型返回值的一种方法。

类型别名

// 用类型别名实现联合类型
type NameResolver = () => string
type NameOrResolver = string | NameResolver
function getName(n: NameOrResolver): string {
    if(typeof n === 'string') {
        return n
    } else {
        return n()
    }
}

类型断言

未指定类型时TS会给出推断类型，因此再次给变量赋不同类型的值时会报语法错误

let str = 'str'
str = 123 // 未指定类型时TS会给出推断类型，因此再次给变量赋不同类型的值时这里会报语法错误

// 无返回值类型函数
function sayHello(): never {
  while(true) {}
}

// 永远不会执行完成的函数类型
function errorEmitter(): never {
  throw new Error() 
  while (true) {}
}


//解构赋值类型注解方法
function addObj({ first, second }: { first: number; second: number }): number {
  return first + second;
}
const totalObj = addObj({ first: 1, second: 2 });

类型断言

function getLength(input: string | number): number {
    
    // 把input 断言为 string
    if((<string>input).length) {
        return (<string>input).length
    }else {
        return input.toString().length
    }
}