Frontend Academy · 课时

严格模式与消除 any

在 tsconfig 中启用所有严格标志，使用 unknown 替代 any，安全地应用类型断言，并将类型薄弱的文件迁移到严格模式。

严格模式与消除 any 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么使用严格模式

在 tsconfig.json 中设置 strict: true 会启用所有 TypeScript 安全标志，这是严肃项目的基本要求。它会在编译时捕获 null 错误、未标注类型的参数和不安全的赋值。

strict 启用的功能

strict 是一个元标志，会启用：noImplicitAny、strictNullChecks、strictFunctionTypes、strictBindCallApply、strictPropertyInitialization、alwaysStrict、noImplicitThis、useUnknownInCatchVariables。

strictNullChecks

未启用它时，null 和 undefined 可以赋给每一种类型，这是错误的常见来源。启用后，您必须显式处理 null 情况。

// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime

// With strictNullChecks:
function greet(name: string | null) {
  if (name == null) return '';
  return name.toUpperCase();
}

noImplicitAny

未启用此标志时，没有类型标注的参数会默认为 any，从而在不知不觉中绕过类型系统。启用 noImplicitAny 后，您必须为这些参数添加类型标注。

// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any

// With:
function format(value: string) { return value.toUpperCase(); }

strictPropertyInitialization

没有明确初始化器的类属性会被视为可能为 undefined。您可以初始化它们，或使用明确赋值运算符 !。

class User {
  name!: string;     // tell TS: I'll set this elsewhere
  age = 0;           // default initialiser
  email: string;     // ERROR with strictPropertyInitialization
  constructor(email: string) { this.email = email; } // FIX: init in ctor
}

使用 unknown 代替 any

any 会退出类型检查。unknown 是类型安全的，使用前必须先进行类型收窄。请始终优先使用 unknown。

// any — no checks, bug magnet:
function parse(input: any) {
  return input.toUpperCase(); // compiler is fine, runtime may crash
}

// unknown — must narrow:
function parse(input: unknown) {
  if (typeof input === 'string') {
    return input.toUpperCase();
  }
  throw new Error('Expected string');
}

安全地使用类型断言

如果必须进行断言（您比 TS 更了解情况），请优先使用 as 语法。除非确实别无选择，否则不要进行双重断言（x as unknown as T），这属于代码异味。

const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';

// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElement

从项目中消除 any

策略：启用 strict，然后逐个文件修复由此产生的错误。使用 unknown 并进行类型收窄。对于已知存在问题的位置，添加带 TODO 注释的 @ts-expect-error，这样就不能被忽略。

代码检查规则：no-explicit-any

将 @typescript-eslint/no-explicit-any 添加到您的 ESLint 配置中，以阻止新增 any。

// .eslintrc.json
{
  "rules": {
    "@typescript-eslint/no-explicit-any": "error"
  }
}

strictFunctionTypes

它会强制检查函数参数的逆变性，防止将参数类型比预期更宽泛的函数赋值给目标函数，从而避免运行时崩溃。

捕获变量类型

useUnknownInCatchVariables 会让 catch (e) 将 e 推断为 unknown，而不是 any。在访问属性前，您必须先进行类型收窄。

try {
  doRisky();
} catch (e) {
  // e is unknown
  if (e instanceof Error) {
    console.error(e.message);
  } else {
    console.error('Unknown error', e);
  }
}

迁移建议

从项目创建的第一天起，就为新项目启用 strict。对于遗留项目，请逐步启用各项标志。先从 strictNullChecks 开始（收益最大），然后启用 noImplicitAny。请使用 //@ts-expect-error，而不是 //@ts-ignore，这样问题修复后就可以移除该注释。

快速检查

当您不知道某个值的类型时，为什么 unknown 比 any 更安全？

回顾：严格模式

启用 strict: true 以获得完整的安全检查。strictNullChecks 强制处理 null。noImplicitAny 要求为参数添加类型标注。strictPropertyInitialization 用于检查类字段。使用 unknown 代替 any，并通过类型守卫进行收窄。避免双重断言。使用 no-explicit-any 进行代码检查。使用 @ts-expect-error 标记，逐个文件迁移遗留代码。

常见问题解答

「严格模式与消除 any」课时是免费的吗？

是的 — 「严格模式与消除 any」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「严格模式与消除 any」这节课中我会学到什么？

在 tsconfig 中启用所有严格标志，使用 unknown 替代 any，安全地应用类型断言，并将类型薄弱的文件迁移到严格模式。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「严格模式与消除 any」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy