TypeScript 是一种增强 JavaScript 的静态类型语言，提供类型注解、类、接口等功能，帮助开发者编写清晰、安全且易于维护的代码。通过 TypeScript 与现代IDE和构建工具的配合，能显著提升开发效率和代码质量。学习 TypeScript 基础知识，掌握类型安全和静态检查，将有助于构建更高效、更可靠的Web应用。
TypeScript概述TypeScript 是一种由微软开发的编程语言，它是一种静态类型、对象类型、面向对象的编程语言，是 JavaScript 的超集。这意味着所有的 JavaScript 代码都是 TypeScript 代码，但 TypeScript 还提供了许多额外的功能，帮助开发者编写更清晰、更安全、更易于维护的代码。TypeScript 通过类型注解来增加代码的类型安全，从而在编译时就能发现潜在的错误，而不是在运行时才暴露出来。
TypeScript与JavaScript的关系
TypeScript 与 JavaScript 基本语法相同，但添加了类型注解、类、接口、枚举等高级特性。这意味着你可以写 TypeScript 代码，然后将其编译为等效的 JavaScript 代码。通过这种方式，TypeScript 可以利用静态类型检查的优点，提高代码质量，同时保持与 JavaScript 兼容。
TypeScript基本语法变量和常量
在 TypeScript 中，变量具有类型，这使得程序在编译时可以进行类型检查。类型可以是基本类型（如字符串、数字、布尔值）、数组、对象、枚举等。以下是一个变量声明的例子：
let age: number = 30;
const PI: number = 3.14;数据类型与类型注解
TypeScript 支持多种数据类型，包括数字（number）、字符串（string）、布尔值（boolean）、空值类型（null | undefined）等。数据类型可以单独声明也可以在变量初始化时指定。
示例代码
let age: number = 30;
let name: string = "Alice";
// 类型注解
let sum: number = 5 + 3; // TypeScript 会自动推断类型为 number变量声明和初始化
在 TypeScript 中，可以为变量指定类型，这使得变量只能存放特定类型的数据。初始化时可直接赋值，也可以在声明时省略类型注解，由 TypeScript 自动推断类型。
示例代码
let age = 30; // TypeScript 会推断类型为 number
age = 31; // 变量类型已知，可以安全地进行类型转换空值类型与动态类型
TypeScript 支持空值类型（null | undefined），表示变量可能为 null 或 undefined。在早期版本中，TypeScript 仅支持单一类型（any）作为动态类型，但在更现代的版本中，引入了更大的类型系统，允许更精细的类型控制。
示例代码
let result;
result = null; // 可赋值为 null
result = 10; // 可赋值为 number
// 更新类型为 number
result = 20;条件语句（if、switch）
TypeScript 支持常见的条件语句，如 if、if...else、switch 语句。这些语句允许根据不同的条件执行不同的代码块。
示例代码
let score: number = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else {
console.log("及格");
}循环语句（for、while、do-while）
TypeScript 提供了多种循环结构，包括 for 循环、while 循环和 do-while 循环，用于重复执行一系列代码块直到满足某个条件。
示例代码
for (let i = 0; i < 5; i++) {
console.log(i);
}
let count = 0;
while (count < 5) {
console.log(count);
count++;
}
do {
console.log("执行一次");
} while (false);函数定义与调用
函数定义时需要指定参数类型和返回值类型。函数可以使用 return 语句返回值。
示例代码
function greet(name: string): string {
return `你好，${name}！`;
}
console.log(greet("world"));类型定义与约束
TypeScript 中的类型定义允许你定义自定义数据类型，这有助于在代码中使用一致的类型和进行更细粒度的类型检查。
示例代码
interface Person {
name: string;
age: number;
}
let alice: Person = {
name: "Alice",
age: 30
};接口（interface）的使用
接口定义了一组类型成员，可以用于约束对象的结构和方法的签名。接口可以应用于类和类型中。
示例代码
interface Animal {
type: string;
sound: string;
}
class Dog implements Animal {
constructor(sound: string) {
this.sound = sound;
}
}
class Cat implements Animal {
constructor(sound: string) {
this.sound = sound;
}
}
function makeSound(animal: Animal) {
console.log(animal.sound);
}
makeSound(new Dog("旺旺"));
makeSound(new Cat("喵喵"));类（class）与构造函数
类提供了一种描述数据和方法的高级结构，构造函数用于初始化类的实例。
示例代码
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
}
let alice = new Person("Alice");声明文件（.d.ts）
声明文件用于定义公共库的类型，允许 TypeScript 确定导入的 API 的类型。
示例代码
// example.d.ts
interface Point {
x: number;
y: number;
}
export function move(point: Point): void;使用示例代码
// 使用 example.d.ts
import { move } from "./example";
let point: Point = { x: 10, y: 20 };
move(point);模块与导入/导出
TypeScript 支持模块系统，允许代码组织为独立的模块，可以导入和导出函数、类、接口等。
示例代码
// module/export-example.ts
export function double(x: number): number {
return x * 2;
}
export class Calculator {
multiply(a: number, b: number): number {
return a * b;
}
}
// 使用导入的模块
import { double, Calculator } from "./export-example";
console.log(double(5)); // 输出：10
let calculator = new Calculator();
console.log(calculator.multiply(2, 3)); // 输出：6类型断言（Type Assertions）
类型断言允许明确指定变量的类型，即使 TypeScript 代码中没有类型注解。
示例代码
let value: any = "hello";
let str = value as string; // 明确指定类型为 string
let num = value as unknown as number; // 明确指定类型为 number静态类型与动态类型转换
TypeScript 支持静态类型转换，但同时也允许动态类型转换。
示例代码
let age = "30"; // 字符串类型
age = Number.parseInt(age); // 动态类型转换为 number
let text = "Hello"; // 字符串类型
text = text.toUpperCase(); // 字符串方法调用TypeScript与集成开发环境（IDE）的配合
TypeScript 配合现代 IDE（如 Visual Studio Code、WebStorm）时，可以利用代码提示、错误检查、可读代码等高级功能。
示例代码
在使用 Visual Studio Code 编辑 TypeScript 文件时，可以通过安装 TypeScript 插件来增强开发体验，实现代码高亮、自动补全、错误检查等功能。
TypeScript代码规范与优化
遵循 TypeScript 编码规范，如 Prettier、ESLint 等工具，可以提高代码质量、可读性和可维护性。
示例代码
// 使用 Prettier 格式化代码
// 全局安装 Prettier 并添加配置文件
// 编写 TypeScript 代码后，通过脚本或命令行运行格式化命令
// 规范化后的代码更加一致、易读TypeScript项目构建与部署
使用如 Webpack、Rollup 或 TypeScript 自带的 tsc 命令行工具对 TypeScript 代码进行编译，生成可运行的 JavaScript 文件。
示例代码
// 使用 TypeScript 编译工具构建项目
// 安装 TypeScript 和构建工具（例如 Webpack）
// 创建 TypeScript 项目结构，编写 TypeScript 代码
// 运行编译命令，将 TypeScript 代码编译为 JavaScript
// 优化构建流程，使用 Webpack 配置文件进行打包和优化
// 部署编译后的 JavaScript 文件到生产环境通过以上示例代码，可以看到 TypeScript 如何在不同场景下提供强大的类型安全性，以及如何与现代开发工具协同工作。掌握 TypeScript 可以显著提升开发效率，减少错误，使团队协作更加流畅。
随时随地看视频
