Angular组件中按TS教程获取对象属性类型却返回属性值的问题咨询

嘿，我完全懂你这里的困惑！你其实是混淆了TypeScript的编译时类型系统和JavaScript的运行时行为，这是很多TS新手都会踩的坑～

核心问题解释 #

首先要明确：TypeScript的所有类型信息（包括泛型、类型注解、类型推断）都是编译阶段的工具，一旦代码被编译成JavaScript，所有类型相关的代码都会被完全擦除，最终运行的就是纯JS逻辑。

所以你的代码运行时输出10是完全正常的——getProperty函数在运行时的作用就是返回对象的属性值，和普通JS函数没区别。而你期望的number类型，是TypeScript在编译时给foo推断出的类型，它只在编写代码、编译检查的时候生效，不会出现在运行时的输出里。

如何验证你的类型推断是正确的？ #

虽然运行时看不到类型，但你可以通过TypeScript的编译检查来确认foo的类型确实是number：

• 在VS Code（或其他支持TS的编辑器）里把鼠标悬停在foo变量上，编辑器会显示它的类型是number；
• 尝试给foo赋值一个非number类型的值，比如foo = "hello"，TypeScript会立刻抛出编译错误，提示你“类型string不能赋值给类型number”——这就是泛型T[K]发挥的作用，它确保你在编译阶段就不会写错类型。

如果你需要运行时的类型判断？ #

如果你的需求是在运行时获取值的类型（比如判断这个值是number还是string），那得用JavaScript的运行时方法，比如typeof操作符：

console.log(typeof foo); // 运行时输出 "number"

注意，这里的"number"是字符串形式的类型标识，和TypeScript编译时的number类型不是同一个概念——前者是运行时的值，后者是编译时的类型约束。

看一下编译后的JS代码 #

为了更直观，你可以把你的TS代码编译成JS，会发现所有类型相关的代码都消失了：

const x = { foo: 10, bar: 'hello!' };
const foo = getProperty(x, 'foo');
console.log(foo);
function getProperty(obj, key) {
  return obj[key];
}

这就是实际运行的代码，自然会输出10啦～

总结一下：你的TS代码本身的类型推断是完全正确的，运行时返回属性值是预期行为。TypeScript的类型系统是帮你在写代码的时候避免类型错误，而不是在运行时返回类型信息哦！

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