TypeScript 学习笔记（一）：基础概述与类型系统
1. 引言
TypeScript 是由微软开发的一种开源编程语言，旨在扩展 JavaScript 的功能。它增加了静态类型定义，从而提升代码的可读性、可维护性和开发效率。本系列学习笔记将带你从基础到高级逐步掌握 TypeScript 的核心概念和应用。
2. TypeScript 的安装与配置
2.1 安装 TypeScript
要开始使用 TypeScript，首先需要安装它。你可以通过 npm（Node Package Manager）来安装 TypeScript：
npm install -g typescript
安装完成后，可以通过 tsc 命令检查是否安装成功：
tsc --version
2.2 创建 TypeScript 项目
我们可以通过以下步骤创建一个简单的 TypeScript 项目：
-
创建一个项目文件夹：
mkdir typescript-demo cd typescript-demo -
初始化一个新的
package.json文件：npm init -y -
安装 TypeScript 和 ts-node：
npm install typescript ts-node --save-dev -
创建一个
tsconfig.json文件用于配置 TypeScript 编译选项：{ "compilerOptions": { "target": "es6", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true }, "include": ["src"] } -
在项目根目录创建
src文件夹，并在其中创建第一个 TypeScript 文件index.ts。
3. TypeScript 基础
3.1 类型注解
TypeScript 的核心是类型系统。通过类型注解，我们可以在代码中明确地指定变量、函数参数和返回值的类型。
// 变量类型注解
let isDone: boolean = true;
let decimal: number = 6;
let color: string = "blue";
// 数组类型注解
let list: number[] = [1, 2, 3];
let listGeneric: Array<number> = [1, 2, 3];
// 元组类型注解
let x: [string, number];
x = ["hello", 10];
// 枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
// 任意类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
// 空值类型
let unusable: void = undefined;
3.2 接口
接口用于定义对象的类型。它可以用来描述对象的结构，例如属性和方法。
interface Person {
firstName: string;
lastName: string;
age?: number; // 可选属性
}
function greet(person: Person) {
return `Hello, ${person.firstName} ${person.lastName}`;
}
let user = { firstName: "John", lastName: "Doe" };
console.log(greet(user));
3.3 类
TypeScript 提供了对类的支持，包括继承、封装和多态性。
class Animal {
private name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance}m.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
let dog = new Dog("Buddy");
dog.bark();
dog.move(10);
3.4 函数
TypeScript 中的函数可以为参数和返回值定义类型。它还支持可选参数和默认参数。
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y; };
function buildName(firstName: string, lastName: string = "Smith"): string {
return firstName + " " + lastName;
}
let result1 = buildName("Bob");
let result2 = buildName("Bob", "Adams");
4. TypeScript 编译
TypeScript 文件需要编译成 JavaScript 才能在浏览器或 Node.js 环境中运行。使用 tsc 命令可以将 TypeScript 文件编译为 JavaScript 文件。
tsc src/index.ts
编译后，会生成一个与源文件同名的 JavaScript 文件（index.js），可以直接运行这个文件。
5. 总结
在本篇学习笔记中，我们了解了 TypeScript 的基本概念和一些核心功能。我们从安装 TypeScript 开始，逐步介绍了类型注解、接口、类和函数的使用。下一篇学习笔记将深入探讨更复杂的类型系统以及一些高级特性。
希望你能继续关注本系列的学习笔记，逐步掌握 TypeScript 的强大功能和最佳实践。