Angular中字符串变量赋值数字无编译错误，如何解释该现象？

嘿，这个问题太常见了，刚从JS转TS的朋友几乎都会踩这个坑～我来给你拆解清楚：

核心原因：TypeScript是编译时类型检查，而非运行时 #

你写的TypeScript代码最终会被编译成JavaScript才能在浏览器里运行，而TypeScript的类型注解只在编译阶段生效，编译完成后所有类型信息都会被剥离，剩下的就是纯JS代码。

看你的代码：

import { Component } from '@angular/core';
@Component({
  selector: 'sandbox',
  template: ` <h1>Hello {{ name }}</h1>`
})
export class SanboxComponent {
  name:string = "John Doe"; // 声明name为string类型
  constructor() {
    this.name = 34; // 此处理论上应报错
  }
}

这段代码编译后对应的JS大概是这样：

import { Component } from '@angular/core';
@Component({
  selector: 'sandbox',
  template: ` <h1>Hello {{ name }}</h1>`
})
export class SanboxComponent {
  constructor() {
    this.name = "John Doe";
    this.name = 34;
  }
}

JS是弱类型语言，完全允许把数字赋值给原本存字符串的变量，运行时自然不会报错，Angular模板渲染时会把数字34隐式转换成字符串，所以浏览器输出Hello 34。

为什么编译时没报错？ #

大概率是你的TypeScript编译配置（tsconfig.json）没有开启严格的类型检查规则。Angular项目默认的配置可能会放宽一些限制，比如没有设置"strict": true，或者关闭了"noImplicitAny"、"strictNullChecks"等关键选项，导致编译器没有检测到这个类型不匹配的问题。

怎么让它按预期报错？ #

打开项目根目录的tsconfig.json，找到compilerOptions部分，把"strict"设为true：

{
  "compilerOptions": {
    "strict": true,
    // 其他配置...
  }
}

保存后重启Angular开发服务器，这时编译器就会检测到this.name = 34的类型错误，提示你不能把数字赋值给string类型的变量，完美符合你预期的行为～

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