TypeScript中的感叹号，你知道它吗？

1. 非空断言运算符

感叹号运算符称为非空断言运算符，添加此运算符会使编译器忽略undefined和null类型。来看例子：

创新互联是一家集网站建设,清丰企业网站建设,清丰品牌网站建设,网站定制,清丰网站建设报价,网络营销,网络优化,清丰网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

const parseValue = (value: string) => {
    // ...
};

const prepareValue = (value?: string) => {
    // ...
    parseValue(value);
};

对于 prepareValue 方法的 value 参数，TypeScript就会报出以下错误：

类型“string | undefined”的参数不能赋给类型“string”的参数。
不能将类型“undefined”分配给类型“string”。

类型“string | undefined”的参数不能赋给类型“string”的参数。不能将类型“undefined”分配给类型“string”。

因为我们希望 prepareValue 函数中的 value 是 undefined 或 string，但是我们将它传递给了 parseValue 函数，它的参数只能是 string。所以就报了这个错误。

但是，在某些情况下，我们可以确定 value 不会是 undefined，而这就是需要非空断言运算符的情况：

const parseValue = (value: string) => {
  // ...
};

const prepareValue = (value?: string) => {
  // ...
  parseValue(value!);
};

这样就不会报错了。但是，在使用它时应该非常小心，因为如果 value 的值是undefined ，它可能会导致意外的错误。

2. 使用示例

既然知道了非空断言运算符，下面就来看几个真实的例子。

在列表中搜索是否存在某个项目：

interface Config {
  id: number;
  path: string;
}

const configs: Config[] = [
  {
    id: 1,
    path: "path/to/config/1",
  },
  {
    id: 2,
    path: "path/to/config/2",
  },
];

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id);
};

const config = getConfig(1);

由于搜索的内容不一定存在于列表中，所以 config 变量的类型是 Config | undefined，我们就可以使用可以使用费控断言运算符告诉 TypeScript，config 应该是存在的，因此不必假设它是 undefined。

const getConfig = (id: number) => {
  return configs.find((config) => config.id === id)!;
};

const config = getConfig(1);

这时，config 变量的类型就是 Config。这时再从 config 中获取任何属性时，就不需要再检查它是否存在了。

再来看一个例子，React 中的 Refs 提供了一种访问 DOM 节点或 React 元素的方法：

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    if(ref.current) {
      console.log(ref.current.getBoundingClientRect());
    }
  };

  return (
    

      Click
    

  );
};

这里创建了一个简单的组件，它可以访问 class 为 App 的 DOM 节点。组件中有一个按钮，当点击该按钮时，会显示元素的大小以及其在视口中的位置。我们可以确定被访问的元素是在点击按钮后挂载的，所以可以在 TypeScript 中添加非空断言运算符表示这个元素是一定存在的：

const App = () => {
  const handleClick = () => {
    console.log(ref.current!.getBoundingClientRect());
  };
};

当使用非空断言运算符时，就表示告诉TypeScript，我比你更了解这个代码逻辑，会为此负责，所以我们需要充分了解自己的代码之后再确定是否要使用这个运算符。否则，如果由于某种原因断言不正确，则会发生运行时错误。

文章名称：TypeScript中的感叹号，你知道它吗？
网站地址：http://www.mswzjz.com/qtweb/news20/188870.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联