当前位置： 首页 > news >正文

阮一峰《TypeScript 教程》学习笔记——基本用法

news 2025/10/15 8:19:22

1. 一段话总结

TypeScript 基本用法的核心包括类型声明（可选，语法为“标识符:类型”，需保证值与声明类型一致，未赋值变量不可使用）与类型推断（无声明时 TS 自动根据赋值推断类型，后续赋值类型不一致会报错，确保所有 JS 代码合法兼容）；因 JS 运行环境（浏览器/Node.js）不识别 TS，需通过编译转为 JS，关键工具包括在线的TypeScript Playground（快速编译、调试、分享代码）、官方tsc编译器（需 npm 全局安装，支持多文件编译、指定输出文件/目录/JS版本等参数，默认报错仍生成产物，可通过--noEmitOnError禁用）、tsconfig.json（存储编译配置，运行tsc时自动读取，简化命令）及非官方ts-node模块（直接运行 TS 脚本或进入 REPL 环境），同时需明确值与类型的分离（TS 处理类型代码，JS 处理值代码，编译时移除类型代码）。

2. 思维导图

在这里插入图片描述

3. 详细总结

3.1 核心概念：类型声明

TypeScript 最显著的特征是为 JS 变量、函数参数/返回值添加类型声明，明确值的合法类型。

  • 语法规则：一律在标识符后添加“: + 类型”，格式为 标识符: 类型。
    • 变量声明示例：let foo:string;（声明 foo 为字符串类型）
    • 函数声明示例：function toString(num:number):string { return String(num); }（参数 num 为 number 类型，返回值为 string 类型）
  • 关键约束：
    1. 变量赋值需与声明类型一致，否则报错。例如：let foo:string = 123;（报错，string 类型不能赋值为 number）。
    2. 未赋值的变量不可使用，否则报错。例如：let x:number; console.log(x);（报错，变量 x 未初始化），而 JS 中未赋值变量会返回 undefined 且不报错。

3.2 核心概念：类型推断

类型声明并非必需，若省略声明，TypeScript 会自动推断类型，这是 TS 兼容 JS 的关键设计。

  • 推断规则：根据变量的初始赋值、函数的返回值自动确定类型。
    • 变量推断示例：let foo = 123;（TS 推断 foo 为 number 类型，后续赋值 foo = 'hello' 会报错）。
    • 函数返回值推断示例：function toString(num:number) { return String(num); }（TS 推断返回值为 string 类型，因此函数返回值类型通常可省略）。
  • 核心优势：
    1. 所有 JS 代码都是合法的 TS 代码（无需修改即可在 TS 环境运行）。
    2. 老 JS 项目迁移 TS 时，可逐步添加类型声明，无需一次性改造所有代码。

3.3 核心概念：值与类型

学习 TS 需严格区分**“值”（value）** 和**“类型”（type）**，二者职责分离：

  • 值：具体的数据（如 3、'hello'），由 JavaScript 处理（负责运行时逻辑）。
  • 类型：值的元属性（如 3 的类型是 number），由 TypeScript 处理（负责编译时类型检查）。
  • 编译逻辑：TS 编译时会完全移除所有类型代码，仅保留值代码（即最终生成的 JS 代码不含任何类型信息），因此 TS 仅做编译时类型检查，不影响 JS 运行结果。

3.4 编译基础：为什么需要编译？

JavaScript 运行环境（浏览器、Node.js）无法识别 TypeScript 代码，因此 TS 项目必须先通过编译转换为 JS 代码，才能运行。TS 官方仅提供编译器，不提供运行环境。

3.5 在线工具：TypeScript Playground

最简单的 TS 调试工具，无需本地安装，直接通过官网网页使用：

  • 核心功能：
    1. 实时编译：输入 TS 代码，自动生成对应的 JS 代码。
    2. 报错提示：实时显示类型错误及详细信息。
    3. 执行产物：可在浏览器中直接运行编译后的 JS 代码。
    4. 分享代码：支持将代码片段和编译器设置保存为 URL，分享给他人。
  • 使用建议：本书所有示例均可在此工具中验证、调试。

