文章目录
- 一、TypeScript简介
- 二、TypeScript基础语法
- 1. 变量声明
- 2. 函数
- 3. 类
- 4. 接口
- 5. 类型别名
- 6. 泛型
- 7. 模块
- 8. 类型断言
- 三、TypeScript面向对象
- 1. 类(Class)
- 2. 继承(Inheritance)
- 3. 封装(Encapsulation)
- 4. 多态(Polymorphism)
- 四、相关链接
一、TypeScript简介
TypeScript 是 JavaScript 的一个超集,添加了静态类型系统和其他特性,如接口、枚举、泛型等。这些特性有助于在开发过程中捕获错误,并使代码更易于维护和理解。TypeScript 编译成纯 JavaScript,因此可以在任何支持 JavaScript 的环境中运行。
TypeScript 的一些主要特点:
- 静态类型:TypeScript 提供了静态类型系统,允许你为变量、函数参数和函数返回值指定类型。这有助于在编译时捕获类型错误,减少运行时错误。
- 接口:TypeScript 支持接口,这是一种定义对象形状的方式。接口可以确保类或其他对象具有特定的属性或方法。
- 枚举:TypeScript 的枚举类型提供了一种定义数值集合的方式。与在 JavaScript 中手动创建这样的集合相比,枚举类型提供了更好的可读性和安全性。
- 泛型:泛型允许你在编写代码时使用类型参数,这些参数将在代码实例化时被替换为具体的类型。这有助于编写可重用的组件,这些组件可以处理多种类型的数据。
- 类:TypeScript 提供了类(class)语法,用于定义对象的结构和行为。类可以包含属性(成员变量)、方法(成员函数)和构造函数等。
- 装饰器:装饰器是 TypeScript 的一种特殊声明,它可以被附加到类声明、方法、属性或参数上。装饰器使用
@expression
的形式,expression
必须求值为一个函数,它会在运行时被调用,被装饰的声明信息作为参数传入。 - 模块:TypeScript 支持 ES6 模块语法,允许你将代码拆分成可重用的模块。模块可以导入其他模块中导出的功能,并导出自己的功能供其他模块使用。
- 命名空间:TypeScript 的命名空间用于将相关的代码组织在一起,以避免命名冲突。命名空间可以包含类、接口、函数等。
- JSX:TypeScript 支持 JSX,这是一种在 JavaScript 代码中嵌入 XML(或 HTML)的语法。JSX 使得在 React 等库中编写组件变得更加简单直观。
- 工具支持:TypeScript 提供了丰富的工具支持,如 IntelliSense(智能感知)和类型检查等,这些工具可以提高开发效率并减少错误。
二、TypeScript基础语法
TypeScript 是 JavaScript 的一个超集,它添加了静态类型系统和其他特性,使代码更加健壮和可维护。下面是一些 TypeScript 的基础语法及详细案例。
1. 变量声明
在 TypeScript 中,你可以为变量指定类型。
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
let name: string | null = null; // 使用联合类型
// 使用数组类型
let list: number[] = [1, 2, 3];
// 使用元组类型
let x: [string, number] = ["hello", 10];
// 使用枚举类型
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
2. 函数
函数可以带有参数,参数和返回值都可以指定类型。
function greet(name: string): string {
return "Hello, " + name;
}
// 可选参数
function greetWithOptional(name: string, age?: number): string {
let result = "Hello, " + name;
if (age) {
result += ", you are " + age + " years old.";
}
return result;
}
// 默认参数
function greetWithDefault(name: string, age: number = 25): string {
return "Hello, " + name + ". You are " + age + " years old.";
}
3. 类
TypeScript 支持类,包括继承、构造函数、属性和方法。
class Animal {
name: string;
constructor(theName: string) { this.name = theName; }
move(distanceInMeters: number = 0) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log(`${this.name} says Woof!`);
}
}
let myDog = new Dog("Mitzie");
myDog.bark();
myDog.move(10);
4. 接口
接口用于定义对象的形状。
interface Person {
firstName: string;
lastName: string;
age?: number; // 可选属性
greet(otherPerson: Person): void; // 方法
}
let customer: Person = {
firstName: "Jane",
lastName: "Doe",
greet(otherPerson: Person) {
console.log(`Hello, ${otherPerson.firstName} ${otherPerson.lastName}!`);
}
};
customer.greet({ firstName: "Bob", lastName: "Smith" });
5. 类型别名
使用 type
关键字可以为类型创建别名。
type Name = string;
type NameOrNumber = string | number;
type Callback = () => void;
let myName: Name = "Alice";
let myNameOrAge: NameOrNumber = 42;
let myCallback: Callback = () => console.log("Hello!");
6. 泛型
泛型允许你在定义函数、接口或类时,使用类型参数。
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString"); // 类型参数是 string
let output2 = identity(42); // 不需要显式指定类型参数,编译器可以推断出 T 是 number
7. 模块
使用模块来组织代码。
// myModule.ts
export function sayHello(name: string) {
return "Hello, " + name;
}
// main.ts
import { sayHello } from './myModule';
console.log(sayHello("World"));
8. 类型断言
类型断言用于告诉 TypeScript 编译器:“我知道我在做什么,我确定这个值是这个类型。”
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 或者使用 as 语法
let strLength2: number = (someValue as string).length;
三、TypeScript面向对象
TypeScript 是一种面向对象的编程语言,因为它支持类(class)、接口(interface)、继承(inheritance)、封装(encapsulation)和多态(polymorphism)等面向对象编程(OOP)的核心概念。这些特性使得 TypeScript 非常适合构建可维护、可扩展和可重用的代码库。
TypeScript 中面向对象编程的一些核心概念:
1. 类(Class)
类是一种用户定义的数据类型,它拥有属性和方法。在 TypeScript 中,你可以使用 class
关键字来定义类。
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
speak(): void {
console.log(`${this.name} makes a noise.`);
}
}
let dog = new Animal('Buddy');
dog.speak(); // 输出: Buddy makes a noise.
2. 继承(Inheritance)
继承允许一个类(子类或派生类)继承另一个类(父类或基类)的属性和方法。在 TypeScript 中,你可以使用 extends
关键字来实现继承。
class Dog extends Animal {
bark(): void {
console.log(`${this.name} says Woof!`);
}
}
let myDog = new Dog('Spike');
myDog.speak(); // 继承自 Animal 的 speak 方法
myDog.bark(); // Dog 类特有的 bark 方法
3. 封装(Encapsulation)
封装是将对象的属性和方法组合成一个单独的单元,并通过接口与外部进行交互。在 TypeScript 中,封装是通过类的私有(private
)和保护(protected
)成员来实现的。
class Person {
private _age: number;
constructor(age: number) {
this._age = age;
}
// 提供一个公有的 getter 方法来访问私有属性
get age(): number {
return this._age;
}
}
let person = new Person(30);
console.log(person.age); // 访问公有的 getter 方法来获取私有属性
// console.log(person._age); // 这会报错,因为 _age 是私有的
4. 多态(Polymorphism)
多态是面向对象编程中的一个重要概念,它允许不同的对象对同一消息做出不同的响应。在 TypeScript 中,多态通常通过接口和类的继承来实现。
interface Shape {
area(): number;
}
class Circle implements Shape {
radius: number;
constructor(radius: number) {
this.radius = radius;
}
area(): number {
return Math.PI * this.radius ** 2;
}
}
class Rectangle implements Shape {
width: number;
height: number;
constructor(width: number, height: number) {
this.width = width;
this.height = height;
}
area(): number {
return this.width * this.height;
}
}
function calculateTotalArea(shapes: Shape[]): number {
let totalArea = 0;
for (let shape of shapes) {
totalArea += shape.area(); // 多态:不同的形状对象调用同一个 area 方法
}
return totalArea;
}
let circle = new Circle(5);
let rectangle = new Rectangle(4, 6);
console.log(calculateTotalArea([circle, rectangle])); // 输出总面积
在这个例子中,Shape
接口定义了一个 area
方法,Circle
和 Rectangle
类都实现了这个接口并提供了自己的 area
方法实现。这样,我们就可以在一个函数中接受一个 Shape
类型的数组,并调用每个形状的 area
方法来计算总面积,这就是多态的体现。
四、相关链接
- TypeScript中文网
- TypeScript下载
- TypeScript文档