Vue3中使用TypeScript操作Ref对象遇类型错误，求规范写法

如图所示，aliyun.value[key]会触发类型错误，虽然用{ [key: string]: string }作为ref的泛型参数能消除警告，但这种写法过于宽泛，更规范的做法是定义精确的类型约束：

方案1：使用接口定义类型 #

interface AliyunConfig {
  name: string;
  access_key_id: string;
  access_key_secret: string;
  sign_name: string;
}

const aliyun = ref<AliyunConfig>({
  name: "aliyun",
  access_key_id: "",
  access_key_secret: "",
  sign_name: ""
});

方案2：使用类型别名定义类型 #

type AliyunConfig = {
  name: string;
  access_key_id: string;
  access_key_secret: string;
  sign_name: string;
};

const aliyun = ref<AliyunConfig>({
  name: "aliyun",
  access_key_id: "",
  access_key_secret: "",
  sign_name: ""
});

为什么这两种写法更规范 #

• 精准限定了配置对象的合法键名，避免因误写键名导致的运行时错误
• TypeScript能提供更细致的类型校验和代码提示，比如访问不存在的属性时会即时报错
• 明确的类型定义提升了代码可读性，其他开发者能快速理解配置结构

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