TypeScript 深入浅出教程-JavaScript中文网-JavaScript教程资源分享门户

第一部分：基础概念

TypeScript 是一种由 Microsoft 推出的编程语言，它是 JavaScript 的超集，也就是说 TypeScript 包含了 JavaScript 的所有语法，并且在此基础上增加了一些新的特性。

类型系统

TypeScript 最重要的特性之一就是类型系统。在 JavaScript 中，变量的类型是动态的，也就是说变量可以随时改变类型。但是在 TypeScript 中，每个变量都有一个明确的类型，这样就可以在编译时就发现类型错误，提高代码的可靠性和可维护性。

下面是一个 TypeScript 的示例代码：

// javascriptcn.com 代码示例
let age: number = 18;
let name: string = "张三";
let isMale: boolean = true;

function add(a: number, b: number): number {
  return a + b;
}

class Person {
  constructor(public name: string, public age: number) {}

  sayHello() {
    console.log(`大家好，我叫${this.name}，今年${this.age}岁。`);
  }
}

let person = new Person("李四", 20);
person.sayHello();

在这个示例代码中，我们定义了三个变量 age、name 和 isMale，它们的类型分别是 number、string 和 boolean。我们还定义了一个函数 add，它接受两个 number 类型的参数，并返回一个 number 类型的值。最后我们定义了一个类 Person，它有两个属性 name 和 age，并且有一个方法 sayHello，它输出一个字符串。我们创建了一个 Person 类的实例，并调用了它的 sayHello 方法。

接口

接口是 TypeScript 中的另一个重要特性。接口定义了一组属性和方法的集合，用来描述某个对象的形状。在 TypeScript 中，我们可以使用接口来约束函数的参数和返回值，也可以用接口来限制类的实例的属性和方法。

下面是一个使用接口的示例代码：

// javascriptcn.com 代码示例
interface Person {
  name: string;
  age: number;
}

function sayHello(person: Person) {
  console.log(`大家好，我叫${person.name}，今年${person.age}岁。`);
}

let person = { name: "张三", age: 18 };
sayHello(person);

在这个示例代码中，我们定义了一个接口 Person，它有两个属性 name 和 age，表示一个人的姓名和年龄。我们还定义了一个函数 sayHello，它接受一个 Person 类型的参数，并输出一段字符串。最后，我们创建了一个符合 Person 接口要求的对象，并调用了 sayHello 函数。

泛型

泛型是 TypeScript 中的另一个重要特性。泛型可以让我们在定义函数、类、接口时，不预先指定具体的类型，而是在使用时再指定类型。这样就可以让代码更加灵活和通用。

下面是一个使用泛型的示例代码：

function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("hello world");
console.log(output);

在这个示例代码中，我们定义了一个函数 identity，它接受一个泛型类型的参数 arg，并返回一个泛型类型的值。我们在调用 identity 函数时，指定了泛型类型为 string，并将字符串 "hello world" 作为参数传递给函数。函数返回了一个与传入参数相同类型的值，并将这个值赋给变量 output。最后我们输出了 output 变量的值，也就是字符串 "hello world"。

总结

本文介绍了 TypeScript 的基础概念，包括类型系统、接口和泛型。这些特性都可以让我们编写更加健壮、灵活和可维护的代码。在接下来的教程中，我们将深入探讨 TypeScript 的更多特性和用法，帮助读者更好地理解和应用 TypeScript。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/657fdcb6d2f5e1655dac0910