当前位置：首页 > news >正文

ts基础知识总结

news 来源：原创 2025/8/27 13:15:44

TypeScript（简称TS）是JavaScript（简称JS）的一个超集，它在JS的基础上增加了静态类型检查、类、模块等特性。

TypeScript 与 JavaScript 的不同及好处

不同点

类型系统
JavaScript 是一种弱类型语言，这意味着在声明变量时，不需要明确指定变量的类型，而且变量的类型可以在运行时随意改变。例如：

let num = 10;
console.log(typeof num); // 输出: number
num = 'hello';
console.log(typeof num); // 输出: string

在这个例子中，变量 num 最初被赋值为一个数字，后来又被赋值为一个字符串，JavaScript 解释器并不会报错。这种灵活性虽然在某些情况下可以提高开发效率，但也容易导致一些难以调试的问题，特别是在大型项目中，类型的不确定性会让代码的维护变得异常困难。

而 TypeScript 是一种静态类型语言，在声明变量时，需要明确指定变量的类型，并且变量的类型一旦确定，就不能随意改变，除非进行显式的类型转换。例如：

let num: number = 10;
// num = 'hello'; // 编译错误，不能将字符串赋值给数字类型的变量

在 TypeScript 中，如果尝试将一个不符合类型要求的值赋给变量，编译器会立即报错，这样可以在开发阶段就发现并解决类型相关的问题，避免在运行时出现错误。

编译过程

JavaScript 是一种解释型语言，代码在运行时由浏览器或 Node.js 环境直接解释执行，不需要进行编译。这使得 JavaScript 代码的开发和调试非常方便，开发者可以快速看到代码的运行结果。
而 TypeScript 需要先经过编译，将 TypeScript 代码转换为 JavaScript 代码，然后再由浏览器或 Node.js 环境执行。编译过程中，TypeScript 编译器会对代码进行类型检查，如果发现类型错误，会给出相应的提示。虽然增加了编译步骤，但这也为代码的质量提供了保障，让开发者能够提前发现并解决潜在的问题。

好处

TypeScript 的好处

早期错误检测：TypeScript 的静态类型检查机制可以在编译阶段就发现类型相关的错误，避免在运行时出现难以调试的问题。例如，在一个函数中，如果传入的参数类型不符合要求，TypeScript 编译器会立即报错。

function add(a: number, b: number): number {return a + b;
}
// add('1', '2'); // 编译错误，参数类型必须是数字

代码可读性和可维护性：明确的类型注解让代码更易于理解，特别是在团队协作开发中，其他开发者可以更快地理解代码的意图。例如，在一个复杂的函数中，通过类型注解可以清晰地知道每个参数的类型和返回值的类型。

function getUserInfo(id: number): { name: string; age: number } {// 函数实现return { name: 'John', age: 25 };
}

提示：在使用集成开发环境（IDE）时，TypeScript 可以提供更准确的智能提示，提高开发效率。IDE 可以根据变量的类型，自动提示该类型的属性和方法，让开发者可以更方便地编写代码。

JavaScript 的好处

灵活性：弱类型的特性让 JavaScript 代码编写更加灵活，开发速度更快，适合快速原型开发。开发者可以在不考虑类型的情况下，快速实现各种功能，然后再根据需要进行优化。
广泛的兼容性：几乎所有的浏览器和服务器环境都支持 JavaScript，无需额外的编译步骤。这使得 JavaScript 可以在各种平台上运行，具有很强的通用性。

TypeScript 的类型

基本类型

number
number 类型表示数字，包括整数和浮点数。在 JavaScript 中，所有的数字都使用 Number 类型表示，而在 TypeScript 中，同样使用 number 类型来表示数字。

let age: number = 25;
let price: number = 9.99;

string
string 类型表示字符串，可以使用单引号、双引号或反引号来定义字符串。

let name: string = 'John';
let message: string = "Hello, world!";
let template: string = `My name is ${name}.`;

boolean
boolean 类型表示布尔值，只有 true 和 false 两个值。

let isStudent: boolean = true;
let isAdult: boolean = false;

null 和 undefined
null 表示一个空值，undefined 表示变量已声明但未赋值。在 TypeScript 中，null 和 undefined 既是实际的值，也是类型。

let emptyValue: null = null;
let unassignedValue: undefined = undefined;

any
any 类型表示任意类型，当你不确定变量的具体类型时，可以使用 any。但要注意，过度使用 any 会失去 TypeScript 类型检查的优势，因为 any 类型的变量可以赋值为任何类型的值。

let unknownValue: any = 'could be a string';
unknownValue = 10; // 可以随意改变类型
unknownValue = true; // 也可以赋值为布尔值

数组类型
在 TypeScript 中，有两种方式定义数组类型。

使用类型 + 方括号

let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];

使用泛型数组

let numbers: Array<number> = [1, 2, 3];
let strings: Array<string> = ['a', 'b', 'c'];

这两种方式的效果是相同的，开发者可以根据自己的喜好选择使用。

元组类型
元组类型允许你定义一个固定长度和类型的数组。元组中的每个元素可以有不同的类型，但元素的数量和类型必须与定义时一致。

let person: [string, number] = ['John', 25];
// person = ['John', 25, true]; // 编译错误，元组长度和类型必须与定义时一致

元组类型在处理一些具有固定结构的数据时非常有用，例如在函数返回多个不同类型的值时。

枚举类型
枚举类型用于定义一组命名的常量。枚举类型可以提高代码的可读性和可维护性，特别是在处理一些具有固定取值范围的数据时。
枚举成员默认从 0 开始编号

