typescript类型描述中的nullable类型及实例

771 阅读4分钟

在本教程中,我们将结合实例讨论以下内容

  • 如何定义可以是字符串或空值的类型?
  • 如何给变量赋值null?
  • typecript可返回类型为空
  • 如何分配空类型的接口

在typescript应用程序中,处理nullable类型是避免运行时问题的重要步骤。

如何在typescript中用strictNullCheck声明可赋值类型?

Typescript是javascript的静态类型版本,所以strictNullCheck ,在tsconfig.json中的配置可以避免nullable错误。

strictNullCheck=false - nullundefined 是现有类型的子类型,所以我们可以对它们进行赋值而不出错。

宣告了一个字符串变量,可以分配给string,nullundefined

let name: string;
name = "johan";  // valid
name = null;      // valid
name = undefined; // valid

如果strictNullCheck 被设置为true ,那么nullundefined 的值就不会被分配给不同类型的属性。

let name: string;
name = "johan";  // valid
name = null;      // error
name = undefined; // error

在这种情况下,nullundefined 被视为一个单独的类型,不会被分配到不同类型的属性。

修复方法是为变量声明添加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,undefinedempty 是不允许的。

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 ,为字段添加unionoptional 类型。

interface Employee {
    name?: string |null;
    department?: string|null;
}

这将接受null和undefined以及可选的值。

结论

在typescript中,处理null是需要知道的,以避免运行时的错误。不同的方法都有实例记录