请教TypeScript中下述表达式的含义及!!运算符的作用

表达式整体作用 #

这是React + TypeScript + Formik技术栈下的状态初始化代码，作用是从Formik全局表单上下文中取出指定下标对应的字段值，转换为布尔值后作为foo状态的初始值。

完整运行逻辑 #

整行代码核心是给React的useState Hook传入初始值，初始值由三元运算判断生成，执行顺序如下：

• 首先判断props.index是否为真值：
  • 若props.index为假值（包括undefined、null、0、空字符串等），直接返回false作为状态初始值
  • 若props.index为真值，执行后续的取值逻辑：
    1. 通过可选链运算符?.逐层安全取值：先取props.formikContext.values.foobar数组，再取下标为props.index的元素，最后取该元素的foofoo属性；如果中间任意一层取值为undefined/null，直接终止取值返回undefined，不会抛出空值报错
    2. 把取到的foofoo值通过!!强制转换为布尔类型，作为状态初始值

!!符号的含义 #

!!是JavaScript/TypeScript中强制把任意类型值转换为标准布尔值的常用简写，本质是两次连续的逻辑非运算：

• 第一次!运算：会先把原值转为布尔类型，再取反
• 第二次!运算：把第一次取反的结果再次取反，最终得到原值对应的标准布尔值

举个常见的使用场景例子：如果取到的foofoo是字符串"1"，第一次!运算得到false，第二次!运算得到true；如果取到的foofoo是undefined，第一次!运算得到true，第二次!运算得到false。这里用!!就是为了保证最终传入useState的初始值一定是布尔类型，避免出现非预期的类型异常。

内容的提问来源于stack exchange，提问作者Lin