快速开始 - TypeScript 入门指南

环境安装

为了学习使用 TypeScript，你首先要把 TypeScript 编译工具安装到你的本地环境中。打开终端执行以下命令：

1. npm install -g typescript

复制代码

Tips：如果你无法使用 npm 命令，请确保你本地已安装了 Node 环境。Mac 电脑可能会需要用到 sudo 命令。

安装完成后，你可以通过 tsc -v 命令进一步确认 TypeScript 是否成功安装。正常情况下，它将输出你当前安装的 TypeScript 版本信息。
编写代码

环境准备就绪后，你可以尝试打开编辑器新建一个如下内容的 greet.ts 文件：

1. function greet(what) {
2.     console.log(`hello ${ what }`);
3. }
5. greet("world");

复制代码

然后将终端命令行切换到该文件目录下，执行 tsc greet.ts 编译命令。如果你是首次编译该文件，目录里会输出一个同名的 greet.js 文件。否则，编译器将更新该文件。
类型注解

或许你注意到了，上面的代码和 JavaScript 代码是一致的。接下来让我们更新一下这个文件：

1. function greet(what: string) {
2.     console.log(`hello ${ what }`);
3. }
5. greet({ name: "world" });

复制代码

你这里看到的 what: string 是 TypeScript 独有的一种写法，被称为类型注解。这是 TypeScript 提供的一种轻量级的为函数或变量添加约束的方式，语法结构为 :。其中  是约束目标，可以是对象、函数等任意 JavaScript 值； 是约束方式，可以是 JavaScript 的原始类型、构造函数或者你创建的自定义类。
类型契约

重新编译这个更新后的文件，你会看到编译器终端向你报告了一个错误。

1. Argument of type '{ name: string; }' is not assignable to parameter of type 'string'.

复制代码

这就是 TypeScript 为 JavaScript 提供的功能——类型约束。
现在假定 greet() 是一个第三方提供的 API，你无法对它做出修改。为了修复上面的编译错误，你必须给 greet() 传入一个 string 类型的参数。
当然，如果情况允许你修改 greet() 的定义，你可以重构 greet() 如下：

1. function greet(what: { name: string }) {
2.     console.log(`hello ${ what.name }`);
3. }

复制代码

现在，greet({ name: "world" }) 就不会编译出错了。
变量注解

类似地，你也可以在变量声明的时候，为变量添加类型上的使用约定。

1. let isOk: boolean;
2. let student: {
3.     name: string;
4.     age: number;
5. };

复制代码

这样之后，你就不能随便地为变量赋值，赋值必须符合定义的类型结构。

1. isOk = true; // Okay
3. student = { name: "小明" }; // Error
4. student = { name: "小明", age: 20 }; // Okay

复制代码

可以看到，TypeScript 提供的类型安全其实就是描述了什么样的值是可以被安全传递的。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！