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

前端面试十一之TS

TS 是 TypeScript 的缩写,是一种由微软开发的开源编程语言,它是 JavaScript 的一个超集,为 JavaScript 添加了类型系统和对 ES6+ 的支持。以下是关于 TypeScript 的详细介绍:

一、特点

  • 类型系统:TypeScript 引入了类型注解,允许开发者为变量、函数参数、返回值等添加类型信息。这有助于在编译阶段发现潜在的类型错误,提高代码的健壮性和可维护性。例如:

    let message: string = "Hello, TypeScript!";
    function add(a: number, b: number): number {return a + b;
    }

    在 TypeScript 中,typeinterface 都可以用来定义复杂数据类型,它们各有特点和适用场景,以下是详细介绍:

二、使用 type 定义复杂数据类型

  • 基本语法
type TypeName = {property1: Type1;property2: Type2;// ...
};
  • 定义对象类型
type Person = {name: string;age: number;address: {street: string;city: string;};
};
  • 定义联合类型
    type StringOrNumber = string | number;
  • 定义交叉类型: 
    type Employee = {employeeId: number;
    } & Person;
  • 定义泛型类型: 
    type Container<T> = {value: T;
    };

    三、使用 interface 定义复杂数据类型

  • 基本语法: 
    interface InterfaceName {property1: Type1;property2: Type2;// ...
    }
  • 定义对象类型: 
    interface Person {name: string;age: number;address: {street: string;city: string;};
    }
  • 定义类类型: 
    interface Person {name: string;age: number;greet(): void;
    }
    class Student implements Person {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}`);}
    }

    type 与 interface 的区别与选择

  • 区别

    • type 是类型别名,可以为任何类型定义一个新的名字,包括基本类型、联合类型、交叉类型等;而 interface 主要用于定义对象类型或类类型。

    • interface 可以被类实现(implements),而 type 不行。

    • interface 可以继承其他接口,而 type 不行。

    • type 定义的类型可以使用交叉类型(&)来组合多个类型,而 interface 只能继承一个接口。

  • 选择

    • 如果需要定义一个对象类型或类类型,并且希望使用继承或类实现,建议使用 interface

    • 如果需要定义联合类型、交叉类型或泛型类型,或者需要为复杂类型定义别名,建议使用 type

    • 在实际开发中,可以根据具体需求和团队编码规范来选择使用 typeinterface

四、 函数类型

在 TypeScript 中,函数类型用于描述函数的参数类型和返回值类型。你可以通过类型别名(type)或接口(interface)来定义函数类型。 

interface Api {foo(): void;bar(str: string): string;
}function test(api: Api) {api.foo();const result = api.bar("hello");console.log(result);
}// 调用 test 函数
test({foo() {console.log('ok');},bar(str: string) {return str.toUpperCase();}
});

五、字面量与nullish类型

// 字面量类型:功能:输出一段文字(参数1),参数2决定文字的对齐方式
function printText(text: string, alignment: "left" | "right" | "center") {console.log(text, alignment);
}printText("Hello", "left");
printText("Hello", "center");// nullish 类型 null undefined
function test(x?: string | null) {// if (x !== null && x !== undefined)// console.log(x.toUpperCase());  // 错误:x 可能为 null 或 undefinedconsole.log(x?.toUpperCase());   // 正确:使用可选链
}test("hello");
test(null);
test();

六、泛型

interface Ref<T> {value: T;
}const r1: Ref<string> = { value: 'hello' };
const r2: Ref<number> = { value: 123 };
const r3: Ref<boolean> = { value: true };function test1(n: string) {return { value: n };
}function test2(n: number) {return { value: n };
}function ref<T>(n: T): Ref<T> {return { value: n };
}const v1 = ref("hello");      // Ref<string>
const v2 = ref(123.3333);     // Ref<number>
console.log(v2.value.toFixed(2));  // 输出: 123.33

 七、class语法

一个基本的类定义包括类名、属性(成员变量)和方法(成员函数):

class Person {// 类属性(成员变量)firstName: string;lastName: string;// 构造函数constructor(firstName: string, lastName: string) {this.firstName = firstName;this.lastName = lastName;}// 类方法(成员函数)fullName(): string {return `${this.firstName} ${this.lastName}`;}
}

继承

TypeScript 支持类的继承,可以使用 extends 关键字来实现:

class Employee extends Person {employeeId: number;constructor(firstName: string, lastName: string, employeeId: number) {super(firstName, lastName);  // 调用父类的构造函数this.employeeId = employeeId;}work(): string {return `${this.fullName()} is working`;}
}

访问修饰符

TypeScript 提供了三种访问修饰符:

  • public:公共的,可以在任何地方访问。

  • private:私有的,只能在类内部访问。

  • protected:受保护的,可以在类内部和子类中访问。

    class Person {private name: string;constructor(name: string) {this.name = name;}public getName(): string {return this.name;}
    }

    抽象类

    抽象类是不能被实例化的类,通常用作基类:

    abstract class Animal {abstract makeSound(): void;move(): void {console.log("Moving");}
    }class Dog extends Animal {makeSound(): void {console.log("Bark");}
    }

    静态成员

    类可以包含静态属性和方法,这些成员属于类本身,而不是类的实例:

    class Utils {static pi: number = 3.14;static calculateCircleArea(radius: number): number {return Utils.pi * radius * radius;}
    }

    类表达式

    类也可以作为表达式定义,这在定义匿名类时非常有用:

    const Animal = class {makeSound() {console.log("Some generic sound");}
    };const dog = new Animal();
    dog.makeSound();  // 输出: Some generic sound

    类类型

    类本身可以作为类型使用:

    let person: Person;
    person = new Person("Alice", "Smith");

    类与接口

    类可以实现接口,接口定义了类必须遵循的结构:

    interface Greeting {greet(): string;
    }class Hello implements Greeting {greet(): string {return "Hello";}
    }

http://www.dtcms.com/a/271840.html

相关文章:

  • 服务器重装后如何“复活”旧硬盘上的 Anaconda 环境?—— 一次完整的排错与恢复记录
  • 计算机学科专业基础综合(408)四门核心课程的知识点总结
  • 微信小程序101~110
  • 以太网基础⑤UDP 协议原理与 FPGA 实现
  • 2025年7月9日学习笔记——模式识别与机器学习——fisher线性回归、感知器、最小二乘法、最小误差判别算法、罗杰斯特回归算法——线性分类器
  • 【TCP/IP】1. 概述
  • AI赋能生活:深度解析与技术洞察
  • LiteHub之文件下载与视频播放
  • 微信小程序控制空调之EMQX服务器安装与配置
  • 重新配置电脑中的环境变量
  • SpringBoot ThreadLocal 全局动态变量设置
  • 机器学习11——支持向量机上
  • 初学者对编译和链接的学习笔记(含预编译详解)
  • 广告匹配策略的智能化之路:人工智能大模型的方法和步骤
  • 多模态大语言模型arxiv论文略读(156)
  • vivo Pulsar 万亿级消息处理实践(3)-KoP指标异常修复
  • 快速上手MongoDB与.NET/C#整合
  • 【AI大模型】LLM模型架构深度解析:BERT vs. GPT vs. T5
  • searxng 对接openweb-UI实现大模型通过国内搜索引擎在线搜索
  • 搜索引擎vs向量数据库:LangChain混合检索架构实战解析
  • 计算机视觉 之 数字图像处理基础
  • 基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
  • TCP-与-UDP-协议详解:原理、区别与应用场景全解析
  • 北斗舞动在线监测装置:电力安全的“智慧守护者”
  • SpringMVC @ExceptionHandler 典型用法
  • 了解去中心化金融在现代经济中的作用——安全交易新时代
  • 编写bat文件自动打开chrome浏览器,并通过selenium抓取浏览器操作chrome
  • 双指针-18.四数之和-力扣(LeetCode)
  • linux系统---ISCSI存储服务
  • Language Models are Few-Shot Learners: 开箱即用的GPT-3(二)