首页 前端知识 typescript中常用符号

typescript中常用符号

2024-05-07 13:05:22 前端知识 前端哥 837 350 我要收藏

1. ?. 可选链

可选链是一种先检查属性是否存在,再尝试访问该属性的运算符 ( ?. )

const imgSrc = {
  src: 'public/import/import_src'
}

  // jsx语法
<img src={imgSrc?.src}>
//相当于if判断的简写语法,或者三元运算符的简写语法

2. & 交叉类型(interp types)

在 TypeScript 中,交叉类型是将多个类型合并为一个类型,我们可以通过 & 把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性

//& 把现有的多种类型叠加到一起成为一种类型

type PointX = {
 x: number;
}
 
type Point =  PointX & {
 y: number;
}
 
let point: Point = {
    x: 1,
    y: 2

若有多种类型

type PointX = {
 x: number;
 z: string;
}
 
type Point =  PointX & {
 y: number;
 z: number;
}
 
let point: Point = {
    x: 1,
    y: 2,
    z: 3, // Type 'number' is not assignable to type 'never'.
}

这里 z 为什么会是 never 类型喃?因为 string & number 的值是永不存在的值,即 never

type PointX = {
 x: number;
 z: {x: string};
}
 
type Point =  PointX & {
 y: number;
   z: {z: number};
}
 
let point: Point = {
    x: 1,
    y: 2,
    z: { 
      x: '1',
      z: 2
    },
}

而这样是可以的,所以,即多个类型合并为一个交叉类型时,如果多个类型间存在同名基础类型属性时,合并后的同名基础类型属性为 never ,如果同名属性均为非基础类型,则可以成功合并

3. ?: 可选参数

TypeScript 特有的,在 TypeScript 2.0 支持了这个特性,可选参数和属性会自动把 undefined 添加到他们的类型中,即使他们的类型注解明确不包含 undefined 。例如,下面两个类型是完全相同的:

// 使用--strictNullChecks参数进行编译
type T1 = (x?: number) => string              // x的类型是 number | undefined
type T2 = (x?: number | undefined) => string  // x的类型是 number | undefined

在TypeScript里,我们使用 ?: 最多的情况是在接口中,通常:

interface Point {
  x: number;
  y: number;
}
 
let point: Point
point = {
  x: 1,
  y: 2
}

其中 point 中的两个属性 x 、 y 都是必须的,如果赋值时缺少任意一个就会报错:

point = {
  x: 1
}
// Property 'y' is missing in type '{ x: number; }' but required in type 'Point'.

但接口里的属性不全都是必需的。有些是只在某些条件下存在,或者根本不存在。所以,这里就需要可选属性( ?. ),即属性是可选的

interface Point {
  x: number;
  y: number;
  z?: number; // 可选属性
}
 
let point: Point
point = {
  x: 1,
  y: 2
}

4. | 联合类型

联合类型表示一个值可以是几种类型之一,用竖线( |)分隔每个类型,所以 number | string | boolean 表示一个值可以是 number, string,或 boolean

let user: string | number | boolean = 'an'

联合类型通常与 null 或 undefined 一起使用:

const helloName = (name: string | undefined) => {
  /* ... */
};

你也可以这么用:

type Hello = 'say' | 'kiss' | 'smile';

5. ?? 空值合并运算符

当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。

// {
//   "level": null
// }
var level1 = user.level ?? '暂无等级' // level1 -> '暂无等级'
var level2 = user.other_level ?? '暂无等级' // level1 -> '暂无等级'

与逻辑或操作符(||) 不同,|| 会在左侧操作数为 false 值(例如,‘’ 或 0)时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为:

// {
//   "level": 0   
// }
var level1 = user.level || '暂无等级' // level1 -> 暂无等级
var level2 = user.level ?? '暂无等级' // level2 -> 0

6. ! 非空断言类型符

在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型的。具体而言,运算 x! 产生一个不包含 null 和 undefined 的 x 的值。

function sayHello(hello: string | undefined) {
  const hi1 = hello!.toLowerCase() // OK
  const hi2 = hello.toLowerCase() // Error: Object is possibly 'undefined'
}

7. _ 数字分隔符

允许用户在数字之间使用下划线_来对数字分组。

const million = 1_000_000
const phone = 173_1777_7777
const bytes = 0xFF_0A_B3_F2
const word = 0b1100_0011_1101_0001

需要注意的是以下函数是不支持分隔符:

  • Number()
  • parseInt()
  • parseFloat()

8. ** 指数运算符

2**5 // 32
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7361.html
标签
评论
发布的文章

Pycharm创建json文件类型

2024-05-12 00:05:50

C#Post请求,带json参数。

2024-05-12 00:05:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!