Shulou(Shulou.com)06/01 Report--

Xiaobian to share with you how TypeScript to open strict null check, I believe most people still do not know how, so share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

In TypeScript, the basic data types undefined and null in JS have their own types called undefined and null respectively. let u: undefined = undefined;let n: null = null; null and undefined are children of all types by default...

let u: undefined = undefined;let n: null = null;

By default null and undefined are subtypes of all types. This means that you can assign null and undefined to variables of type number.

For example, the following code is fully executable in TS.

let userName: string;userName = ""; // OKuserName = null; // OKuserName = undefined; // OKlet age: number;age = 18; // OKage = null; // OKage = undefined; // OKlet isBoy: boolean;isBoy = true; // OKisBoy = false; // OKisBoy = null; // OKisBoy = undefined; // OK

Nullable pointers are one of the most common bugs in programming, but in TypeScript we can't use specific types to indicate that a particular variable can't be null! Fortunately, TypeScript 2.0 solves this problem!

strictNullChecks

TypeScript 2.0 adds support for non-nullable types. There is a new strict null checking mode that provides strictNullChecks

to limit checks for nulls. You can enable strict null checking by adding the--strictNullChecks parameter to the command line. You can also enable the strictNullChecks compiler option in your project's tsconfig.json file.

In TS, the default value of strictNullChecks is false for version compatibility

{ "compilerOptions": { "strictNullChecks": true // ... }}

You can enable strict null checking by checking strictNullChecks in TS official practice fields!

Attention point 1

In strict null-checking mode, null and undefined cannot be assigned to variables of other types.

For example, the following code cannot be compiled under *strictNullChecks=true.

let userName: string;userName = ""; // OKuserName = null; // OKuserName = undefined; // OK

Attention 2

Strict null checking does not mean that variables cannot be typed null and undefined

For example, the following code compiles normally with *strictNullChecks=true.

let userName: null;userName = null; let age: undefined;age = undefined;

二、变量如何可以为空

在正常的编程中，我们并不会直接将一个变量的类型设置为null或者undefined，例如username，我们通常设置为string类型。

如果我们想要username可以接受空值我们该怎么办呢？

1. 使用联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

对于下面的代码，userName可以接受null类型的值。但是无法接受undefined的值

let userName: string | null;userName = "搞前端的半夏"; // OKuserName = null; // OKuserName = undefined; // Error

2. a? 默认undefined

联合类型可以在Object中使用

type User = { name: string ; age:number | undefined};

这里我们设置age的类型为number和undefined。

下面的两种用法都是正确的。

let user1: User = { name: "搞前端的半夏", age: undefined };let user2: User = { name: "搞前端的半夏", age: 18 };

如果我们想要下面的效果，不需要手动给age赋值

let user2: User = { name: "搞前端的半夏"};

此时我们就需要用到**?**来使属性成为可选，这样我们就可以完全省略age属性的定义。

type User = { name: string ; age?:number };

请注意，在这种情况下：undefined类型会自动添加到联合类型中。因此，以下所有赋值都是正确的：

let user1: User = { name: "搞前端的半夏", age: undefined };let user2: User = { name: "搞前端的半夏", age: 18 };let user3: User = { name: "搞前端的半夏"};三、安全检查1. 变量可空的安全检查

如果变量的类型包含nullor undefined，则访问任何属性都会产生编译时错误：

function UserNameLength(userName: string | null) { return userName.length;}

所以在访问属性之前，必须要先判断变量的值是否为空!

function UserNameLength(userName: string | null) { if (userName === null) { return 0; } return userName.length;}四、可空类型的函数调用

在JS中支持回调函数，所以函数的参数会可能是函数类型，

function fn(callback?: () => void) { callback();}

如果该参数是可选的函数类型，TS会将该参数加上undefined类型。

那么这个函数的我们在调用函数的时候会报错!

类似于在访问属性之前检查对象，我们需要首先检查函数是否具有非空值：

function fn(callback?: () => void) { if (callback) { callback(); }}以上是"TypeScript怎么开启严格空值检查"这篇文章的所有内容，感谢各位的阅读!相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.