IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    TS – as vs is

    zhuxy发表于 2024-05-28 15:42:18
    love 0

    is 是 TypeScript 中用于类型断言的关键字,它用于在运行时对值的类型进行判断。通过使用 is,你可以编写自定义的类型保护函数,帮助 TypeScript 编译器理解代码中变量的类型。下面是 is 的语法和一个简单的使用案例:

    语法

    function isType(variable: any): variable is ExpectedType {
      // 检查 variable 是否为 ExpectedType 类型的值
      // 返回值为布尔类型,指示 variable 是否为 ExpectedType 类型
    }
    

    使用案例

    假设我们有一个 User 类型和一个 isAdmin 函数,用于判断用户是否为管理员。我们可以使用 is 关键字创建一个类型保护函数来告诉 TypeScript 编译器,当 user 为管理员时,它是一个 AdminUser 类型的值。

    interface User {
      name: string;
      isAdmin: boolean;
    }
    
    interface AdminUser extends User {
      privileges: string[];
    }
    
    function isAdmin(user: User): user is AdminUser {
      return user.isAdmin === true;
    }
    
    // 使用 isAdmin 函数进行类型保护
    function printUserInfo(user: User) {
      if (isAdmin(user)) {
        console.log(`${user.name} is an admin with privileges: ${user.privileges.join(', ')}`);
      } else {
        console.log(`${user.name} is not an admin.`);
      }
    }
    

    在这个例子中,isAdmin 函数接收一个 User 类型的参数,并返回一个布尔值。当用户是管理员时,它返回 true,表示用户是 AdminUser 类型的值;否则返回 false。在 printUserInfo 函数中,我们使用 isAdmin 函数对 user 变量进行类型保护,根据其返回值的类型来执行不同的逻辑。这样,TypeScript 编译器能够正确地推断出 user 在不同分支中的类型,并执行类型检查。

    as 是 TypeScript 中的类型断言关键字,用于手动指定一个值的类型。它可以用于类型转换,告诉 TypeScript 编译器在编译时将一个值视为特定的类型。下面是 as 的语法和一个简单的使用案例:

    语法

    const variableName = value as TypeName;
    

    或者

    const variableName = <TypeName>value;
    

    使用案例

    假设我们从后端 API 中获取一个 JSON 数据,并且我们知道该数据的结构。但由于网络请求的不确定性,TypeScript 编译器无法准确地推断出获取的数据的类型。在这种情况下,我们可以使用 as 进行类型断言,告诉 TypeScript 编译器将获取的数据视为特定的类型。

    interface UserData {
      id: number;
      name: string;
      email: string;
    }
    
    function fetchUserData(): any {
      // 模拟从后端 API 获取数据
      return {
        id: 1,
        name: 'Alice',
        email: 'alice@example.com'
      };
    }
    
    const userData = fetchUserData() as UserData;
    
    // 现在 TypeScript 编译器知道 userData 是一个 UserData 类型的对象
    console.log(userData.id);    // 正确:编译器知道 userData 有 id 属性
    console.log(userData.name);  // 正确:编译器知道 userData 有 name 属性
    console.log(userData.email); // 正确:编译器知道 userData 有 email 属性
    // console.log(userData.age); // 错误:编译器知道 userData 没有 age 属性
    

    在这个例子中,我们使用 as UserData 将 fetchUserData() 的返回值断言为 UserData 类型。这样一来,TypeScript 编译器就能够正确地推断出 userData 的类型,并且可以在后续代码中安全地使用该对象的属性。

    在TypeScript中,as和is是两种不同的类型断言方式,它们在使用场景和语义上有所不同。

    as 类型断言

    as 类型断言是TypeScript中用于类型转换的语法。它允许你将一个表达式的类型断言为另一个类型。这种断言在TypeScript编译器中不会进行类型检查,它告诉编译器你已经知道表达式的类型,并且你希望编译器按照你指定的类型来处理这个表达式。

    let someValue: any = "this is a string";
    
    // 使用 as 类型断言
    let strLength: number = (someValue as string).length;
    

    在上面的例子中,我们使用as断言将someValue的类型从any断言为string,然后访问length属性。

    is 类型守卫

    is 类型守卫是TypeScript中用于类型检查的语法。它通常与函数一起使用,用于在运行时检查一个值是否符合某个特定的类型。is关键字后面跟的是一个类型谓词,它告诉编译器如果条件为真,则表达式的类型为指定的类型。

    function isString(value: any): value is string {
      return typeof value === "string";
    }
    
    function processValue(value: any) {
      if (isString(value)) {
        // 在这里,TypeScript编译器知道value是string类型
        console.log(value.toUpperCase());
      } else {
        // 在这里,TypeScript编译器知道value不是string类型
        console.log(value.toFixed());
      }
    }
    

    在上面的例子中,isString函数是一个类型守卫函数,它返回一个布尔值,表示传入的值是否为字符串类型。在processValue函数中,我们使用isString函数来检查value的类型,并据此执行不同的操作。

    总结来说,as类型断言用于在编译时告诉TypeScript编译器一个表达式的类型,而is类型守卫用于在运行时检查一个值的类型。在使用时,应根据具体需求选择合适的方式。



沪ICP备19023445号-2号
友情链接