标签：Functions Typescript const Perform value getElementById null root document

In this lesson, we're going to look at how to perform null checks with assertion functions. We're going to assert that a nullable value doesn't hold the value null. In the process, we're going to learn how assertion functions integrate with TypeScript's control flow analysis.

const root = document.getElementById("root")

`root` can be `HTMLElement` or `null` type.

root.addEventListener("click", () => {
    
})

It reports `root` is possible to be null

It is possible to supress the error by using assert not null operator `!`

const root = document.getElementById("root")!

But it is still possible has runtime error.

We can use if check:

const root = document.getElementById("root")
if (root === null) {
    throw Error(`cannot find #root element`)
}
root.addEventListener("click", () => {

})

Better, we can use assertion:

function assertIsNonNullish<T>(
    value: T,
    message: string
): asserts value is NonNullable<T> {
    if (value === null || value === undefined) {
        throw Error(message);
    }
}

const root = document.getElementById("root")
assertIsNonNullish(root, "Cannot find #root element")
root.addEventListener("click", () => {

})

标签：Functions,Typescript,const,Perform,value,getElementById,null,root,document
来源： https://www.cnblogs.com/Answer1215/p/14725206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。