TypeScript - 基础语法

你好，未来的 TypeScript 巫师们！? 我很高兴能成为你们在这激动人心的 TypeScript 世界的向导。作为一名教编程多年的老师，我可以告诉你，TypeScript 就像是 JavaScript 的超级加强版，它会让你的编码生活变得更加简单。让我们开始吧！

TypeScript - Basic Syntax

你的第一个 TypeScript 代码

好了，想象一下你即将用一种新语言写下你的第一行代码。兴奋吗？让我们从 TypeScript 中的经典 "Hello, World!" 程序开始。

console.log("Hello, World!");

现在，你可能在想，"等等，这看起来和 JavaScript 一样！" 你说得对！TypeScript 是 JavaScript 的超集，这意味着所有有效的 JavaScript 代码同样也是有效的 TypeScript 代码。但别担心，我们很快就会接触到 TypeScript 独特的内容。

让我们尝试一些更 TypeScript 化的东西：

let message: string = "Hello, TypeScript!";
console.log(message);

这里发生了什么：

我们声明了一个名为 message 的变量
: string 部分告诉 TypeScript 这个变量应该只持有字符串值
我们将字符串 "Hello, TypeScript!" 赋值给这个变量
最后，我们将其打印到控制台

这仅仅是 TypeScript 类型系统的一小部分，这是它最强大的特性之一。它就像一个友好的机器人助手，在你运行代码之前就能捕捉到你的错误！

编译和执行 TypeScript 程序

现在我们写了一些 TypeScript 代码，那么我们如何真正运行它呢？浏览器和 Node.js 直接是不理解 TypeScript 的，所以我们需要先将其编译为 JavaScript。这就好比将 TypeScript 从一种语言翻译成计算机已经理解的另一种语言。

下面是如何操作的：

将你的 TypeScript 代码保存在一个以 .ts 扩展名的文件中，比如 hello.ts
打开你的终端或命令提示符
导航到包含你的文件的目录
运行 TypeScript 编译器：

tsc hello.ts

这将在同一目录下创建一个名为 hello.js 的新文件。那就是你的 TypeScript 代码翻译成 JavaScript 后的文件！

要运行它，你可以使用 Node.js：

node hello.js

然后你就会在控制台看到你的消息被打印出来。

编译器标志

TypeScript 编译器非常智能，但有时你需要给它一些特定的指令。这时编译器标志就派上用场了。它们就像是可以给编译器指定的特殊命令，以改变其行为。

下面是一些常见的编译器标志：

标志	描述
--outDir	指定所有输出文件的目标文件夹
--target	指定 ECMAScript 目标版本
--watch	监视输入文件
--strict	启用所有严格类型检查选项

例如，如果你出于兼容性原因想将 TypeScript 编译为较老版本的 JavaScript，你可以使用：

tsc --target ES5 hello.ts

这告诉编译器生成与 ECMAScript 5 兼容的 JavaScript。

TypeScript 中的标识符

在编程中，我们使用标识符来命名变量、函数和类等。可以把它们看作是你代码不同部分的标签。在 TypeScript 中，这些名称有一些规则：

它们可以包含字母、数字、下划线和美元符号
它们必须以字母、下划线或美元符号开头
它们是大小写敏感的（所以 myVariable 和 MyVariable 是不同的）
它们不能是保留关键字（我们接下来会讨论这些）

以下是一些有效的标识符：

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

以下是一些无效的标识符：

let 123abc: string = "Invalid"; // 不能以数字开头
let my-variable: number = 10; // 不能使用连字符
let class: string = "Reserved keyword"; // 不能使用保留关键字

TypeScript ─ 关键字

关键字是在 TypeScript 中具有特定含义的特殊单词。它们就像语言的词汇。你不能将它们用作标识符，因为 TypeScript 已经给它们分配了特定的任务。

以下是一些常见的 TypeScript 关键字：

关键字	描述
let	声明一个块作用域的变量
const	声明一个块作用域的常量
if	开始一个 if 语句
for	开始一个 for 循环
function	声明一个函数
class	声明一个类
interface	声明一个接口
type	声明一个类型别名

例如：

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
console.log(i);
}

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

class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}

interface Shape {
area(): number;
}

type Point = {
x: number;
y: number;
};

每个关键字在构建和定义你的代码时都有其特定的用途。

TypeScript 中的注释

注释就像是你留在代码中的小笔记，它们被编译器忽略，所以你可以用它们来解释你的代码是如何工作的，而不影响其运行。

TypeScript 支持 three 种类型的注释：

单行注释：

// 这是一个单行注释
let x: number = 5; // 你也可以把注释放在行的末尾

多行注释：

/* 这是一个多行注释
它可以跨越多行
对于较长的解释很有用 */
let y: number = 10;

文档注释：
```
/**
```

这是一个文档注释
它通常用于为函数或类生成文档
@param name 要问候的名字
@returns 一个问候信息 */ function greet(name: string): string { return Hello, ${name}!; }

记住，好的注释解释的是你为什么要这样做，而不仅仅是你在做什么。代码本身应该足够清晰，能够展示发生了什么。

TypeScript 与面向对象编程

TypeScript 的一大优点是它支持面向对象编程（OOP）。如果你是编程新手，可以把 OOP 看作是一种围绕“对象”组织代码的方式，这些对象具有属性和行为。

让我们创建一个简单的 Car 类来演示：

class Car {
// 属性
make: string;
model: string;
year: number;

// 构造函数
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

// 方法
describe(): string {
return `这是一辆 ${this.year} 年的 ${this.make} ${this.model}。`;
}
}

// 创建 Car 的一个实例
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // 输出: 这是一辆 2022 年的 Toyota Corolla。

让我们分解一下：

我们定义了一个 Car 类，带有 make、model 和 year 属性
constructor 是一个特殊的方法，当创建一个新的 Car 时会被调用
describe 方法返回一个描述汽车的字符串
我们创建了一个新的 Car 对象并调用它的 describe 方法

TypeScript 的类型系统在 OOP 中非常出色。它能够捕获诸如尝试将字符串赋值给 year 属性或调用不存在的方法等错误。

那么，你已经迈出了进入 TypeScript 世界的第一步！记住，学习编码是一个旅程，而不是一个目的地。别担心如果一切不能立即理解 - 继续练习，继续尝试，最重要的是，保持乐趣！在你意识到之前，你将能够编写复杂的 TypeScript 应用程序，并想知道没有静态类型你怎么生活。快乐编码！?

Credits: Image by storyset

上一教程:

TypeScript - 环境配置

下一教程:

TypeScript 与 JavaScript