• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

typescript中的null和undefined

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

null 和 undefined 是 ts 中的基础类型,分别具有值 null 和 undefined,默认情况下它们是所有类型的子类型,即可以赋值给任意类型,如:

let s: string = 'hello'

s = null //right
s = undefined // right

但当我们在 tsconfig.js 文件中设置 strictNullChecks 为 true 时,就不能将 null 和 undefined 赋值给除它们自身和 void 之外的任意类型了。在这种严格检查的情况下,如果你确实在某个地方想要给一个其他类型的值设置初始值为空,然后再赋值,可以使用联合类型来实现:

// 开启 "strictNullChecks": true 情况

let s: string = 'hello'
s = null // error,不能将类型“null”分配给类型“string”。

let s2: string | null = 'hi'
s2 = null
s2 = undefined // error,不能将类型“undefined”分配给类型“string | null”。

从例子中知道,null 和 undefined 是区别的,即 string|undefined、string|null 和 string|undefined|null 是三种不同的类型。

 

可选参数和可选属性

如果设置了 "strictNullChecks": true,可选参数会被自动加上 |undefined,例子:

function f(x: number, y?: number){
    return x + (y || 0)
}
f(1, 2) // 3
f(1) // 1
f(1, undefined) // 1
f(1, null) // error,类型“null”的参数不能赋给类型“number | undefined”的参数。

对于可选属性也会有同样的处理:

interface PositionInterface{
    x: number
    y?: number
}

let p: PositionInterface = {x: 10}
p.y = 'abc' // error,不能将类型“"abc"”分配给类型“number | undefined”。

p.y = null // error,不能将类型“null”分配给类型“number | undefined”。

p.y = undefined // right

 

类型保护和类型断言

可以为 null 的类型是通过联合类型实现,所以需要使用类型保护去除 null,如:

function f(sn: string | null): string{
    if(sn === null){
        return 'null'
    } else {
        return sn
    }
}

这样操作可以去除 null,或者使用短路运算符:

function f(sn: string | null): string{
   return sn || 'null'
}

 

如果编译器无法去除 null 和 undefined,可以使用类型断言手动去除。语法是添加 ! 后缀: identifier! 从 identifier 的类型里去除了 null和 undefined,官方例子:

function broken(name: string | null): string {
  function postfix(epithet: string) {
    return name.charAt(0) + '.  the ' + epithet; // error, 'name' is possibly null
  }
  name = name || "Bob";
  return postfix("great");
}

function fixed(name: string | null): string {
  function postfix(epithet: string) {
    return name!.charAt(0) + '.  the ' + epithet; // ok
  }
  name = name || "Bob";
  return postfix("great");
}

本例使用了嵌套函数,因为编译器无法去除嵌套函数的null(除非是立即调用的函数表达式)。 因为它无法跟踪所有对嵌套函数的调用,尤其是你将内层函数做为外层函数的返回值。 如果无法知道函数在哪里被调用,就无法知道调用时 name的类型。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ThinkJS 2.1:支持 TypeScript,性能提升 90%发布时间:2022-07-18
下一篇:
typescript中的类型别名和字面量类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap