TypeScript中如何指定类型？无需新变量标记变量类型的方法

嗨，我来帮你解决这两个TypeScript类型相关的问题，这在日常开发中确实是很常见的需求～

TypeScript提供了多种灵活的方式来为变量、函数、对象等指定类型，这里列举几种最常用的：

• 变量声明时直接添加类型注解
  这是最基础的方式，在变量名后面加: 类型即可明确指定：

  let username: string = "ScreamZ";
  let age: number = 28;
  let isActive: boolean = true;
  

• 为自定义对象类型指定类型
  你可以用interface或type定义自定义类型，再给变量标注：

  interface RoleCard {
    id: number;
    roleName: string;
    level: number;
  }
  
  // 直接标注变量为RoleCard类型
  let myCard: RoleCard = { id: 101, roleName: "Mage", level: 50 };
  

• 函数参数与返回值类型
  给函数的参数和返回值指定类型，让函数的输入输出逻辑更清晰：

  function getRoleCard(id: number): RoleCard {
    return { id, roleName: "Warrior", level: 30 };
  }
  

• 数组与泛型类型
  对于数组，可以直接指定元素的类型：

  let cardList: RoleCard[] = [myCard, { id: 102, roleName: "Rogue", level: 45 }];
  // 也可以用泛型写法
  let cardList: Array<RoleCard> = [...];
  

你提到现在用as语法，但不想额外定义新变量——其实as本身就支持直接在表达式中使用，完全不需要赋值给新变量。除此之外还有几种实用方式：

• 直接在表达式中使用as类型断言
  如果你的变量是any类型或者TS无法自动推断的类型，可以直接在使用时断言为目标类型：

  // 假设getRawData()返回的是any类型，直接断言为RoleCard后访问属性
  console.log((getRawData() as RoleCard).roleName);
  
  // 针对已存在的变量，比如rawCard是any类型
  let rawCard: any = { id: 103, roleName: "Priest", level: 40 };
  // 直接断言后访问属性，不用赋值给新变量
  console.log((rawCard as RoleCard).level);
  

• 尖括号形式的类型断言（注意JSX场景）
  除了as，TS还支持尖括号的写法，但在React的JSX语法中会和标签冲突，所以非JSX场景可以用：

  console.log((<RoleCard>getRawData()).roleName);
  

• const断言（针对字面量）
  如果是对象字面量，你可以用as const让TS推断出最窄的类型，不用额外定义变量：

  // TS会推断出{ readonly id: 104; readonly roleName: "Paladin"; readonly level: 55 }
  console.log(({ id: 104, roleName: "Paladin", level: 55 } as const).roleName);
  

注意事项 #

类型断言只是告诉TypeScript“我确认这个值的类型是XX”，不会在运行时做任何类型检查，所以你需要确保这个值确实符合目标类型，否则可能会出现运行时错误哦～

内容的提问来源于stack exchange，提问作者ScreamZ