快速开始 - TypeScript 入门指南
<h3 id="环境安装">环境安装</h3><p>为了学习使用 TypeScript，你首先要把 TypeScript 编译工具安装到你的本地环境中。打开<strong>终端</strong>执行以下命令：</p>
<pre><code class="language-shell">npm install -g typescript
</code></pre>
<blockquote>
<p>Tips：如果你无法使用 npm 命令，请确保你本地已安装了 Node 环境。Mac 电脑可能会需要用到 sudo 命令。</p>
</blockquote>
<p>安装完成后，你可以通过 <code>tsc -v</code> 命令进一步确认 TypeScript 是否成功安装。正常情况下，它将输出你当前安装的 TypeScript 版本信息。</p>
<h3 id="编写代码">编写代码</h3>
<p>环境准备就绪后，你可以尝试打开编辑器新建一个如下内容的 <code>greet.ts</code> 文件：</p>
<pre><code class="language-typescript">function greet(what) {
console.log(`hello ${ what }`);
}
greet("world");
</code></pre>
<p>然后将终端命令行切换到该文件目录下，执行 <code>tsc greet.ts</code> 编译命令。如果你是首次<strong>编译</strong>该文件，目录里会输出一个同名的 <code>greet.js</code> 文件。否则，编译器将更新该文件。</p>
<h3 id="类型注解">类型注解</h3>
<p>或许你注意到了，上面的代码和 JavaScript 代码是一致的。接下来让我们更新一下这个文件：</p>
<pre><code class="language-typescript">function greet(what: string) {
console.log(`hello ${ what }`);
}
greet({ name: "world" });
</code></pre>
<p>你这里看到的 <code>what: string</code> 是 TypeScript 独有的一种写法，被称为<strong>类型注解</strong>。这是 TypeScript 提供的一种轻量级的为函数或变量添加<strong>约束</strong>的方式，语法结构为 <code><target>:<type></code>。其中 <code><targert></code> 是约束目标，可以是对象、函数等任意 JavaScript 值；<code><type></code> 是约束方式，可以是 JavaScript 的原始类型、构造函数或者你创建的自定义类。</p>
<h4 id="类型契约">类型契约</h4>
<p>重新编译这个更新后的文件，你会看到编译器终端向你报告了一个错误。</p>
<pre><code class="language-shell">Argument of type '{ name: string; }' is not assignable to parameter of type 'string'.
</code></pre>
<p>这就是 TypeScript 为 JavaScript 提供的功能——类型约束。</p>
<p>现在假定 <code>greet()</code> 是一个第三方提供的 API，你无法对它做出修改。为了修复上面的编译错误，你<strong>必须</strong>给 <code>greet()</code> 传入一个 <code>string</code> 类型的参数。</p>
<p>当然，如果情况允许你修改 <code>greet()</code> 的定义，你可以重构 <code>greet()</code> 如下：</p>
<pre><code class="language-typescript">function greet(what: { name: string }) {
console.log(`hello ${ what.name }`);
}
</code></pre>
<p>现在，<code>greet({ name: "world" })</code> 就不会编译出错了。</p>
<h4 id="变量注解">变量注解</h4>
<p>类似地，你也可以在变量声明的时候，为变量添加类型上的使用约定。</p>
<pre><code class="language-typescript">let isOk: boolean;
let student: {
name: string;
age: number;
};
</code></pre>
<p>这样之后，你就<strong>不能</strong>随便地为变量赋值，赋值必须符合定义的类型结构。</p>
<pre><code class="language-typescript">isOk = true; // Okay
student = { name: "小明" }; // Error
student = { name: "小明", age: 20 }; // Okay
</code></pre>
<p>可以看到，TypeScript 提供的<strong>类型安全</strong>其实就是描述了什么样的值是可以被安全传递的。</p><br><br>
来源：https://www.cnblogs.com/jsnoah/p/-/guide_typescript-quickly
頁:
[1]