TypeScript基础知识详解

本文详细介绍了TypeScript基础知识，包括类型系统、语法、数据类型、函数和类等核心概念。此外，文章还涵盖了接口、类型别名以及实用技巧等内容，帮助读者全面掌握TypeScript的使用。通过本文的学习，读者可以理解并应用TypeScript的各种高级特性，提升开发效率和代码质量。

TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集，也就是说，任何有效的 JavaScript 代码都是有效的 TypeScript 代码。TypeScript 增加了一些功能，如静态类型检查和面向对象的编程特性，使开发更加高效和可靠。

TypeScript 可以通过多种方式进行安装，包括使用 npm（Node.js 包管理器）或直接下载最新版本。以下是使用 npm 安装 TypeScript 的步骤：

1. 安装 Node.js 和 npm（如果尚未安装，请访问 Node.js 官方网站 并下载最新版本）。
2. 打开命令行工具（如 Windows 的命令提示符、macOS 或 Linux 的终端）。
3. 运行以下命令安装 TypeScript：

npm install -g typescript

安装完成后，可以通过以下命令验证安装是否成功：

tsc -v

它将输出你安装的 TypeScript 版本号。

1. 创建一个新的文件夹用于存放你的 TypeScript 项目文件：

   mkdir my-ts-project
   cd my-ts-project

2. 在项目文件夹内创建一个 tsconfig.json 文件，用于配置 TypeScript 编译器：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./node_modules"
  ]
}

1. 在 my-ts-project 文件夹内创建一个 src 文件夹，并在其中添加一个名为 index.ts 的文件：

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

1. 编译 TypeScript 代码：

tsc

这会将 src/index.ts 文件编译到 dist/index.js 文件，编译后的 JavaScript 文件将被放置在 dist 文件夹中。可以使用 Node.js 运行该文件：

node dist/index.js

TypeScript 语言的基本语法与 JavaScript 类似，但在类型系统方面有显著的差异。TypeScript 提供了各种内置数据类型，这些类型有助于编写更清晰、更可靠的代码。

TypeScript 中有两种主要的变量声明方式：let 和 const。let 用于声明可修改的变量，const 用于声明不可修改的变量。为了确保类型安全，TypeScript 要求在声明变量时指定其类型。

基本类型

TypeScript 提供了以下基本类型：

• number：表示数字类型，可以是整数或浮点数。
• string：表示字符串类型，用于存储文本。
• boolean：表示布尔类型，只有 true 和 false 两个值。
• null 和 undefined：分别表示空值和未定义值。
• void：表示没有返回值的函数。
• never：表示永远不会返回的函数或无法到达的表达式。
• any：表示类型是任意的，可以用于临时处理未定义类型的变量。

声明变量

在 TypeScript 中，可以通过 : 符号指定变量的类型。

let age: number = 25;
const name: string = "Alice";
let isStudent: boolean = true;
let noValue: null = null;
let undefinedValue: undefined = undefined;
let result: void = undefined; // 使用 void 类型时，通常将值设为 undefined

// 使用 any 类型
let flexibleValue: any = 42;
flexibleValue = "hello";

在 TypeScript 中，可以指定数组中元素的类型。有两种方式声明数组类型：

• 使用 Array<T>：

  let numbers: Array<number> = [1, 2, 3];

• 使用 T[]：

  let strings: string[] = ["a", "b", "c"];

还可以使用泛型来声明数组类型，例如：

let arr: Array<number> = [1, 2, 3];
let arr2: number[] = [1, 2, 3];

// 使用泛型
function getArray<T>(items: T[]): T[] {
    return items;
}

let numbers = getArray<number>([1, 2, 3]);
let strings = getArray<string>(["a", "b", "c"]);

可以使用对象字面量和接口来指定对象的类型。以下是一个简单的示例：

interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 25
};

联合类型

联合类型允许一个变量同时拥有多种类型。例如：

let value: number | string;
value = 42;
value = "Hello";

类型推断

TypeScript 可以通过上下文推断变量类型。例如：

let value = "Hello"; // TypeScript 推断 value 为 string 类型

TypeScript 中的函数可以具有类型注解，以便清晰地指定参数和返回值的类型。

函数定义的基本形式如下：

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

TypeScript 支持可选参数和默认参数值。例如：

function greet(name: string, greeting: string = "Hello"): string {
  return `${greeting}, ${name}`;
}

console.log(greet("Alice")); // 输出 "Hello, Alice"
console.log(greet("Bob", "Hi")); // 输出 "Hi, Bob"

剩余参数允许你传递任意数量的参数，这些参数会以数组的形式存在。

function sum(...numbers: number[]): number {
  return numbers.reduce((total, current) => total + current, 0);
}

console.log(sum(1, 2, 3, 4)); // 输出 10

函数重载允许你在同一个函数名称下定义多个函数签名。这在需要处理不同类型输入的情况下非常有用。

function printLength<T>(value: T): number;
function printLength(value: string[]): void;
function printLength<T>(value: T): number | void {
  if (Array.isArray(value)) {
    console.log(value.length);
  } else {
    return value.length;
  }
}

