TypeScript报ts(2345)：string[]类型无法赋值给string类型解决求助

报错原因 #

你遇到的TS类型报错核心是：map()方法执行后返回的是字符串数组，但jQuery的html()方法仅支持传入字符串、DOM节点、文档片段等类型的参数，不允许直接传入数组，所以触发了类型不匹配的报错。

方案1：快速修复现有jQuery代码 #

仅需要给map处理后的数组增加join(' ')方法，把数组拼接为完整的HTML字符串即可解决报错：

componentDidLoad() {
  $('.tag').html(
    $('.tag').html()
      .split(', ')
      .map(function(el) {return '<span>' + el + '</span>'})
      .join(' ') // 新增该行，将数组元素拼接为空格分隔的字符串
  );
}

方案2：更符合Stencil开发规范的原生实现（无需引入jQuery） #

Stencil本身支持在render阶段直接处理渲染逻辑，不需要依赖jQuery操作DOM，性能更优也不会出现类似的类型报错，参考实现如下：

@Component({
    tag: 'stencil-component-text',
})
export class stencilComponentText {
    @Prop() prop: any;

    render() {
        if (this.prop.countryCode && this.prop.city) {
            // 提前处理城市的渲染内容
            const cityDom = this.prop.city.includes(',')
                ? this.prop.city.split(', ').map(cityItem => <span>{cityItem}</span>)
                : this.prop.city;
            return  <span class="testing">{this.prop.countryCode} - <span class="tag">{cityDom}</span>, {this.prop.state}</span>
        }
    }
}

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