tsy一些常用符号

非空断言操作符(!)

具体是指在上下文中当类型检查器无法断定类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言,x! 将从 x 值域中排除 null 和 undefined 。

1. 赋值时忽略 undefined 和 null

tsy一些常用符号_第1张图片

function myFn(value: string | undefined | null) {
  const onlyString: string = value; // Error
  const onlyString1: string = value!; // Ok
}

2. 函数调用时忽略 undefined 和 null

type MyGenerator = () => number
function myFn(myGenerator: MyGenerator | undefined | null) {
    const num1 = myGenerator();//Error, 不能调用可能是 "null" 或“未定义”的对象
    const num2 = myGenerator!();//ok
}

可选链操作符(?.)

可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

就是代码运行时如果遇到 nullundefined 就可以⽴即停⽌某些表达式的运⾏,直接返回undefined

语法和练习:

obj?.prop
obj?.[expr]
arr?.[index]
func?.(args
const obj = {
    foo: {
        bar: {
            baz: 42,
        },
    },
};

const baz = obj?.foo?.bar?.baz; // 42
const safe = obj?.qux?.baz; // undefined
console.log('baz', baz, safe)

可选元素访问:

可选链除了支持可选属性的访问之外,它还支持可选元素的访问,它的行为类似于可选属性的访问,只是可选元素的访问允许我们访问非标识符的属性,比如任意字符串、数字索引和 Symbol

  • 会自动检测输入参数 arr 的值是否为 null 或 undefined,从而保证了我们代码的健壮性
const getArrIndex = (arr: T[], index: number) => { 
    return arr?.[index]
}
//编译后的ES5语法
"use strict";
function getArrIndex(arr, index) {
    if (index === void 0) { index = 0; }
    return arr === null || arr === void 0 ? void 0 : arr[index];
}

可选链与函数调用:

当尝试调用一个可能不存在的方法时也可以使用可选链,系统中某个方法不可用,有可能是由于版本不一致或者用户设备兼容性问题导致的。函数调用时如果被调用的方法不存在,使用可选链可以使表达式自动返回 undefined 而不是抛出一个异常。

const result = obj.customMethod?.();

注意:

  • 如果存在一个属性名且该属性名对应的值不是函数类型,使用 ?. 仍然会产生一个 TypeError 异常。
  • 可选链的运算行为被局限在属性的访问、调用以及元素的访问 —— 它不会沿伸到后续的表达式中,也就是说可选调用不会阻止 a?.b / someMethod() 表达式中的除法运算或 someMethod 的方法调用。

空值合并运算符(??)

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

const rr= null ?? 'nordon'; // 返回nodedon
const dd = 0 ?? 18; // 返回 0
const cc = 0 || 18; // 返回 18

短路:

当空值合并运算符的左表达式不为 null 或 undefined 时,不会对右表达式进行求值。

function A() { console.log('A was called'); return undefined;}
function B() { console.log('B was called'); return false;}
function C() { console.log('C was called'); return "foo";}
console.log(A() ?? C()); 
//A was called
//C was called
//foo
console.log(B() ?? C());
//B was called
//false

不能与 && 或 || 操作符共用

若空值合并运算符 ?? 直接与 AND(&&)和 OR(||)操作符组合使用 ?? 是不行的。这种情况下会抛出 SyntaxError。当使用括号来显式表明优先级时是可行的

null || undefined ?? "foo"; // raises a SyntaxError 不能在不使用括号的情况下混用 "||" 和 "??" 操作。

true && undefined ?? "foo"; // raises a SyntaxError 不能在不使用括号的情况下混用 "&&" 和 "??" 操作

(true && undefined) ?? "foo"; //ok

与可选链操作符 ?. 的关系

空值合并运算符针对 undefined 与 null 这两个值,可选链式操作符 ?. 也是如此。可选链式操作符,对于访问属性可能为 undefined 与 null 的对象时非常有用

interface A {
    name: string;
    city?: string;
  }
  
  let customer: A = {
    name: "mary"
  };
  
  let customerCity = customer?.city ?? "Unknown city";
  console.log(customerCity); // 输出:Unknown city

可选属性(?:)

接⼝是⼀个很重要的概念,它是对⾏为的抽象,⽽具体如何⾏动需要由类去实现。TypeScript 中的接⼝是⼀个⾮常灵活的概念,除了可⽤于对类的⼀部分⾏为进⾏抽象以外,也常⽤于对「对象的形状(Shape)」进⾏描述。

interface Person {
    name: string;
    age: number; 
}
//类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性
let mary: Person = {
    name: "mary" //error
};

interface Person1 {
    name: string;
    age?: number; 
}
let mary1: Person1 = {
    name: "mary" //ok
};

运算符(&)

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

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

运算符(|)

在 TypeScript 中联合类型(Union Types)表示取值可以为多种类型中的⼀种,联合类型使⽤ | 分隔每个类型。联合类型通常与 null 或 undefined ⼀起使⽤
 

const fn = (info: strong | null | undefined) => {}

数字分隔符(_)

对于⼀个数字字⾯量,现在可以通过把⼀个下划线作为它们之间的分隔符来分组数字

const num1 = 1_234_567;
// 等价
const num1 = 1234567;

 

你可能感兴趣的:(前端,JS,typeScript,javascript,前端,开发语言,typescript)