3.6 官方编译器：tsc

TypeScript 官方提供的编译器 tsc，用于将 .ts 文件（TS 脚本）转换为 .js 文件（JS 脚本），是本地开发的核心工具。

3.6.1 tsc 安装

tsc 是 npm 模块，需先安装 Node.js（自带 npm），再通过以下命令全局安装：

npm install -g typescript
  • 安装验证：运行 tsc -v 或 tsc --version，输出版本号即安装成功（示例：Version 5.1.6）。

3.6.2 tsc 核心参数

tsc 支持多种参数调整编译行为，常用参数如下表：

参数名作用示例命令
无参数（仅文件）编译指定 TS 文件，生成同名 JS 文件tsc app.ts（生成 app.js）
--outFile将多个 TS 文件合并为单个 JS 文件tsc file1.ts file2.ts --outFile app.js
--outDir指定编译产物的输出目录tsc app.ts --outDir dist（产物存于 dist 文件夹）
--target指定输出 JS 的版本（默认 es3）tsc --target es2015 app.ts（输出 ES6 代码）
--noEmitOnError编译报错时，不生成 JS 产物tsc --noEmitOnError app.ts
--noEmit仅检查类型错误，不生成任何 JS 产物tsc --noEmit app.ts
-h/--help查看基本帮助信息tsc -h
--all查看完整帮助信息tsc --all

3.6.3 tsc 编译错误处理

  • 默认行为：即使代码存在类型错误，tsc 仍会生成 JS 产物（TS 团队认为开发者更了解代码，由开发者决定是否处理错误）。
    • 示例：错误代码 let foo:number = 123; foo = 'abc'; 编译时会报错，但仍生成 app.js（内容为 var foo = 123; foo = 'abc';）。
  • 自定义行为：
    1. 报错不生成产物：使用 --noEmitOnError 参数。
    2. 仅检查不生成产物：使用 --noEmit 参数（仅做类型校验，无输出）。

3.7 编译配置：tsconfig.json

当 tsc 参数较多时，可将所有编译配置写入 tsconfig.json 文件，tsc 运行时会自动读取该文件，无需在命令行重复输入参数。

3.7.1 核心作用

  • 存储编译参数，简化 tsc 命令（直接运行 tsc 即可，无需附加参数）。
  • 统一项目编译规则，确保团队协作时配置一致。

3.7.2 配置示例

将命令 tsc file1.ts file2.ts --outFile dist/app.js 转为 tsconfig.json 配置：

{"files": ["file1.ts", "file2.ts"], // 指定需编译的 TS 文件"compilerOptions": {               // 编译参数配置"outFile": "dist/app.js"         // 对应 --outFile 参数}
}
  • 使用方式：在配置文件所在目录运行 tsc，即可按配置编译。

3.8 便捷工具：ts-node 模块

ts-node 是非官方的 npm 模块，可直接运行 TS 脚本（无需手动执行 tsc 编译），适合快速调试。

3.8.1 ts-node 安装

npm install -g ts-node

3.8.2 核心用法

  1. 直接运行 TS 脚本：
    ts-node script.ts  # 运行 script.ts，输出结果
  2. 无需安装，临时调用：通过 npx 在线调用（避免全局安装）：
    npx ts-node script.ts
  3. 进入 REPL 环境：单独运行 ts-node，进入交互式 TS 环境（逐行输入代码并执行）：
    ts-node
> const twice = (x:string) => x + x;  # 输入函数
> twice('abc')                        # 调用函数，输出 'abcabc'
> .exit                               # 退出 REPL（或按 Ctrl+d）

4. 关键问题

问题 1：TypeScript 中的类型声明是必需的吗？类型推断的存在有什么实际意义？

