TypeScript参数传递疑问：为何两段代码参数访问结果不同？

嗨，你的猜想方向有点沾边，但其实本质和var/let的作用域关系不大，核心是闭包的变量捕获逻辑加上RxJS的异步特性在搞鬼，另外还有可选参数的类型问题影响。

先给你理清楚关键：

• 函数参数在TypeScript里的绑定逻辑和let是一致的，属于函数级的块级作用域，和var的特性不一样，所以你的猜想不完全准确。
• 第一段代码能正常运行的原因：你把filterValue赋值给了const filterId，这相当于给当前函数调用时的参数值拍了个不可变快照——这个filterId会固定保存调用时的参数值，RxJS的异步回调执行时，能稳稳拿到这个确定的值。
• 第二段代码出问题的核心：你直接在回调里引用参数filterValue，回调捕获的是这个参数的变量绑定，而不是固定的值。再加上你把filterValue设成了可选参数（加了?），TypeScript的类型检查会认为它可能是undefined，这会导致编译错误，让你误以为“无法访问”。另外，如果后续函数被多次调用或者参数被意外修改，回调拿到的也会是变化后的值，而不是当初调用时的参数值。

举个直观的例子：如果你的getServiceAreasFiltered被连续调用两次，第一次传"abc"，第二次传"def"，直接用filterValue的话，第一个异步请求完成时，可能会拿到第二次的"def"（当然实际每个函数调用有独立上下文，不会这么极端，但核心逻辑是捕获绑定而非固定值）；而用const filterId的话，每个调用都会保存自己的参数值，不会串味。

你也可以试试把可选参数改成带默认值的必填参数，比如filterValue: string = ''，这样TypeScript就不会报类型错误，也能正常访问参数了。

下面是你的两段代码：

可正常运行的代码 #

getServiceAreasFiltered(page: number, filterValue: string): Observable {
  const filterId = filterValue;
  this._http.post(resource, content).pipe(
    flatMap(area => area.results),
    filter((area: ServiceAreaListItem) => area.guid === filterId),
  ).subscribe(x => x);
}

无法正常运行的代码 #

getServiceAreasFiltered(page: number, filterValue?: string): Observable {
  this._http.post(resource, content).pipe(
    flatMap(area => area.results),
    filter((area: ServiceAreaListItem) => area.guid === filterValue),
  ).subscribe(x => x);
}

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