blocks|key|613277|text|一种方法是将数组转换为string+%7C+undefined数组。这可能是我最喜欢的方法，因为它不会在转移的JavaScript代码中留下任何痕迹。而且，它仍然可以防止您意外地检查number，这实际上是没有意义的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|613278|const+someTest+=+(['creditCard',+'payPal']+as+(string+%7C+undefined)[]).includes(someObj.paymentData?.paymentMethod);|code-block|syntax|javascript|613279|这在TypeScript代码中有点冗长，因此还有两个选项：|613280|如果定义了someObj.paymentData?.paymentMethod，则预先检查：|613281|const+someTest+=+!!someObj.paymentData?.paymentMethod+&&+['creditCard',+'payPal'].includes(someObj.paymentData.paymentMethod);|613282|如果undefined使用空合并运算符(??)，则通过返回到空字符串来确保该值始终是字符串：|613283|const+someTest+=+['creditCard',+'payPal'].includes(someObj.paymentData?.paymentMethod+??+'');|613284|为了进一步参考，下面是GitHub上的一个相关线程--+Array.includes函数的类型：https://github.com/microsoft/TypeScript/issues/26255|613285|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/microsoft/TypeScript/issues/26255^0|B|I|2H|6|0|0|0|5|Y|0|0|2|9|K|2|0|0|S|E|1C|1G|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1A|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@]|E|$]]|$1|S|3|T|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|U|3|V|5|6|7|1L|8|@$9|1M|A|1N|B|C]]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|W|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

One way is to cast the array to an array of <code>string | undefined</code>. This is probably my preferred way as it doesn't leave any traces in the transpiled JavaScript code. Also it still prevents you from accidentally checking against e.g. a <code>number</code> which actually doesn't make sense.
<pre><code>const someTest = (['creditCard', 'payPal'] as (string | undefined)[]).includes(someObj.paymentData?.paymentMethod);
</code></pre>
It is a bit verbose in the TypeScript code tho, so there are two more options:
Checking upfront if <code>someObj.paymentData?.paymentMethod</code> is defined:
<pre><code>const someTest = !!someObj.paymentData?.paymentMethod &amp;&amp; ['creditCard', 'payPal'].includes(someObj.paymentData.paymentMethod);
</code></pre>
Ensuring the value is always a string by falling back to an empty string in case of <code>undefined</code> using the nullish coalescing operator (<code>??</code>):
<pre><code>const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod ?? '');
</code></pre>
For further reference, here is a related thread on GitHub abut the typing of the <code>Array.includes</code> function: <a href="https://github.com/microsoft/TypeScript/issues/26255" rel="noreferrer">https://github.com/microsoft/TypeScript/issues/26255</a>

blocks|key|1215735|text|理想情况下，将定义paymentMethod类型。通常这是由一个API定义的，如果不是，您应该定义它：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1215736|type+PaymentMethod+=+'creditCard'+%7C+'payPal';

interface+SomeType+{
++paymentMethod?:+PaymentMethod;
}

const+someObj:+SomeType+=+{};

const+someTest+=+['creditCard',+'payPal'].includes(someObj.paymentMethod);|code-block|syntax|javascript|1215737|entityMap^0|9|D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Ideally, the <code>paymentMethod</code> type would be defined. Usually this is defined by an API, if not, you should define it:
<pre><code>type PaymentMethod = 'creditCard' | 'payPal';

interface SomeType {
 paymentMethod?: PaymentMethod;
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentMethod);
</code></pre>

blocks|key|1231139|text|您可以使用非空断言运算符+-+!|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1231140|type+SomeType+=+{
++paymentMethod?:+string;
}

const+someObj:+SomeType+=+{};

const+someTest+=+['creditCard',+'payPal'].includes(someObj.paymentMethod!);|code-block|syntax|javascript|1231141|工作实例|1231142|entityMap|0|LINK|mutability|MUTABLE|url|https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator|1|https://www.typescriptlang.org/play?#code/C4TwDgpgBAyg9gWwgFXNAvFA3gWAFBRRgCGISAdsALITAAWcAJgPwBcUAzsAE4CW5AcwDc%2520AL758AYzjkunRBADyAIwBW7eElSQomLKJF4pMuRwXIIczAG0A5JO4RGvYAGFi3RrYA0UWyRAABWIAG1sAXQA6fkkQgFdGSwAKMyQVVUiAimpaBkYAQgBKISA^0|F|1|5|7|0|0|0|0|4|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

You can use <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html#non-null-assertion-operator" rel="nofollow noreferrer">Non-null assertion operator</a> - <code>!</code>:
<pre class="lang-js prettyprint-override"><code>type SomeType = {
 paymentMethod?: string;
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentMethod!);
</code></pre>
<a href="https://www.typescriptlang.org/play?#code/C4TwDgpgBAyg9gWwgFXNAvFA3gWAFBRRgCGISAdsALITAAWcAJgPwBcUAzsAE4CW5AcwDc%20AL758AYzjkunRBADyAIwBW7eElSQomLKJF4pMuRwXIIczAG0A5JO4RGvYAGFi3RrYA0UWyRAABWIAG1sAXQA6fkkQgFdGSwAKMyQVVUiAimpaBkYAQgBKISA" rel="nofollow noreferrer">Working example</a>

Consider this example:
<pre><code>type SomeType = {
 paymentData?: {
 paymentMethod?: string;
 }
}

const someObj: SomeType = {};

const someTest = ['creditCard', 'payPal'].includes(someObj.paymentData?.paymentMethod);
</code></pre>
This doesn't work in TypeScript because it infers the type of the array elements to be <code>string</code> so it requires the value used with the <code>includes</code> function to also be of type <code>string</code>, but <code>someObj.paymentData?.paymentMethod</code> is possibly undefined aka the type is <code>string | undefined</code>. I cannot use the non-null assertion operator (<code>!</code>) as it can't be used after optional chaining.
JavaScript-wise it's perfectly fine if the <code>includes</code> checks with <code>undefined</code>, just TypeScript is unhappy about it. What are nice ways to satisfy TypeScript here?

TypeScript: How to use Array.includes with possibly undefined value (optional chaining) on array of strings

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

考虑一下这个例子：type SomeType = {  paymentData?: {    paymentMethod?: string;  }}const someObj: SomeType = {};const someTest = ['creditCard', 'payPal'].includes(someOb...

问TypeScript:如何在字符串数组上使用可能未定义的值(可选链接)的Array.includes
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问TypeScript:如何在字符串数组上使用可能未定义的值(可选链接)的Array.includesEN