答案：
类型声明不是必需的。TypeScript 会在无类型声明时，根据变量初始赋值、函数返回值自动推断类型（即类型推断）。
类型推断的实际意义包括两点：

  1. 保证 JavaScript 兼容性：所有 JS 代码可直接作为 TS 代码运行（无需添加任何类型声明），降低 TS 学习和迁移门槛；
  2. 支持项目逐步迁移：老 JS 项目转为 TS 项目时，无需一次性为所有代码添加类型，可先依赖类型推断运行，再逐步补全声明，减少改造成本。

问题 2：使用 tsc 编译器编译 TS 代码时，若存在类型错误会如何处理？如何配置才能让报错时不生成 JS 产物？

答案：

  • 默认处理逻辑：即使代码存在类型错误，tsc 仍会正常生成 JS 产物（TS 团队设计理念是“编译器仅提示错误，由开发者决定是否处理”）。
  • 配置报错不生成产物：需在 tsc 命令中添加 --noEmitOnError 参数。例如：
    tsc --noEmitOnError app.ts  # 若 app.ts 有类型错误，不生成 app.js
    若需长期生效，可将该参数写入 tsconfig.json 的 compilerOptions 中：
    {"compilerOptions": {"noEmitOnError": true}
}

问题 3：tsconfig.json 文件的核心作用是什么？如何通过它简化 tsc 编译命令？

答案：

  • 核心作用：存储 tsc 编译器的所有配置参数，统一项目编译规则，避免在命令行重复输入复杂参数，同时确保团队协作时编译配置一致。
  • 简化命令的方式：
    1. 将命令行中的参数（如编译文件、输出路径、JS 版本）写入 tsconfig.json；
    2. 例如，原命令 tsc file1.ts file2.ts --outDir dist --target es2015，对应的 tsconfig.json 配置为：
      {"files": ["file1.ts", "file2.ts"],"compilerOptions": {"outDir": "dist","target": "es2015"}
}
    3. 配置完成后，无需在命令行输入参数，直接运行 tsc 即可，编译器会自动读取 tsconfig.json 中的配置执行编译。
http://www.dtcms.com/a/482423.html

相关文章：

  • LabVIEW腔衰荡信号在线处理系统
  • 为 AI Agent 行为立“规矩”——字节跳动提出 Jeddak AgentArmor 智能体安全框架
  • Arbess CICD实战(12) - 使用Arbess+GitLab实现React.js项目自动化部署
  • 网站如何做延迟加载店铺图片免费生成
  • 【每日算法C#】爬楼梯问题 LeetCode
  • 网站制作很好 乐云践新二级网站建设情况说明书
  • USDe 脱锚事件全景还原
  • 【运维实践】深入理解 rsync+inotify：实时文件同步技术的原理与实践
  • AI在生产制造过程中的实践分享
  • 建一个优化网站多少钱抖音开放平台官网入口
  • 智能电网变电站综合自动化虚拟仿真实验
  • python自动化中（包括UI自动化和API自动化）env的作用和使用
  • Xcode16 避坑
  • 论文参考文献引用：规避查重率的有效策略
  • 先楫平台使用Jlink调试
  • 偏置电阻简介
  • 【温室气体数据集】历史温室气体与气溶胶排放数据集 CEDS
  • 家具品牌网站怎么做网站建设印花税
  • 建医疗网站步骤seo优化的技巧
  • 【小白笔记】strip的含义
  • 第136期 谷歌Jules Tools反击Copilot的主导地位：重新定义工作流自动化18
  • Apifox AI 测试用例生成：提高测试效率！
  • 【SpringBoot启动异常】解决@profileActive@相关异常问题
  • 深圳建设营销型网站1做网站的公司
  • 充电桩直流电能表导轨安装 精准计量 智慧运营
  • 像饿了码的网站建站有吗吉林省建设厅官网查询
  • CI/CD产品选型调研
  • 手写MyBatis第107弹：@MapperScan原理与SqlSessionTemplate线程安全机制
  • 专家深度解析5种关键优化方法，助力品牌在AI搜索引擎中脱颖而出
  • 开发实践：基于 PHP+Uniapp 的海外版上门预约系统