在本教程中,我们将结合实例讨论以下内容
- 如何定义可以是字符串或空值的类型?
- 如何给变量赋值null?
- typecript可返回类型为空
- 如何分配空类型的接口
在typescript应用程序中,处理nullable类型是避免运行时问题的重要步骤。
如何在typescript中用strictNullCheck声明可赋值类型?
Typescript是javascript的静态类型版本,所以strictNullCheck ,在tsconfig.json中的配置可以避免nullable错误。
strictNullCheck=false - null和 undefined
是现有类型的子类型,所以我们可以对它们进行赋值而不出错。
宣告了一个字符串变量,可以分配给string,null 和undefined 。
let name: string;
name = "johan"; // valid
name = null; // valid
name = undefined; // valid
如果strictNullCheck 被设置为true ,那么null 和undefined 的值就不会被分配给不同类型的属性。
let name: string;
name = "johan"; // valid
name = null; // error
name = undefined; // error
在这种情况下,null 和undefined 被视为一个单独的类型,不会被分配到不同类型的属性。
修复方法是为变量声明添加union 类型。
let name: string | null| undefined;
name = "Something"; // valid
name = null; // valid
name = undefined; // valid
如何在typescript的函数中允许空类型的参数?
在这个例子中,函数参数如何用不同的方法允许空值。
让我们在typescript中声明一个带有字符串参数的函数。
function printName(name: string) {
console.info(name);
}
这个函数只接受字符串,null,undefined 和empty 是不允许的。
printName("Franck"); // valid
printName(null); // error not valid
printName(undefined); // error not valid
printName() // // error not valid
让我们在函数参数中添加联合类型null ,以允许null 值。
function printName(name: string|null) {
console.info(name);
}
这个函数允许字符串和null类型,其他类型是不允许的。
printName("Franck"); // valid
printName(null); // valid
printName(undefined); // error not valid
printName() // // error not valid
现在让我们在函数参数中添加可选的?这允许接受可选的参数或未定义的参数和只接受字符串。
下面的函数添加了可选的参数
function printName(name?: string) {
console.info(name);
}
这个函数允许字符串或可选名称或未定义类型,不允许其他类型。
printName("Franck"); // valid
printName(null); // error invalid
printName(undefined); // valid
printName() // valid
为了允许空的、未定义的和可选的参数,我们可以用可选的参数来传递union。
function printName(name?: string|null) {
console.info(name);
}
这允许所有的情况,如下所示
printName("Franck"); // valid
printName(null); // valid
printName(undefined); // valid
printName() // valid
如何在typescript中返回nullable类型?
export class Employee {
private name: string;
public constructor() {
}
public getName(name: string) {
return null;
}
}
如果名字是空的,它会抛出一个错误。
为了避免这种情况,你必须声明如下
如果名字不是一个字符串,它返回null。
如何将null赋值给一个接口?
让我们声明一个带有简单字段名的接口
interface employee {
name: any;
}
让我们看看当一个接口被赋值为null时,会有什么行为?
-
tsconfig.json中的strictNullCheck=false
给一个接口添加空值是非常容易的
-
strictNullCheck=true in tsconfig.json
启用这个功能后,给接口分配null值会产生一个错误 类型'null'不能分配给类型'employee'。
解决办法是在union 类型中加入null
let emp:employee| null= null;
如何在typescript中声明接口字段为nullable?
一个接口可以有不同类型的属性,让我们在typescript中为这些属性添加可忽略的类型。
让我们用更多的属性来声明接口
interface Employee {
name: string;
department: string;
}
声明一个上述接口的对象并分配数据。下面的操作是有效的,没有出现错误
var emp1: Employee = { name: 'Franc', department:'sales' }; // OK
初始化一个雇员对象,没有部门字段
var emp2: Employee = { name: 'Franc' }; // an compilation error
下面是一个错误:
属性'department'在类型'{ name: string; }'中缺失,但在类型'Employee'中是必需的(2741)。
让我们将部门与undefined
var emp3: Employee = { name: 'Franc', department: undefined }; // an compilation error
抛出一个编译错误:
类型'undefined'不能被分配给类型'string'。
让我们用undefined 来传递部门,名称是null
var emp4: Employee = { name: null, department: undefined }; // an compilation error
它抛出了以下错误 类型'null'不能分配给类型'string'(2322)。
那么,有什么办法可以将null和undefined添加到类型中呢?
可以修改interface ,为字段添加union 和optional 类型。
interface Employee {
name?: string |null;
department?: string|null;
}
这将接受null和undefined以及可选的值。
结论
在typescript中,处理null是需要知道的,以避免运行时的错误。不同的方法都有实例记录