enum Color {Red,Green,Blue
}let myColor: Color = Color.Green;
console.log(myColor); // 输出: 1，

可以通过赋值来改变枚举成员的编号：

enum Color {Red = 1,Green = 2,Blue = 3
}let myColor: Color = Color.Green;
console.log(myColor); // 输出: 2

函数类型
在 TypeScript 中，可以为函数的参数和返回值指定类型。这样可以确保函数的输入和输出符合预期，提高代码的可靠性。

function add(a: number, b: number): number {return a + b;
}let result: number = add(1, 2);
console.log(result); // 输出: 3

如果函数没有返回值，可以使用 void 类型表示：

function printMessage(message: string): void {console.log(message);
}printMessage('Hello, world!');

TypeScript 的类

基本概念
类是面向对象编程的核心概念之一，它是一种抽象的数据类型，用于描述具有相同属性和方法的对象的集合。TypeScript 支持类的定义和使用，它的语法与 JavaScript 的类语法相似，但增加了类型注解。
示例代码

class Person {// 成员变量name: string;age: number;// 构造函数constructor(name: string, age: number) {this.name = name;this.age = age;}// 成员方法sayHello() {return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;}
}let person = new Person('John', 25);
console.log(person.sayHello());

在这个示例中，Person 类有两个成员变量 name 和 age，一个构造函数 constructor 用于初始化对象的属性，一个成员方法 sayHello 用于返回一个问候语。
2. 类的继承
TypeScript 支持类的继承，通过 extends 关键字可以创建一个子类，子类可以继承父类的属性和方法，并且可以添加自己的属性和方法。

class Student extends Person {grade: number;constructor(name: string, age: number, grade: number) {super(name, age);this.grade = grade;}study() {return `${this.name} is studying in grade ${this.grade}.`;}
}let student = new Student('Alice', 20, 3);
console.log(student.sayHello());
console.log(student.study());

在这个示例中，Student 类继承自 Person 类，除了继承 Person 类的属性和方法外，还添加了自己的属性 grade 和方法 study。在子类的构造函数中，需要使用 super 关键字调用父类的构造函数。
3. 访问修饰符
TypeScript 支持三种访问修饰符：public、private 和 protected。

public：默认的访问修饰符，成员可以在类的内部和外部访问。

class Person {public name: string;constructor(name: string) {this.name = name;}
}let person = new Person('John');
console.log(person.name); // 可以在类的外部访问

- private：私有成员只能在类的内部访问，不能在类的外部访问。

class Person {private age: number;constructor(age: number) {this.age = age;}getAge() {return this.age;}
}let person = new Person(25);
// console.log(person.age); // 编译错误，不能在类的外部访问私有成员
console.log(person.getAge()); // 可以通过类的方法访问私有成员

protected：受保护的成员可以在类的内部和子类中访问，但不能在类的外部访问。

class Person {protected age: number;constructor(age: number) {this.age = age;}
}class Student extends Person {getAge() {return this.age; // 可以在子类中访问受保护的成员}
}let student = new Student(20);
// console.log(student.age); // 编译错误，不能在类的外部访问受保护的成员
console.log(student.getAge());

TypeScript 的泛型

基本概念
泛型是一种创建可重用组件的方式，它允许你在定义函数、类或接口时不预先指定具体的类型，而是在使用时再指定。通过使用泛型，可以编写更加灵活和通用的代码。
函数泛型示例

function identity<T>(arg: T): T {return arg;
}let result1 = identity<string>('hello');
let result2 = identity<number>(10);console.log(result1);
console.log(result2);

在这个示例中，<T> 是泛型类型参数，它表示一个占位符类型。在调用 identity 函数时，通过 <string>和 <number> 来指定具体的类型。也可以省略类型参数，让 TypeScript 编译器自动推断类型：

let result3 = identity('world'); // 编译器自动推断类型为 string
let result4 = identity(20); // 编译器自动推断类型为 number

类泛型示例

class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {return x + y;
};console.log(myGenericNumber.add(5, 3));

在这个示例中，GenericNumber 类使用了泛型类型参数 <T>，可以在创建实例时指定具体的类型，这里指定为 number。这样，zeroValue 属性和 add 方法的参数和返回值类型都变成了 number。
4. 泛型约束
有时候，我们希望对泛型类型参数进行一些限制，确保它具有某些属性或方法。可以使用泛型约束来实现这一点。

interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length); // 现在可以访问 length 属性return arg;
}// loggingIdentity(10); // 编译错误，数字类型没有 length 属性
loggingIdentity('hello'); // 可以正常调用，字符串类型有 length 属性

在这个示例中，T extends Lengthwise 表示泛型类型参数 T 必须是实现了 Lengthwise 接口的类型，这样就可以确保 arg 参数具有 length 属性。

总结

TypeScript 作为 JavaScript 的超集，为开发者带来了很多好处，特别是在大型项目中，它的类型系统和面向对象特性可以让代码更加稳健和易于维护。
通过合理使用 TypeScript 的类型、类和泛型等特性，可以提高开发效率，减少错误的发生。希望通过这篇博客，你对 TypeScript 有了更深入的了解，在今后的开发中能够充分发挥 TypeScript 的优势，编写出高质量的代码。

TypeScript 与 JavaScript 的不同及好处

不同点

好处

TypeScript 的类型

基本类型

TypeScript 的泛型

总结

相关文章：