TypeScript 中如何正确声明一个可选的函数参数？

UI国凤提问于 2026-03-06 12:52:21 阅读 81

前端

我在写一个工具函数，想让某个参数是可选的，但 TS 一直报错说类型不匹配。我试过用 param?: string，但调用时传 undefined 还是提示错误，是不是哪里写错了？

比如下面这个函数：

function greet(name: string, title?: string) {
  return title ? <code>${title} ${name}</code> : name;
}

当我这样调用 greet('Alice', undefined) 时，TS 就报错：“Argument of type ‘undefined’ is not assignable to parameter of type ‘string | undefined’.” 这不就矛盾了吗？

Promise 异步编程

我来解答赞 10 收藏

反馈

2 条解答

技术国凤 Lv1

哈，这个报错确实挺迷惑的，我刚开始用TS时也被坑过。其实问题出在TS对undefined的处理方式上，我来拆解下：

第一步，你当前的写法其实语法没错，title?: string 这种可选参数本质上就是 string | undefined 的简写形式。问题出在调用时的严格空检查。

第二步，解决方案有三种，按推荐程度排序：
1. 最推荐的方式是开启strictNullChecks的情况下显式声明类型：

function greet(name: string, title?: string | undefined) {

  // 这样明确告诉TS undefined是可接受的

  return title ? ${title} ${name} : name;

}

2. 如果你不想改函数声明，调用时可以用类型断言：

greet('Alice', undefined as unknown as string)

// 虽然能用但不优雅

3. 终极方案是在tsconfig.json里关掉strictNullChecks（不建议，会失去类型安全优势）

原理是这样的：TS默认情况下undefined和null是所有类型的子类型，但开启strictNullChecks后它们就变成了独立类型。你遇到的报错是因为虽然参数声明允许undefined，但调用时的undefined值没有被显式纳入类型系统。

顺便吐槽下，TS的类型系统有时候确实会让人想砸键盘，特别是从JS转过来的时候。不过习惯之后会发现这种严格检查其实帮我们避免了很多潜在的bug。

最后补充个最佳实践：如果你真的想表示"可选"，最好用 prop?: type 的语法糖；如果想明确允许undefined，就用联合类型 type | undefined。虽然效果相似，但语义上更清晰。

2026-03-07 12:01

❤津孜 Lv1

TS 默认严格模式会把 undefined 当成单独类型。关掉 strictNullChecks 或者显式声明 title: string | undefined 就行了。

改成这样：

function greet(name: string, title?: string | undefined) {

  return title ? ${title} ${name} : name;

}

2026-03-06 13:06