返回全栈开发
PATH 02/LESSON 05/25 分钟

JavaScript 与 TypeScript 基础

写一个接收 unknown 的标题校验函数,测试数字、空字符串、超长输入和正常输入。

课程全目录 · 选择章节

本课学习目标

  • • 理解 — JavaScript 控制运行时行为,TypeScript 在开发阶段检查类型。理解函数、对象、数组与不可变更新,再使用类型表达输入输出。外部数据不会因为类型断言变得安全,仍需要运行时验证。
  • • 应用 — 从接口获得的标题可能不是字符串。直接断言为 Note 会隐藏问题;使用 typeof 和长度约束后再进入渲染,才能给出可靠错误提示。
  • • 验证 — 写一个接收 unknown 的标题校验函数,测试数字、空字符串、超长输入和正常输入。

完成路径

阅读概念与案例 → 完成动手任务 → 勾选实践检查 → 回答检查点 → 保存完成记录。练习由你自行检查,不会假装成自动代码评分。

01 / 核心概念

JavaScript 控制运行时行为,TypeScript 在开发阶段检查类型。理解函数、对象、数组与不可变更新,再使用类型表达输入输出。外部数据不会因为类型断言变得安全,仍需要运行时验证。

从接口获得的标题可能不是字符串。直接断言为 Note 会隐藏问题;使用 typeof 和长度约束后再进入渲染,才能给出可靠错误提示。

不要滥用 any 或类型断言跳过检查。类型在编译后消失,网络响应、表单和环境变量仍是必须验证的边界。

02 / 心智模型

01

理解

JavaScript 控制运行时行为,TypeScript 在开发阶段检查类型。理解函数、对象、数组与不可变更新,再使用类型表达输入输出。外部数据不会因为类型断言变得安全,仍需要运行时验证。

02

应用

从接口获得的标题可能不是字符串。直接断言为 Note 会隐藏问题;使用 typeof 和长度约束后再进入渲染,才能给出可靠错误提示。

03

验证

写一个接收 unknown 的标题校验函数,测试数字、空字符串、超长输入和正常输入。

03 / 代码骨架

TYPESCRIPT / CONCEPT
function isTitle(value: unknown): value is string {
  return typeof value === 'string' && value.trim().length > 0 && value.length <= 120;
}

这是解释结构的代码骨架,外部函数与数据需要在实际项目中实现。

04 / 贯穿案例

放进真实情境里看

从接口获得的标题可能不是字符串。直接断言为 Note 会隐藏问题;使用 typeof 和长度约束后再进入渲染,才能给出可靠错误提示。

  1. 01

    分析边界

    JavaScript 控制运行时行为,TypeScript 在开发阶段检查类型。理解函数、对象、数组与不可变更新,再使用类型表达输入输出。外部数据不会因为类型断言变得安全,仍需要运行时验证。

  2. 02

    观察具体过程

    从接口获得的标题可能不是字符串。直接断言为 Note 会隐藏问题;使用 typeof 和长度约束后再进入渲染,才能给出可靠错误提示。

  3. 03

    验证失败路径

    不要滥用 any 或类型断言跳过检查。类型在编译后消失,网络响应、表单和环境变量仍是必须验证的边界。

05 / 动手做

用自己的产物检验理解

写一个接收 unknown 的标题校验函数,测试数字、空字符串、超长输入和正常输入。

完成时检查

  • 提交可阅读的实现或流程图,并注明输入和输出。
  • 至少覆盖一个成功案例与一个失败案例。
  • 解释本课的边界,写出仍未解决的一项限制。

自动保存在当前浏览器,不会同步到账户。

继续到代码练习

06 / 检查点

把网络响应断言为 Note 类型后,还需要校验吗?

延伸阅读 · 原始资料