Angular 2中变量名后带?的含义是什么？

嘿，这个问号其实是TypeScript的语法特性（Angular基于TypeScript开发，所以随处可见），用来标记可选属性/变量，具体可以分两种常见场景来理解：

1. 接口/类型定义中的可选属性 #

当你定义一个接口或者自定义类型时，属性名后的问号表示这个属性是可选的——也就是说，创建该类型的对象时，这个属性可以存在也可以不存在，TypeScript不会报错。举个例子：

interface Product {
  id: number; // 必填属性，必须提供
  name: string; // 必填属性
  description?: string; // 可选属性，可填可不填
}

// 合法：只提供必填属性
const book: Product = { id: 1, name: "TypeScript入门" };
// 也合法：包含可选属性
const phone: Product = { id: 2, name: "智能手机", description: "全面屏设计" };

2. 组件类中的可选变量 #

在组件类里定义变量时加问号，是告诉TypeScript这个变量允许为undefined，不需要强制初始化。比如有些变量可能要在异步操作（比如HTTP请求）完成后才赋值，提前加问号就能避免“变量未初始化”的编译错误：

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: '<p>{{ userName }}</p>'
})
export class UserComponent {
  userName?: string; // 允许初始为undefined，后续再赋值
}

额外提醒：别和模板里的?.搞混哦 #

很多人会把这个问号和Angular模板里的安全导航操作符?.弄混——模板里的{{ user?.name }}是用来防止user为null或undefined时访问name报错，和变量定义里的问号不是一回事，但因为经常一起出现，所以特意提一下~

简单总结：这个问号就是给TypeScript的一个“免责声明”：「这个属性/变量不一定有值，不用严格要求必须存在或初始化」，帮你避免很多不必要的编译错误。

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