Articles
TypeScript简介
TypeScript基础知识

TypeScript基础知识

本文解释了TypeScript的基础知识。

YouTube Video

执行 "Hello World!"

首先，我们将在Visual Studio Code中运行经典的TypeScript "Hello World!" 示例。

npm install -g typescript

使用 npm 命令安装 typescript。

创建 tsconfig.json 文件。

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

创建 .vscode/launch.json 文件以便在Visual Studio Code中运行 main.ts 文件。

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

创建一个显示 "Hello World!" 的 main.ts 文件。您可以通过按下 F5 键在Visual Studio Code中运行它。

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

通过这样配置，您可以在 VSCode 中执行 TypeScript 文件。

TypeScript概述

TypeScript（TS）是由微软开发的JavaScript超集。TypeScript支持静态类型，允许编写更健壮和可维护的代码。

静态类型

  • TypeScript为JavaScript添加了类型，并在编译时执行类型检查。这可以提前防止与类型相关的错误。
1let message: string = "Hello, TypeScript";
2console.log(message);

编译

  • 由于TypeScript不能直接在浏览器中执行，因此需要将其转换（编译）为JavaScript。使用 tsc （TypeScript编译器）将TS文件转换为JS文件。

可选的类型注解

  • TypeScript也执行类型推断，但允许您在必要时显式指定类型。这提高了代码的可读性和可靠性。
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

接口

  • TypeScript提供了 interface 用于定义对象的结构。这允许严格管理对象的结构。
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

类

  • TypeScript扩展了JavaScript的类语法，并支持继承、访问修饰符（public、private、protected）以及抽象类。
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

泛型

  • 在TypeScript中，可以使用泛型编写可重用且类型安全的代码。
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

生态系统

  • TypeScript完全兼容JavaScript生态系统，可以直接使用现有的JavaScript代码。此外，它与像React和Node.js这样广泛使用的库进行了集成。

强大的开发者工具

  • TypeScript在像VSCode这样的编辑器中提供了自动补全、重构支持和错误检查等高级功能。

TypeScript尤其适合提升大型项目的可靠性和开发者的生产力。

TypeScript中的变量

这里解释了TypeScript中变量的基本概念和使用方法。

变量声明

在TypeScript中，变量通过三个关键词声明：let、const和var。每个关键词都有不同的特性。

let的示例：

let 具有块作用域（仅在大括号 {} 内有效）。值可以在之后重新赋值。

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

const的示例：

const 不能被重新赋值，因此一旦赋值，其值不可更改。但是，对象和数组的内容可以被修改。

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

var的示例：

var具有函数作用域并且可以重新赋值。然而，相比let或const，忽略块级作用域可能导致意外行为。

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

类型注解

在 TypeScript 中，您可以显式地为变量标注类型。支持类型推断，但在复杂场景下类型注解很有用。

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

未初始化变量

如果一个变量声明时未初始化，默认会赋值为 undefined。使用 let 声明的变量，如果未初始化，则必须显式赋值为 undefined 或在其类型中包含 undefined。

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

变量作用域

let 和 const 拥有块作用域，因此它们仅在同一个块内有效。

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

变量提升

由于TypeScript是JavaScript的超集，所以它继承了JavaScript的提升特性。提升是指将变量和函数声明视为被提升到其作用域顶部的行为。然而，仅声明会被提升，初始化仍然保留在原地。使用var声明的变量会被提升，但在声明之前使用let或const会导致错误。

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • 在这种情况下，使用var声明的变量会被提升，并输出其值。
1console.log(b); // ReferenceError
2let b = 20;
  • 使用let声明的变量不会被提升，会导致错误。

总结

以下是对 let、const 和 var 的总结。

  • let 可以重新赋值并具有块作用域。
  • const 不能重新赋值并具有块作用域。
  • var 可以重新赋值并具有函数作用域。
  • 它们都允许显式的类型注解以指定变量类型。

TypeScript中的转义字符

当某些特定字符无法直接输入或需要表示字符串中具有特殊意义的字符时，转义字符会被使用。在TypeScript中，转义字符用于表示控制字符或特殊字符。

例如，使用\n来输出包含换行符的消息。

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

转义特殊字符

当字符串中需要包括特殊字符时，转义字符就显得非常有用。例如，您可能希望在字符串中直接使用双引号或单引号。

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

转义反斜杠本身

要在字符串中包含反斜杠，您需要将其写为双反斜杠。

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Unicode和十六进制转义

在TypeScript中，可以使用转义序列表示Unicode码点。

Unicode转义序列

您可以通过在\u后指定四位十六进制数字来表示Unicode字符。

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

十六进制转义

您可以通过在\x后指定两位十六进制数字来表示特定字符。

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

模板字符串和转义

模板文字使用反引号括起来定义，并提供了一种轻松创建嵌入式表达式或多行字符串的方法。普通转义字符可以直接在模板字符串中使用。

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

特殊情况

在TypeScript中，在字符串中使用无效的转义序列可能会导致语法错误。因此，检查转义字符是否有效至关重要。

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

实际使用示例

以下是一个使用转义字符构建复杂字符串的示例。

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

在此示例中，\n用于换行，\t用于添加缩进。这使得JSON结构更易于阅读。

总结

在使用 TypeScript 处理字符串时，转义字符非常重要。当您想在字符串中包含特殊字符或控制字符时，可以使用适当的转义序列创建有表现力的字符串。正确理解和使用转义字符可以提高代码的可读性和可维护性。

TypeScript 的版本

让我们来概览一下 TypeScript 的版本。

  1. TypeScript 1.0 (2014)

    TypeScript 的第一个稳定版本。引入了基本特性，例如类型、类和模块。

  2. TypeScript 2.0 (2016)

    引入了 非空类型、控制流分析、只读属性 和 Never 类型，增强了类型推断。

  3. TypeScript 3.0 (2018)

    引入了更灵活的类型系统，新增功能包括 项目引用、元组类型 扩展，以及对 剩余参数 的改进。

  4. TypeScript 4.0 (2020)

    新增功能包括 可变元组类型，编辑器改进，增强的类型推断，以及 标签元组元素，以提升开发体验。

  5. TypeScript 4.1 (2020)

    引入了 模板字面量类型，使得字符串类型操作更强大。

  6. TypeScript 4.3 (2021)

    添加了Override关键字，对构造函数中的访问修饰符进行了改进，并增强了对WeakMap和WeakSet的类型支持。

  7. TypeScript 4.5 (2021)

    添加了Awaited类型、ModuleSuffixes，并改进了与ECMAScript模块的兼容性。

  8. TypeScript 5.0 (2023)

    实现了Decorators的标准化，提升了项目构建速度，增强了类型系统，并支持最新的ECMAScript特性。

TypeScript在不断发展，每年都会发布多个版本，引入新功能和改进。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 中的数据类型