首页 > 其他分享 >typescript中特殊符号(?/!)用法

typescript中特殊符号(?/!)用法

时间:2023-01-18 11:13:52浏览次数:46  
标签:typescript undefined true number 用法 height null 特殊符号 string

1. 属性或参数中使用 ?:表示该属性或参数为可选项

2. 属性或参数中使用 !:表示强制解析(告诉typescript编译器,这里一定有值),常用于vue-decorator中的@Prop

3. 变量后使用 !:表示类型推断排除null、undefined

 

例如

   private _options!: ChatBoxMsgItemOptions;     public get options(): ChatBoxMsgItemOptions {         return this._options;     }     @property(Label)     labelTitle!: Label;  

基础类型

  • 原始类型:number,string,boolean,symbol,null或undefined
  • object表示非原始类型,使用object类型,就可以更好的表示像Object.create这样的API

null 和 undefined

  • 默认情况下,null和undefined是所有类型的子类型。 就是说你可以把 null和undefined赋值给number或者string类型的变量

strictNullChecks
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
// "strictNullChecks": true, /* Enable strict null checks. */
}

false
// 当strictNullChecks置为false,或者默认。ts编译器不进行null和undefined的严格检查

let str1: string = undefined;//success

let str2: string = null;//success

true
//当strictNullChecks置为true,null和undefined只能赋值给void和它们各自

let str1: string = undefined;//fail Type 'undefined' is not assignable to type 'string'.

let str2: string = null;//fail Type 'null' is not assignable to type 'string'.

可选属性 ?

 

【?】 表示在strictNullChecks置为true时,height?: number; 等价于 height: number | undefined;
interface Test {
height?: number;
width: number;
}

function testfunc(test: Test) {
test.height = undefined;// success
test.width = undefined;// fail Type 'undefined' is not assignable to type 'number'.
}

非空断言操作符 !
当strictNullChecks置为true时,类中的成员必须明确定义类型;【!】表示在此处告诉编译器,此成员不会为null,不会为undefined;
class Test1 {
height!: number; //success 非null 非 undefined类型

test() {
this.height = null;// fail Type 'null' is not assignable to type 'number'.
this.height = undefined;// fail Type 'undefined' is not assignable to type 'number'.
}
}


class Test2 {
height: number | undefined | null;//success 可null 可undefined类型
}

 

标签:typescript,undefined,true,number,用法,height,null,特殊符号,string
From: https://www.cnblogs.com/cslie/p/17059390.html

相关文章

  • 生成二维码插件&用法
        1)vue-qrcode:     git地址:https://github.com/fengyuanchen/vue-qrcode     用法:        安装依赖:npminstallqrcode......
  • React:styled-components有趣的用法
    背景用于记录一些styled-components的有趣的用法绑定a标签的链接编写伪类在styleComponents中使用参数传入参数......
  • typescript封装LocalStorage并支持过期时间
    思考在我们使用​​cookie​​​的时候是可以设置有效期的,但是​​localStorage​​​本身是没有该机制的,只能人为的手动删除,否则会一直存放在浏览器当中,可不可以跟cookie一......
  • 学习TypeScript 加餐环节
    ​​object​​​、​​Object​​​ 以及​​{}这三个类型大家可能不太理解​​1.​​Object​​ ​​Object​​​类型是所有​​Object​​类的实例的类型。由以下......
  • vector与list使用用法代码示例
    今天在分析amr解码时,发现用到了vector和list。考虑到这两种容器类使用的场景很多,想把他们的使用方法分享给读者。所以我单独抽离一部分单独编译,具体代码如下:#include<std......
  • Void类型的指针用法与说明
    typedefvoid*HANDLE用法与说明语法:typedefvoid*HANDLE;含义:就是用HANDLE来代表void,也可理解为HANDLE==void。void类型的指针表示可以指向任意类型的数据,但......
  • 探讨下如何更好的使用缓存 —— Redis缓存的特殊用法以及与本地缓存一起构建多级缓存
    大家好,又见面了。本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面。如果感兴趣,欢迎关注以获取后续更新。通......
  • IK 分词器支持特殊符号、标点符号分词
    从GitHub下载对应版本的IK分词器源码,修改CharacterUtil.identifyCharType方法,将特殊符号、标点符号当做中文进行处理即可。添加:elseif(......
  • 【ES6】JS类的用法class
    【ES6】JS类的用法class​​一、概述​​​​二、构造函数constructor​​​​三、静态方法与静态变量​​​​查看更多ES6教学文章:​​​​参考文献​​引言:由于JS之前一直......
  • JavaScript async/await 的用法以及它与 Promise 的区别
    async/await是JavaScript中的语法糖,用于简化异步代码的编写。它允许你在异步代码中使用同步风格的语法,使代码更易于阅读和维护。用法:使用关键字async声明一个异步......