TypeScript 入门

🌐 Introduction to TypeScript

🌐 What is TypeScript

TypeScript 是由微软维护和开发的开源语言。

TypeScript is a superset of JavaScript that adds a static type system. It helps catch type-related errors during development, provides better editor support through features such as autocompletion and safe refactoring, and makes codebases easier to maintain as they grow.

我们可以稍后讨论 TypeScript 的其他好处，现在让我们看一些例子！

🌐 We can talk about other TypeScript benefits later, let's see some examples now!

🌐 First TypeScript code

看一下这个代码片段，然后我们可以一起解压它：

🌐 Take a look at this code snippet and then we can unpack it together:

type User = {
  name: string;
  age: number;
};

function isAdult(user: User): boolean {
  return user.age >= 18;
}

const justine = {
  name: 'Justine',
  age: 23,
} satisfies User;

const isJustineAnAdult = isAdult(justine);

Let's understand what happens here.

First, we define a custom type named User. This type describes the structure that every user object should follow. In this example, a user must have a name of type string and an age of type number.

Next, we create the isAdult function. It accepts a parameter of type User and returns a boolean, indicating whether the user's age is at least 18.

We then create a justine object. The satisfies operator verifies that the object conforms to the User type while preserving the object's most specific inferred type. This allows TypeScript to validate the object's structure without changing its inferred properties.

Finally, we call isAdult(justine) and store the result in isJustineAnAdult.

One of TypeScript's strengths is its ability to infer types automatically. For example, even though we never explicitly declared the type of isJustineAnAdult, TypeScript correctly infers it as boolean.

If the code doesn't match the declared types, for example, if age were a string instead of a number, TypeScript reports an error during development, helping you catch mistakes before your code runs.

Note

TypeScript's type system exists only during development. During compilation, all type annotations are removed, so they do not affect your application's runtime behavior.

🌐 What does TypeScript consist of?

TypeScript 由两个主要部分组成：代码本身和类型定义。

🌐 TypeScript consists of two main components: the code itself and type definitions.

🌐 TypeScript Code

代码部分是常规的 JavaScript，并附加了用于类型注解的 TypeScript 特定语法。当 TypeScript 代码被编译时，所有特定于 TypeScript 的部分都会被移除，从而生成可以在任何环境中运行的干净 JavaScript。例如：

🌐 The code part is regular JavaScript with additional TypeScript-specific syntax for type annotations. When TypeScript code is compiled, all the TypeScript-specific parts are removed, resulting in clean JavaScript that can run in any environment. For example:

function greet(name: string) {
  console.log(`Hello, ${name}!`);
}

🌐 Type Definitions

类型定义描述了现有 JavaScript 代码的结构。它们通常存储在 .d.ts 文件中，并且不包含任何实际的实现 - 它们只描述类型。这些定义对于与 JavaScript 的互操作性至关重要：代码通常不会以 TypeScript 的形式分发，而是转译为包含附带类型定义文件的 JavaScript。

🌐 Type definitions describe the shape of existing JavaScript code. They are usually stored in .d.ts files and don't contain any actual implementation—they only describe the types. These definitions are essential for interoperability with JavaScript: code is not usually distributed as TypeScript, but instead transpiled to JavaScript that includes sidecar type definition files.

例如，当你在 Node.js 中使用 TypeScript 时，你需要 Node.js API 的类型定义。这可以通过 @types/node 获取。使用以下命令安装：

🌐 For example, when you use Node.js with TypeScript, you'll need type definitions for Node.js APIs. This is available via @types/node. Install it using:

npm add --save-dev @types/node

这些类型定义允许 TypeScript 理解 Node.js 的 API，并在你使用像 fs.readFile 或 http.createServer 这样的函数时提供正确的类型检查和自动补全。例如：

🌐 These type definitions allow TypeScript to understand Node.js APIs and provide proper type checking and autocompletion when you use functions like fs.readFile or http.createServer. For example:

// @errors: 2345
import { resolve } from 'node:path';

resolve(123, 456);

许多流行的 JavaScript 库都在 @types 命名空间下提供类型定义，由 DefinitelyTyped 社区维护。这使得现有的 JavaScript 库能够与 TypeScript 项目无缝集成。

🌐 Many popular JavaScript libraries have their type definitions available under the @types namespace, maintained by the DefinitelyTyped community. This enables seamless integration of existing JavaScript libraries with TypeScript projects.

🌐 Transform Capabilities

TypeScript 还包括强大的转换功能，特别是针对 JSX（用于 React 和类似框架）。TypeScript 编译器可以将 JSX 语法转换为普通的 JavaScript，类似于 Babel 的工作方式。虽然我们在这些文章中不会介绍这些转换功能，但值得注意的是，TypeScript 不仅仅是一个类型检查工具 - 它也是一个构建工具，用于将现代 JavaScript 语法转换为适用于不同环境的兼容版本。

🌐 TypeScript also includes powerful transformation capabilities, particularly for JSX (used in React and similar frameworks). The TypeScript compiler can transform JSX syntax into regular JavaScript, similar to how Babel works. While we won't cover these transformation features in these articles, it's worth noting that TypeScript isn't only a tool for type checking—it's also a build tool for transforming modern JavaScript syntax into compatible versions for different environments.

🌐 How to run TypeScript code

好的，所以我们有一些 TypeScript 代码。那我们该如何运行它呢？ 运行 TypeScript 代码有几种可能的方法，我们将在接下来的文章中介绍所有方法。

🌐 Okay, so we have some TypeScript code. Now how do we run it? There are few possible ways to run TypeScript code, we will cover all of them in the next articles.