快速开始 - TypeScript 入门指南
环境安装
为了学习使用 TypeScript,你首先要把 TypeScript 编译工具安装到你的本地环境中。打开终端执行以下命令:
npm install -g typescript
Tips:如果你无法使用 npm 命令,请确保你本地已安装了 Node 环境。Mac 电脑可能会需要用到 sudo 命令。
安装完成后,你可以通过 tsc -v
命令进一步确认 TypeScript 是否成功安装。正常情况下,它将输出你当前安装的 TypeScript 版本信息。
编写代码
环境准备就绪后,你可以尝试打开编辑器新建一个如下内容的 greet.ts
文件:
function greet(what) {
console.log(`hello ${ what }`);
}
greet("world");
然后将终端命令行切换到该文件目录下,执行 tsc greet.ts
编译命令。如果你是首次编译该文件,目录里会输出一个同名的 greet.js
文件。否则,编译器将更新该文件。
类型注解
或许你注意到了,上面的代码和 JavaScript 代码是一致的。接下来让我们更新一下这个文件:
function greet(what: string) {
console.log(`hello ${ what }`);
}
greet({ name: "world" });
你这里看到的 what: string
是 TypeScript 独有的一种写法,被称为类型注解。这是 TypeScript 提供的一种轻量级的为函数或变量添加约束的方式,语法结构为 <target>:<type>
。其中 <targert>
是约束目标,可以是对象、函数等任意 JavaScript 值;<type>
是约束方式,可以是 JavaScript 的原始类型、构造函数或者你创建的自定义类。
类型契约
重新编译这个更新后的文件,你会看到编译器终端向你报告了一个错误。
Argument of type '{ name: string; }' is not assignable to parameter of type 'string'.
这就是 TypeScript 为 JavaScript 提供的功能——类型约束。
现在假定 greet()
是一个第三方提供的 API,你无法对它做出修改。为了修复上面的编译错误,你必须给 greet()
传入一个 string
类型的参数。
当然,如果情况允许你修改 greet()
的定义,你可以重构 greet()
如下:
function greet(what: { name: string }) {
console.log(`hello ${ what.name }`);
}
现在,greet({ name: "world" })
就不会编译出错了。
变量注解
类似地,你也可以在变量声明的时候,为变量添加类型上的使用约定。
let isOk: boolean;
let student: {
name: string;
age: number;
};
这样之后,你就不能随便地为变量赋值,赋值必须符合定义的类型结构。
isOk = true; // Okay
student = { name: "小明" }; // Error
student = { name: "小明", age: 20 }; // Okay
可以看到,TypeScript 提供的类型安全其实就是描述了什么样的值是可以被安全传递的。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,携手博客园推出1Panel与Halo联合会员
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步