文章目录
📈「作者简介」:不知名十八线技术博主【ai_todo】
📚「推荐主页」:前端小姐姐【阿珊和她的猫】
🎁「推荐专栏」:《从0到0.01入门React》
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)
函数
在TypeScript中,函数是一种能够执行特定任务的可调用对象。
可以使用以下语法声明和定义一个函数:
function functionName(parameter1: type1, parameter2: type2, ...): returnType {
// 函数体
// 执行特定任务的代码
return value; // 可选,指定函数的返回值类型和返回值
}
让我们逐个解释这些部分:
functionName
:函数名称,用于在调用函数时引用该函数。parameter1
,parameter2
, …:函数参数,用于接收传递给函数的值。可以在函数声明中指定参数的类型注解,并根据需要添加默认值。type1
,type2
, …:参数的类型注解,指定参数的预期类型。returnType
:函数的返回值类型,指定函数执行后返回的值的类型。可以省略,如果省略,则函数的返回类型将是void
(无返回值)。return value
:可选的返回语句,指定函数执行后的返回值。如果函数有返回值,并且指定了返回类型,那么返回值的类型必须与返回类型兼容。
以下是一些示例来说明不同类型的函数:
1. 无参数和无返回值的函数
function sayHello(): void {
console.log("Hello!");
}
2. 带参数函数和返回值的函数
function add(a: number, b: number): number {
return a + b;
}
3. 默认参数值的函数
function greet(name: string = "Alice"): void {
console.log("Hello, " + name + "!");
}
4. 匿名函数
const square = function(x: number): number {
return x * x;
};
5. 函数表达式
const multiply = (a: number, b: number): number => {
return a * b;
};
除了以上示例,TypeScript还支持更多的函数特性,如可选参数、剩余参数、函数重载等。这些特性可以让您更灵活、更精确地定义函数的行为。
类与面向对象编程
在TypeScript中,可以使用类和面向对象编程的概念来组织和抽象代码。
类是对象的蓝图,它定义了对象所具有的属性和方法。
下面我们将介绍如何在TypeScript中定义类和使用面向对象编程的一些特性。
1. 定义类
可以使用class
关键字来定义一个类,并使用constructor
方法来初始化类的实例。类可以包含属性、方法和构造函数等成员。
class Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
2. 创建类的实例
通过使用new
关键字,可以创建类的实例,并调用类的构造函数来初始化对象的属性。
const person1 = new Person("Alice", 25);
person1.sayHello(); // 输出:Hello, my name is Alice and I'm 25 years old.
3. 继承
TypeScript支持类的继承,可以使用extends
关键字来创建一个子类并继承父类的属性和方法。
class Student extends Person {
grade: number;
constructor(name: string, age: number, grade: number) {
super(name, age); // 调用父类的构造函数来初始化继承的属性
this.grade = grade;
}
study(): void {
console.log(`${this.name} is studying in grade ${this.grade}.`);
}
}
4. 方法重写
子类可以重写父类的方法,以改变方法的实现。
class Student extends Person {
// ...
sayHello(): void {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old, and I'm a student.`);
}
}
5. 访问修饰符
TypeScript提供了访问修饰符,用于限制类成员的访问权限。常用的访问修饰符有public
、private
和protected
。
public
:公共访问修饰符,可以在类内部、子类和类外部访问。private
:私有访问修饰符,只能在类内部访问。protected
:受保护访问修饰符,可以在类内部和子类中访问,但不能在类外部访问。
class Person {
private name: string;
protected age: number;
public gender: string;
constructor(name: string, age: number, gender: string) {
this.name = name;
this.age = age;
this.gender = gender;
}
// ...
}
通过访问修饰符,可以灵活地控制属性和方法的访问权限,增加类的封装性和安全性。
这只是面向对象编程在TypeScript中的简要介绍,还有许多其他概念和特性,如抽象类、接口、多态等,可以进行更深入的学习和实践。
接口
在TypeScript中,接口(Interfaces)用于定义对象的结构,包括属性和方法的类型。
接口提供了一种方式来描述对象的形状,并定义了对象应该具有的属性和方法。
以下是在TypeScript中定义和使用接口的示例:
1. 定义接口
使用interface
关键字来定义一个接口,并在接口中声明对象的属性和方法。
interface Person {
name: string;
age: number;
sayHello(): void;
}
2. 实现接口
在类中可以使用implements
关键字来实现一个或多个接口,表示类将遵循接口中定义的结构。
class Student implements Person {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
sayHello(): void {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}
}
3. 接口可选属性
可以使用?
符号表示接口中的属性为可选的。
interface Person {
name: string;
age?: number;
sayHello(): void;
}
4. 接口可读写属性
可以使用readonly
关键字表示接口中的属性只读,无法修改。
interface Point {
readonly x: number;
readonly y: number;
}
5. 接口函数类型的定义
接口可以定义函数类型的属性,例如回调函数。
interface OnClick {
(event: MouseEvent): void;
}
通过使用接口,可以使代码更具可读性和可维护性,同时提供类型检查,确保对象符合预期的结构和行为。
除了上述示例,TypeScript的接口还支持继承、接口之间的实现、可索引类型等高级特性,这些特性能够更灵活、更精确地描述对象结构。
泛型
在TypeScript
中,泛型(Generics)允许我们参数化类型,从而在多个地方重用一段代码,并增强代码的类型安全性。使用泛型能够创建具有通用性的函数、类和接口。
以下是在TypeScript中使用泛型的几个示例:
1. 泛型函数
可以使用<T>
语法声明一个泛型参数,并在函数的参数、返回类型或函数体中使用这个参数。
function identity<T>(arg: T): T {
return arg;
}
// 使用泛型函数
let result = identity<number>(10); // 指定泛型参数为number类型
console.log(result); // 输出:10
// 在很多情况下,编译器可以推断泛型参数的类型:
let result2 = identity("Hello"); // 编译器推断泛型参数为string类型
console.log(result2); // 输出:Hello
2. 泛型类
可以将泛型参数应用于类中的属性、方法和构造函数等成员。
class Box<T> {
private item: T;
constructor(item: T) {
this.item = item;
}
getItem(): T {
return this.item;
}
}
// 使用泛型类
let box1 = new Box<number>(10); // 指定泛型参数为number类型
console.log(box1.getItem()); // 输出:10
let box2 = new Box<string>("Apple"); // 指定泛型参数为string类型
console.log(box2.getItem()); // 输出:Apple
3. 泛型接口
可以使用接口和泛型结合,定义具有泛型类型的接口。
interface KeyValuePair<K, V> {
key: K;
value: V;
}
// 使用泛型接口
let pair: KeyValuePair<number, string> = { key: 1, value: "Apple" };
console.log(pair); // 输出:{ key: 1, value: 'Apple' }
泛型在编写可重用和类型安全的代码时非常有用,它们允许我们针对不同的数据类型编写通用的函数和类。
需要注意的是,泛型是在编译时进行类型检查的,并在编译为JavaScript时被擦除,不会影响运行时的性能。