从 JavaScript 到 TypeScript：逐步学习类型安全编程

站长

2023年09月16日 22:23 · 阅读数 15

TypeScript（简称 TS）是一种开源的编程语言，是 JavaScript 的超集，意味着任何有效的 JavaScript 代码也是有效的 TypeScript 代码。TypeScript 在 JavaScript 的基础上添加了静态类型系统，这使得代码更具可维护性和安全性。下面是 TypeScript 的一些核心语法概念和特性：

1. 变量声明和类型注解：

使用 let 或 const 声明变量。
可以使用 : 类型 语法为变量添加类型注解，例如：let age: number = 30;。

2. 基本数据类型：

TypeScript 支持 JavaScript 的基本数据类型，如 number、string、boolean、null、undefined。

3. 数组和元组：

使用 array 类型表示数组，例如：let numbers: number[] = [1, 2, 3];。
使用元组类型表示固定长度和类型的数组，例如：let person: [string, number] = ['Alice', 30];。

4. 对象和接口：

使用 object 类型表示对象，例如：let person: object = { name: 'Alice', age: 30 };。
使用 interface 定义接口，描述对象的结构，例如：interface Person { name: string; age: number; }。

以下是关于 TypeScript 接口的详细介绍：

1. 定义接口

接口使用 interface 关键字来定义，接口的名称通常使用大写字母开头。接口可以包含属性、方法、索引签名等。
```
       interface Person {
           name: string;
           age: number;
           greet: () => void;
       }
      
```
在上述例子中，我们定义了一个名为 Person 的接口，它包含了 name、age 两个属性，以及一个 greet 方法。 void 是 TypeScript 中的一种数据类型，表示没有返回值的函数或表达式的结果。在 JavaScript 中，函数可以有返回值，也可以没有返回值，当函数没有明确的 return 语句时，默认返回 undefined。

2. 使用接口

接口可以用来描述对象的形状，然后可以使用该接口来声明变量、参数和函数的返回值。这样可以确保这些变量、参数和函数返回值的类型符合接口的规定。
```
       function sayHello(person: Person): void {
           console.log(`Hello, ${person.name}!`);
       }
       
       const alice: Person = {
           name: "Alice",
           age: 30,
           greet: () => {
               console.log("Hi there!");
           },
       };
       
       sayHello(alice); // 调用函数，并传递符合 Person 接口的对象
       
```
在这个例子中，我们使用 Person 接口来声明参数 person 的类型，以确保传递给 sayHello 函数的对象满足 Person 接口的要求。

3. 可选属性

接口的属性可以是可选的，使用 ? 符号标记。这表示对象可以有或不必须具备该属性。
```
   interface Car {
       make: string;
       model: string;
       year?: number; // year 属性是可选的
   }
```
4. 只读属性

使用 readonly 关键字可以定义只读属性，这意味着一旦属性被赋值，就不能再修改。
```
   interface Point {
       readonly x: number;
       readonly y: number;
   }
```
5. 函数类型

接口还可以定义函数类型，用于规定函数的参数和返回值的类型。
```
   interface MathFunction {
       (x: number, y: number): number;
   }

   const add: MathFunction = (a, b) => a + b;
```
6. 继承接口

一个接口可以继承自另一个接口，通过 extends 关键字实现。
```
   interface Animal {
       name: string;
   }

   interface Bird extends Animal {
       fly: () => void;
   }
```
7. 实现接口

类可以实现一个或多个接口，通过 implements 关键字实现。一个类需要实现接口中定义的所有属性和方法。
```
   class Person implements Human {
       name: string;
       age: number;

       constructor(name: string, age: number) {
           this.name = name;
           this.age = age;
       }

       greet() {
           console.log(`Hello, my name is ${this.name}`);
       }
   }
```
8. 类型断言

在需要的时候，可以使用类型断言（Type Assertion）来告诉 TypeScript 某个值符合特定的类型。
```
   const data: any = { name: "Alice", age: 30 };
   const person = data as Person;
```

5. 函数和方法：

使用 function 定义函数，例如：function add(a: number, b: number): number { return a + b; }。
可以使用箭头函数表达式，例如：(a: number, b: number) => a + b。

6. 类：

使用 class 关键字定义类，例如：class Person { name: string; constructor(name: string) { this.name = name; } }。

7. 泛型：

TypeScript 支持泛型，允许编写可重用的代码，例如：function identity<T>(arg: T): T { return arg; }。

8. 类型别名和联合类型：

使用 type 定义类型别名，例如：type Point = { x: number; y: number; }。
使用 | 表示联合类型，例如：let value: string | number = 'hello';。

9. 枚举：

使用 enum 定义枚举，例如：enum Color { Red, Green, Blue }。

10. 模块和命名空间：

TypeScript 支持模块化，可以使用 import 和 export 导入和导出模块。

11. 类型断言：

使用类型断言告诉编译器某个值的类型，例如：let nameLength = (name as string).length;。
类型断言（Type Assertion）是 TypeScript 中的一种机制，用于告诉编译器某个值的类型，并将其视为该类型。通常，在编写 TypeScript 代码时，编译器会自动进行类型推断，但有时你可能需要明确指定某个值的类型，或者你知道某个值的类型比编译器更准确。这时就可以使用类型断言。

类型断言有两种形式：

1. 尖括号语法：

使用尖括号 <类型> 来进行类型断言。例如：
```
  let value: any = "Hello, TypeScript!";
  let strLength: number = (<string>value).length;
```
在上面的例子中，<string>value 表示将 value 断言为 string 类型，以便获取其 length 属性。

2. as 语法：

使用 值 as 类型 来进行类型断言。例如：
```
  let value: any = "Hello, TypeScript!";
  let strLength: number = (value as string).length;
```
value as string 表示将 value 断言为 string 类型，以便获取其 length 属性。

12. 类型推断：

TypeScript 能够根据上下文自动推断变量的类型，不必显式注明类型。

13. 可选属性和默认值：

在接口中可以使用 ? 表示可选属性，例如：interface Person { name: string; age?: number; }。
函数参数可以设置默认值，例如：function greet(name: string = 'Guest') { console.log('Hello, ' + name); }。

14. 装饰器：

装饰器是一种特殊的声明，可以附加到类声明、方法、属性或参数上，用于自定义行为和元数据。

TypeScript 的主要优势之一是它的类型系统，它可以帮助检测潜在的错误并提供更好的代码智能感知。

从 JavaScript 到 TypeScript：逐步学习类型安全编程

1. 变量声明和类型注解：

2. 基本数据类型：

3. 数组和元组：

4. 对象和接口：

1. 定义接口

2. 使用接口

3. 可选属性

4. 只读属性

5. 函数类型

6. 继承接口

7. 实现接口

8. 类型断言