Angular+PrimeNG Dropdown报错：string类型不存在name属性

在PrimeNG Dropdown官网示例的StackBlitz代码里，模板中使用了selectedCountry.name，但TS文件里定义selectedCountry为string类型——字符串并没有name属性，这会触发错误TS2339: Property 'name' does not exist on type 'string'，但示例却能正常运行，这是为什么？

示例代码 #

HTML部分

<h5>Advanced with Templating, Filtering and Clear Icon</h5>
<p-dropdown
  [options]="countries"
  [(ngModel)]="selectedCountry"
  optionLabel="name"
  [filter]="true"
  filterBy="name"
  [showClear]="true"
  placeholder="Select a Country"
>
  <ng-template pTemplate="selectedItem">
    <div class="country-item country-item-value" *ngIf="selectedCountry">
      <div>{{ selectedCountry.name }}</div>
    </div>
  </ng-template>
  <ng-template let-country pTemplate="item">
    <div class="country-item">
      <div>{{ country.name }}</div>
    </div>
  </ng-template>
</p-dropdown>

TS部分

selectedCountry: string;
countries: any[];

1. 实际运行时的绑定值是对象，而非声明的字符串 #

PrimeNG Dropdown组件默认行为：当你只指定optionLabel（用来显示选项文本的字段），但没有设置optionValue时，组件会把整个选项对象绑定到ngModel上，而不是提取某个字段作为字符串。所以运行时selectedCountry实际是countries数组里的单个对象（带有name属性），并非字符串，因此模板里访问selectedCountry.name能正常工作。

2. TS类型声明属于示例疏漏 #

官网示例的TS类型声明是错误的，正确的写法应该把selectedCountry声明为any，或者更严谨地定义一个具体的类型：

interface Country {
  name: string;
  // 其他对应字段
}

selectedCountry: Country;
countries: Country[];

这样就能避免TypeScript的类型错误提示。

3. 开发环境的类型检查宽松性 #

StackBlitz默认的TypeScript或Angular配置可能没有开启最严格的类型检查，或者Angular的模板类型检查级别较低，导致这种类型不匹配的问题没有被立刻拦截。但这本质上是不符合TypeScript类型规范的错误，在严格模式下会触发报错。

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