console.log(printLength("Hello")); // 输出 5
printLength(["a", "b", "c"]); // 输出 3

TypeScript 中的类支持面向对象编程的关键特性，如构造函数、属性、方法以及继承。

定义一个类的基本形式如下：

class Person {
  name: string;
  age: number;

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

  greet(): string {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

TypeScript 支持类的继承。子类可以继承父类的属性和方法，并可以覆盖父类的方法。

class Student extends Person {
  grade: number;

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

  greet(): string {
    return `${super.greet()} I am in grade ${this.grade}.`;
  }
}

let alice = new Student("Alice", 25, 10);
console.log(alice.greet()); // 输出 "Hello, my name is Alice and I am 25 years old. I am in grade 10."

抽象类是一种不能被实例化的类，它用于定义其他类的通用结构。抽象类中的抽象方法必须在子类中实现。

abstract class Animal {
  abstract makeSound(): void;
}

class Dog extends Animal {
  makeSound(): void {
    console.log("Woof!");
  }
}

let dog = new Dog();
dog.makeSound(); // 输出 "Woof!"

接口和类型别名是 TypeScript 中定义数据结构的重要工具。接口用于定义对象的结构，而类型别名则用于创建类型别名。

接口定义对象的结构。例如：

interface Person {
  name: string;
  age: number;
}

let alice: Person = {
  name: "Alice",
  age: 25
};

接口还可以用于定义函数的形状：

interface AddFunction {
  (a: number, b: number): number;
}

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

类可以实现接口，确保类符合接口定义的结构：

interface Person {
  name: string;
  age: number;
  greet(): string;
}

class Student implements Person {
  name: string;
  age: number;

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

  greet(): string {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

let alice = new Student("Alice", 25);
console.log(alice.greet()); // 输出 "Hello, my name is Alice and I am 25 years old."

类型别名允许你为一个类型定义一个新名称：

type Name = string;
let name: Name = "Alice";

type Options = { verbose: boolean };
let options: Options = { verbose: true };

装饰器是一种特殊类型的声明，可以被附加到类声明、方法、访问符、属性或参数。装饰器使用 @ 符号，并且可以接受一个参数。

类装饰器用于修改或增强类的行为：

function logClass(target: Function) {
  console.log(`Class ${target.name} is being created.`);
}

@logClass
class Person {
  name: string;

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

// 输出 "Class Person is being created."

方法装饰器用于修改或增强方法的行为：

function logMethod(target: any, name: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${name} with`, args);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Person {
  @logMethod
  greet(name: string) {
    console.log(`Hello, ${name}`);
  }
}

let alice = new Person();
alice.greet("Bob"); // 输出 "Calling greet with" 和 "Hello, Bob"

属性装饰器用于修改或增强属性的行为：

function readonly(target: any, name: string) {
  let value = target[name];

  let descriptor: PropertyDescriptor = {
    get() {
      return value;
    },

    set(newValue: any) {
      throw new Error("Can't modify a readonly property");
    }
  };

  Object.defineProperty(target, name, descriptor);
}

class Person {
  @readonly
  name: string;

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

let alice = new Person("Alice");
console.log(alice.name); // 输出 "Alice"
alice.name = "Bob"; // 抛出错误 "Can't modify a readonly property"

类型断言

类型断言允许你手动指定一个值的类型，即使这个值的实际类型可能不符合这个类型。这在需要向后兼容现有代码或者需要临时忽略类型检查时很有用。

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

泛型

泛型提供了编写可重用代码的能力，允许函数或类在定义时使用类型参数，而在使用时指定具体的类型。

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

let output = identity<string>("myString"); // 输出 "myString"

接口合并

可以将多个接口合并为一个接口，这有助于代码的组织和重用：

interface Shape {
  color: string;
}

interface Square extends Shape {
  sideLength: number;
}

let square = {} as Square;
square.color = "blue";
square.sideLength = 10;

模块系统

TypeScript 支持多种模块系统，包括 CommonJS 和 ES6 模块。可以在 tsconfig.json 文件中指定模块系统。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES6",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "./dist"
  },
  "include": [
    "./src/**/*.ts"
  ],
  "exclude": [
    "./node_modules"
  ]
}

TypeScript 是一种强大的编程语言，它在 JavaScript 的基础上增加了静态类型检查和面向对象的编程特性。通过本文的介绍，你应该已经掌握了 TypeScript 的基本语法和一些高级特性。为了进一步提高你的 TypeScript 技能，建议继续学习 TypeScript 的其他高级特性，例如泛型、装饰器和模块系统，并在实际项目中应用这些知识。

如果你在学习过程中遇到任何问题，可以参考 TypeScript 的官方文档或加入相关社区寻求帮助。此外，你可以在 慕课网 上找到更多关于 TypeScript 的教程和示例项目。

// 示例：使用泛型定义函数
function identity<T>(arg: T): T {
  return arg;
}

let output = identity<string>("myString"); // 输出 "myString"