正文

掌握TypeScript核心：从入门到精通类型系统

/0 浏览量
1025

TypeScript简介

TypeScript是由微软开发的一种由JavaScript衍生而来的编程语言，它为JavaScript添加了可选的静态类型和基于类的面向对象编程。TypeScript在开发大型应用程序时非常有用，因为它可以帮助减少运行时错误，并提高代码的可维护性和可读性。

入门：基础类型

在TypeScript中，基础类型包括数字、字符串、布尔值和null/undefined。以下是一些基础的类型示例：

let isDone: boolean = false;

let age: number = 26;

let sentence: string = `Hello, my age is ${age}!`;

let undefinedValue: undefined;

let nullValue: null;

接口和类型别名

接口（Interfaces）和类型别名（Type Aliases）都是用来定义类型的一种方式。它们可以让你更清晰地描述复杂的类型结构。

接口

接口用来定义对象的形状。以下是一个简单的接口示例：

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

let tom: Person = {
  name: 'Tom',
  age: 26
};

类型别名

类型别名提供了一种给类型起一个新名字的轻量级方法。以下是如何使用类型别名：

type Person = {
  name: string;
  age: number;
};

let tom: Person = {
  name: 'Tom',
  age: 26
};

高级类型

TypeScript还提供了高级类型，如联合类型、交叉类型、索引类型和映射类型。

联合类型

联合类型表示可以是多种类型中的一种。以下是如何定义和使用联合类型：

let age: string | number;
age = 26;  // 正确
age = 'twenty six';  // 正确

交叉类型

交叉类型表示可以是多种类型的组合。以下是如何定义和使用交叉类型：

interface Admin {
  name: string;
  privileges: string[];
}

interface Employee {
  name: string;
  startDate: Date;
}

let employee: Admin & Employee = {
  name: 'John',
  privileges: ['create-user'],
  startDate: new Date()
};

索引类型

索引类型允许你从类型中提取键的属性类型。以下是如何使用索引类型：

function getLabel(value: string | number | boolean): string {
  return typeof value + '';
}

let myLabel: { [Property in keyof typeof getLabel]: string } = getLabel(26);

映射类型

映射类型允许你重新映射类型的属性。以下是如何使用映射类型：

type StringToNumber = {
  [Property in string as toLowercase]: string;
};

let myStringToNumber: StringToNumber = {
  toLowercase: 'hello world'
};

编译与运行

要运行TypeScript代码，你需要使用TypeScript编译器（TSC）。以下是一个简单的编译和运行示例：

# 创建一个名为 index.ts 的文件，并输入以下代码
let message: string = "Hello, world!";

console.log(message);

# 使用TypeScript编译器编译代码
tsc index.ts

# 运行编译后的JavaScript文件
node index.js

进阶学习

  • 掌握类和继承
  • 学习装饰器
  • 使用模块化组织代码
  • 学习高级类型，如泛型和元编程

总结

TypeScript是一个功能强大的JavaScript超集，它通过提供静态类型和丰富的类型系统来提高JavaScript代码的质量和可维护性。通过学习并掌握TypeScript的核心特性，你可以创建出更加健壮和可维护的JavaScript应用程序。

-- 展开阅读全文 --