TS 从入门到深度掌握，晋级TypeScript高手
TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型和面向对象编程等特性。TypeScript 的目标是提高 JavaScript 的可维护性和可扩展性。在本篇文章中，我们将从 TypeScript 的入门一直到深入掌握，带你进入 TypeScript 的神奇世界。
## 1. 安装 TypeScript
首先我们需要安装 TypeScript。可以通过 npm 全局安装 TypeScript：
```shell
npm install -g typescript
```
安装完 TypeScript 后，我们就可以在命令行中使用 `tsc` 命令来将 TypeScript 转换成 JavaScript 代码。
## 2. 第一个 TypeScript 程序
创建一个 hello.ts 文件，然后在文件中输入以下代码：
```typescript
console.log("Hello, TypeScript!");
```
保存文件后，打开命令行并进入该文件所在的目录。运行以下命令：
```shell
tsc hello.ts
```
命令执行成功后，会在当前目录下生成一个 hello.js 文件。打开文件，可以看到它包含以下 JavaScript 代码：
```javascript
console.log("Hello, TypeScript!");
```
可以在命令行中直接运行这个 JavaScript 文件：
```shell
node hello.js
```
这样就会在控制台中输出 `Hello, TypeScript!` 了。
## 3. 类型
TypeScript 是一种类型化的语言。与 JavaScript 不同，在 TypeScript 中，您可以为变量、函数参数和返回值指定类型，这可以大大减少代码中的错误。
可以使用如下语法为变量指定类型：
```typescript
let variableName: type = value;
```
下面是一个示例：
```typescript
let num: number = 10;
let str: string = "Hello, TypeScript!";
let bool: boolean = true;
```
TypeScript 支持 JavaScript 的所有数据类型外，还提供了一些其他的数据类型，如枚举、元组、void、never 等。
```typescript
enum Color {
Red,
Green,
Blue
}
let color1: Color = Color.Red;
let color2: Color = Color.Green;
let color3: Color = Color.Blue;
let tuple: [string, number] = ["TypeScript", 2021];
function logMessage(): void {
console.log("This is a log message");
}
function neverReturns(): never {
throw new Error("An error occurred.");
}
```
## 4. 接口
TypeScript 中的接口可以用来定义数据类型的契约，以便更轻松地检测代码中的错误。
```typescript
interface Person {
firstName: string;
lastName: string;
age: number;
}
let person: Person = {
firstName: "John",
lastName: "Doe",
age: 30
};
```
## 5. 类
TypeScript 中也支持面向对象编程，可以使用类来创建对象。类可以包含属性和方法。
```typescript
class Person {
firstName: string;
lastName: string;
age: number;
constructor(firstName: string, lastName: string, age: number) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
getFullName() {
return this.firstName + " " + this.lastName;
}
}
let person: Person = new Person("John", "Doe", 30);
console.log(person.getFullName());
```
## 6. 函数
TypeScript 中的函数可以指定函数参数和返回值的类型。
```typescript
function add(num1: number, num2: number): number {
return num1 + num2;
}
let result = add(10, 20);
console.log(result);
```
可以看到，这个函数接受两个数字作为参数，并返回它们的和。
## 7. 泛型
TypeScript 中的泛型可以编写灵活的代码，因为它允许您在编译时指定特定类型的代码。
```typescript
function identity<T>(arg: T): T {
return arg;
}
let output1 = identity<number>(10);
let output2 = identity<string>("Hello, TypeScript");
console.log(output1); // 输出 10
console.log(output2); // 输出 "Hello, TypeScript"
```
## 8. 命名空间
命名空间是一种将代码分成逻辑块的方式。TypeScript 中的命名空间可以更好地组织和管理代码。
```typescript
namespace Shapes {
export function square(x: number) {
return x * x;
}
export function circle(radius: number) {
return Math.PI * radius * radius;
}
}
console.log(Shapes.square(10)); // 输出 100
console.log(Shapes.circle(10)); // 输出 314.1592653589793
```
## 9. 模块
与命名空间相似，模块也是一种组织和管理代码的方式。模块可以将逻辑相关代码封装到一个单独文件或一组文件中，使代码更易于维护。TypeScript 中的模块可以使用 `export` 和 `import` 关键字来实现。
```typescript
// logger.ts
export function logMessage(message: string) {
console.log(message);
}
// app.ts
import { logMessage } from "./logger";
logMessage("Hello, TypeScript!");
```
## 10. 类型兼容性
TypeScript 中的类型兼容性是指一种类型是否可以赋值给另一种类型的概念。
```typescript
let num: number = 10;
let str: string = "Hello, TypeScript!";
num = str; // 报错，类型 "string" 不能赋值给类型 "number"
```
以上示例中，将字符串类型赋值给数字类型将导致编译错误。因为它们是不同的类型，不能互相赋值。在 TypeScript 中，类型兼容性用于捕获这些类型错误。
## 11. 类型断言
有时候，TypeScript 无法确定变量的类型，这时候就需要开发者告诉 TypeScript 变量的确切类型。这可以通过类型断言来实现。
```typescript
let someValue: any = "this is a string";
let strLength1: number = (<string>someValue).length;
let strLength2: number = (someValue as string).length;
```
在这个示例中，`someValue` 的类型为 `any`，它可以是任何类型。通过类型断言，我们告诉 TypeScript `someValue` 是一个字符串，并获取它的长度。
## 12. 继承
TypeScript 支持面向对象编程中的继承概念。
```typescript
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
speak() {
console.log(this.name + " makes a noise.");
}
}
class Dog extends Animal {
constructor(name: string) {
super(name);
}
speak() {
console.log(this.name + " barks.");
}
}
let dog = new Dog("Rover");
dog.speak(); // 输出 "Rover barks."
```
在这个示例中，我们定义了一个 Animal 类，它包含一个名称属性 `name` 和一个方法 `speak`。然后我们定义了一个 `Dog` 类，它继承自 `Animal`，并重写了 `speak` 方法。最后，我们创建了一个 `Dog` 对象并调用它的 `speak` 方法。
## 13. 接口继承
在 TypeScript 中，接口也支持继承。这意味着一个接口可以从其他接口继承属性和方法。
```typescript
interface Shape {
color: string;
}
interface Square extends Shape {
sideLength: number;
}
let square = {} as Square;
square.color = "blue";
square.sideLength = 10;
console.log(square.color);
console.log(square.sideLength);
```
在示例中，我们定义了一个接口 `Shape`，它有一个属性 `color`。然后，我们定义了另一个接口 `Square`，它继承了 `Shape`，并添加了一个 `sideLength` 属性。最后，我们创建了一个 `Square` 对象，并为它的属性赋值。
## 14. 命名空间与模块
命名空间和模块都可以用来组织代码，但它们的工作方式有所不同。命名空间主要用于在全局范围内组织和管理代码。模块用于在模块范围内组织和管理代码，这意味着模块中的变量、函数等在模块外部是不可访问的。
例如，假设我们有一个 `Calculator.ts` 文件包含一个简单的计算器函数，如下所示：
```typescript
// Calculator.ts
export function add(num1: number, num2: number): number {
return num1 + num2;
}
```
这样我们就可以将这个文件作为一个模块导出。在我们的 `app.ts` 文件中，我们就可以使用以下代码来访问这个模块中的函数：
```typescript
// app.ts
import { add } from "./Calculator";
let result = add(10, 20);
console.log(result); // 输出 30
```
## 15. 总结
在本篇文章中，我们从 TypeScript 的入门到深度掌握了许多重要的概念，如类型、函数、泛型、类和继承、命名空间和模块等。希望这篇文章对你有所帮助，能够帮助你深入了解 TypeScript，成为一名 TypeScript 高手。
