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

ts基础知识总结

news 来源：原创 2025/6/25 17:08:02

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

  • 编译过程

  1. JavaScript 是一种解释型语言，代码在运行时由浏览器或 Node.js 环境直接解释执行，不需要进行编译。这使得 JavaScript 代码的开发和调试非常方便，开发者可以快速看到代码的运行结果。

  2. 而 TypeScript 需要先经过编译，将 TypeScript 代码转换为 JavaScript 代码，然后再由浏览器或 Node.js 环境执行。编译过程中，TypeScript 编译器会对代码进行类型检查，如果发现类型错误，会给出相应的提示。虽然增加了编译步骤，但这也为代码的质量提供了保障，让开发者能够提前发现并解决潜在的问题。

好处

  • TypeScript 的好处
  1. 早期错误检测：TypeScript 的静态类型检查机制可以在编译阶段就发现类型相关的错误，避免在运行时出现难以调试的问题。例如，在一个函数中，如果传入的参数类型不符合要求，TypeScript 编译器会立即报错。
function add(a: number, b: number): number {
    return a + b;
}
// add('1', '2'); // 编译错误，参数类型必须是数字
  1. 代码可读性和可维护性：明确的类型注解让代码更易于理解，特别是在团队协作开发中，其他开发者可以更快地理解代码的意图。例如，在一个复杂的函数中，通过类型注解可以清晰地知道每个参数的类型和返回值的类型。
function getUserInfo(id: number): { name: string; age: number } {
    // 函数实现
    return { name: 'John', age: 25 };
}

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

  • JavaScript 的好处
  1. 灵活性：弱类型的特性让 JavaScript 代码编写更加灵活，开发速度更快，适合快速原型开发。开发者可以在不考虑类型的情况下，快速实现各种功能，然后再根据需要进行优化。
  2. 广泛的兼容性：几乎所有的浏览器和服务器环境都支持 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 中，有两种方式定义数组类型。
  1. 使用类型 + 方括号
let numbers: number[] = [1, 2, 3];
let strings: string[] = ['a', 'b', 'c'];
  1. 使用泛型数组
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 的类
  1. 基本概念
    类是面向对象编程的核心概念之一，它是一种抽象的数据类型，用于描述具有相同属性和方法的对象的集合。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 的泛型

  1. 基本概念
    泛型是一种创建可重用组件的方式，它允许你在定义函数、类或接口时不预先指定具体的类型，而是在使用时再指定。通过使用泛型，可以编写更加灵活和通用的代码。
  2. 函数泛型示例
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
  1. 类泛型示例
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 的优势，编写出高质量的代码。

相关文章：

  • wordpress时间线重庆百度seo代理
  • wordpress网站怎么建设广东省广州市佛山市
  • 临沂做网站推广的公司有爱站网关键词工具
  • 怎样申请做自己的网站外贸推广网站
  • 为拟建设的网站申请一个域名国内做网站比较好的公司
  • 百度怎么制作网站教程最新国内新闻事件今天
  • Java后端开发流程
  • [ctfshow web入门]burpsuite的下载与使用
  • 每日c/c++题 备战蓝桥杯（小球反弹）[运动分解求解，最大公约数gcd]
  • Java进阶之旅-day05：网络编程
  • 1-SQL server 2022和SSMS的使用案例1
  • 从零构建大语言模型全栈开发指南：附录与资源-2.数据集大全-公开语料库、多模态数据集与领域专用数据源
  • 构建第一个ArkTS应用：Hello World之旅
  • 【百日精通JAVA | SQL篇 | 第三篇】 MYSQL增删改查
  • scala课后总结（5）
  • matlab 计算点云的形心
  • Flask学习笔记 - 项目结构 + 路由
  • C++11观察者模式示例
  • C语言单链表的增删改补
  • 从制造业历史来看，汽车兴，则制造业兴，则国兴，则机器视觉兴
  • 云原生与微服务的关系
  • Git 换行符警告（LF replaced by CRLF）的解决方案
  • 【无人机】PX4 飞控系统架构
  • 【Scratch编程系列】Scratch编程软件界面
  • b4a安卓开发技术和建议,VB6开发Android APK
  • AT_abc212_d [ABC212D] Querying Multiset