Typescript 面试题及其答案与代码示例

1.什么是 TypeScript，它与 JavaScript 有何不同。
答：TypeScript 是 JavaScript 的超集，为该语言添加了静态类型。它允许开发人员定义变量、函数参数和返回值的数据类型，这有助于在编译时而不是运行时捕获错误。这是一个例子：

function greet(name: string): string {return `Hello, ${name}!`;
}
const message: string = greet('John');
console.log(message); // Output: "Hello, John!"

2.解释 TypeScript 中静态类型的概念及其好处。
答案：TypeScript 中的静态类型可以在开发过程中指定变量、函数参数和返回值的数据类型。这有助于及早捕获与类型相关的错误，从而提高代码质量和可维护性。
答案：好处是拥有更好的代码文档、增强的工具支持以及提高的开发人员生产力。

3.使用 TypeScript 相对于纯 JavaScript 有什么好处？
答：TypeScript 提供了多种好处，包括静态类型、更好的代码分析和工具支持、改进的代码可读性、早期错误检测、更轻松的代码重构以及增强的代码文档。它还使开发人员能够编写更易于维护和扩展的应用程序。

4.TypeScript 中的接口是什么？举个例子。
答：TypeScript 中的接口定义了对象结构的契约，指定其属性和方法的名称和类型。它们促进强大的类型检查并实现更好的代码组织

interface Person {name: string;age: number;
}
function greet(person: Person): string {return `Hello, ${person.name}! You are ${person.age} years old.`;
}
const john: Person = { name: 'John', age: 30 };
const message: string = greet(john);
console.log(message); // Output: "Hello, John! You are 30 years old."

5.如何在 TypeScript 的接口中定义可选属性？
答：您可以使用 ? 在接口中定义可选属性。属性名称后面的修饰符。可选属性可能存在于实现该接口的对象中，也可能不存在。

interface Person {name: string;age?: number;
}
const john: Person = { name: 'John' };
const jane: Person = { name: 'Jane', age: 25 };

6.解释 TypeScript 中联合类型的概念。
答：联合类型允许一个变量有多种类型。它通过使用 | 来表示类型之间的符号。这允许变量存储任何指定类型的值。

function test(id: number | string): void {console.log(`ID: ${id}`);
}
test(123); // Output: "ID: 123"
test('abc'); // Output: "ID: abc"

7.TypeScript 中的类型断言是什么？
答：当无法自动推断类型时，TypeScript 中的类型断言允许您显式告诉编译器变量的类型。这是使用 或 as type 语法实现的。

let length: any = '5';
let numberLength: number = <number>length; // Using <type> syntax
let stringLength: number = length as number; // Using "as type" syntax

8.如何在 TypeScript 中定义具有可选参数和默认参数的函数？

答：您可以使用 ? 定义带有可选参数和默认参数的函数。可选参数的修饰符以及为参数分配默认值。

function test(name: string, message: string = 'Hello', times?: number): void {for (let i = 0; i < (times || 1); i++) {console.log(`${message}, ${name}!`);}
}
test('John'); // Output: "Hello, John!"
test('Jane', 'Hi'); // Output: "Hi, Jane!"
test('Tom', 'Hey', 3); // Output: "Hey, Tom!", "Hey, Tom!", "Hey, Tom!"

9.TypeScript 中的泛型是什么？
答：泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。
可以把泛型理解为代表类型的参数，我们希望传入的值是什么类型，返回的值就是什么类型，传入的值可以是任意的类型，这时候就可以用到 泛型
，如果使用 any 的话，就失去了类型检查的意义

function createArray1(length: any, value: any): Array<any> {let result: any = [];for (let i = 0; i < length; i++) {result[i] = value;}return result;
}let result = createArray1(3, 'x');
console.log(result);// 最傻的写法：每种类型都得定义一种函数
function createArray2(length: number, value: string): Array<string> {let result: Array<string> = [];for (let i = 0; i < length; i++) {result[i] = value;}return result;
}//使用泛型
// 有关联的地方都改成 <T>
function createArray<T>(length: number, value: T): Array<T> {let result: T[] = [];for (let i = 0; i < length; i++) {result[i] = value;}return result;
}
// 使用的时候再指定类型
let result = createArray<string>(3, 'x');
// 也可以不指定类型，TS 会自动类型推导
let result2 = createArray(3, 'x');
console.log(result);

10.解释 TypeScript 中的“keyof”关键字
答：TypeScript 中的“keyof”关键字是一个类型运算符，它返回表示对象键的文字类型的联合。它允许您对对象键执行类型安全操作

interface Person {name: string;age: number;
}
type PersonKeys = keyof Person; // "name" | "age"

11.TypeScript 中的类型保护是什么？
类型防护是 TypeScript 表达式，它在运行时检查变量的类型，并允许您根据类型执行不同的操作。它们可以实现更好的类型推断，并提供一种更有效地处理联合类型的方法。

12.TypeScript 中条件类型的概念？
答：TypeScript 中的条件类型允许您创建依赖于条件的类型。它们用于根据类型之间的关系执行类型推断。

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function add(a: number, b: number): number {return a + b;
}
type AddReturnType = ReturnType<typeof add>; // number

13.TypeScript 中的“只读”实用程序类型是什么？它是如何工作的？
答：TypeScript 中的“Readonly”实用程序类型用于使现有类型的所有属性变为只读。它可以防止对象创建后修改其属性。

interface Person {readonly name: string;age: number;
}
const john: Readonly<Person> = { name: 'John', age: 30 };
john.age = 31; // Error: Cannot assign to 'age' because it is a read-only property.

14.解释 TypeScript 中的“Pick”实用程序类型。
答：TypeScript 中的“Pick”实用程序类型允许您通过从现有类型中选择特定属性来创建新类型。它有助于创建现有类型的子集。

interface Person {name: string;age: number;city: string;
}
type PersonInfo = Pick<Person, 'name' | 'age'>;
const john: PersonInfo = { name: 'John', age: 30 };

15…TypeScript 中的“Omit”实用程序类型是什么？
答：TypeScript 中的“Omit”实用程序类型允许您通过从现有类型中排除特定属性来创建新类型。它有助于创建删除了某些属性的类型。

interface Person {name: string;age: number;city: string;
}
type PersonWithoutCity = Omit<Person, 'city'>;
const john: PersonWithoutCity = { name: 'John', age: 30 };

16.TypeScript 中的“条件映射类型”是什么？
答：条件映射类型将条件类型和映射类型结合起来，根据条件执行类型转换。它们允许您根据现有类型的属性创建动态类型。

interface Person {name: string;age: number;
}
type MappedConditional<T> = {[K in keyof T]: T[K] extends number ? string : T[K];
};
const john: MappedConditional<Person> = { name: 'John', age: '30' };

17.条件类型中“keyof”和“in”关键字的用途是什么？
答：条件类型中的“keyof”关键字用于获取对象类型的键的并集。它允许您以类型安全的方式使用对象的键。“in”关键字检查属性键是否存在于从“keyof”获得的键的并集中。

type CheckKey<T, K extends keyof T> = K extends 'name' ? true : false;
interface Person {name: string;age: number;
}
type IsNameKey = CheckKey<Person, 'name'>; // Result: true
type IsCityKey = CheckKey<Person, 'city'>; // Result: false

18.解释条件类型中的“infer”关键字。
答：条件类型中的“infer”关键字用于从条件类型中的另一种类型推断出类型。它允许您捕获类型并将其分配给类型变量。

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
function add(a: number, b: number): number {return a + b;
}
type AddReturnType = ReturnType<typeof add>; // Result: number

19.TypeScript 中的“keyof”和“typeof”关键字有何用途？
答：“keyof”关键字用于获取对象类型的键的并集，“typeof”关键字用于获取值的类型。

interface Person {name: string;age: number;
}
type PersonKeys = keyof Person; // Result: "name" | "age"
const john = { name: 'John', age: 30 };
type JohnType = typeof john; // Result: { name: string, age: number }

20.TypeScript 中的“const 断言”是什么？
答：TypeScript 中的“Const 断言”允许您通知编译器特定的文字表达式应被视为文字而不是扩展类型。

function getConfig() {const config = {apiUrl: 'https://api.example.com',timeout: 5000,} as const;return config;
}
const config = getConfig();

21.解释 TypeScript 条件类型中的“keyof T extends K”构造。
答：TypeScript 条件类型中的“keyof T extends K”构造用于使用“extends”关键字根据指定条件过滤对象类型的键。

type FilterProperties<T, K> = {[P in keyof T as T[P] extends K ? P : never]: T[P];
};
interface Person {name: string;age: number;email: string;
}
type StringProperties = FilterProperties<Person, string>;
// Result: {
//   name: string;
//   email: string;
// }
type NumberProperties = FilterProperties<Person, number>;
// Result: {
//   age: number;
// }

22.TypeScript 中的“mixins”是什么？
答：TypeScript 中的 Mixins 允许您通过将某个类与一个或多个其他类组合来向该类添加行为。它支持代码重用和组合。

class Printable {print() {console.log(this.toString());}
}
class MyObject {constructor(private name: string) {}toString() {return `Object: ${this.name}`;}
}
interface MyObject extends Printable {}
const myObj = new MyObject('example');
myObj.print(); // Output: "Object: example"

23.解释 TypeScript 中“声明合并”的概念。
答：TypeScript 中的“声明合并”是编译器将同一实体的多个声明合并到单个定义中的过程。它允许您扩展接口、函数、类和枚举。

interface Person {name: string;
}
interface Person {age: number;
}
const john: Person = { name: 'John', age: 30 };
console.log(john); // Output: { name: 'John', age: 30 }

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/149169.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

2.4路由日志管理

2.4路由日志管理

2.4路由/日志管理 一、静态路由和动态路由 路由器在转发数据时&#xff0c;需要现在路由表中查找相应的路由&#xff0c;有三种途径 &#xff08;1&#xff09;直连路由&#xff1a;路由器自动添加和自己直连的路由 &#xff08;2&#xff09;静态路由&#xff1a;管理员手动…
阅读更多...
GPT-4V-Act ：一个多模态AI助手，能够像人类一样模拟通过鼠标和键盘进行网页浏览。

GPT-4V-Act ：一个多模态AI助手，能够像人类一样模拟通过鼠标和键盘进行网页浏览。

内容来源&#xff1a;xiaohuggg GPT-4V-Act &#xff1a;一个多模态AI助手&#xff0c;能够像人类一样模拟通过鼠标和键盘进行网页浏览。 它可以模拟人类浏览网页时的行为&#xff0c;如点击链接、填写表单、滚动页面等。 它通过视觉理解技术识别网页上的元素&#xff0c;就像…
阅读更多...
微信小程序 官方文档使用指南

微信小程序 官方文档使用指南

官方文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/ 触发事件 在wxml页面写逻辑代码js文件的调用 微信内部api
阅读更多...
Git-概念与架构

Git-概念与架构

GIT-概念与架构 一、背景和起源二、版本控制系统1.版本控制分类1.1 集中式版本控制1.2 分布式版本控制 2.Git和SVN对比2.1 SVN2.2 GIT 三、GIT框架1.工作区&#xff08;working directory&#xff09;2.暂存区&#xff08;staging area&#xff09;3.本地仓库&#xff08;local…
阅读更多...
nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm：轻松管理多个 Node 版本 | 开源日报 No.80

nvm-sh/nvm Stars: 67.6k License: MIT Node Version Manager&#xff0c;是一个 POSIX 兼容的 bash 脚本&#xff0c;用于管理多个活动 node.js 版本。nvm 可以让你通过命令行快速安装和使用不同版本的 Node。它可以在任何符合 POSIX 标准的 shell&#xff08;sh、dash、ksh…
阅读更多...
QFile文件读写操作QFileInFo文件信息读取

QFile文件读写操作QFileInFo文件信息读取

点击按钮选择路径&#xff0c;路径显示在lineEdit中 将路径下的文件的内容放在textEdit中 最后显示出来 &#xff01;file.atend()//没有读到文件尾就一直读 file.readline表示按行进行读 追加的方式进行写 要是重新写的话用file.open(QIODevice::write) 用QFileInFo来读取…
阅读更多...
这8个Wireshark使用技巧，一看就会！

这8个Wireshark使用技巧，一看就会！

今天就给你分享8个常用的Wireshark使用技巧&#xff0c;一看就会。如果是处理 HTTP&#xff0c;HTTPS 大家还是用还是用 Fiddler&#xff0c;但如果是其他协议比如 TCP&#xff0c;UDP&#xff0c;还是用wireshark。 今天给你准备了wireshark和Fiddler的安装包给你&#xff0c…
阅读更多...
22. 深度学习 - 自动求导

22. 深度学习 - 自动求导

Hi&#xff0c;你好。我是茶桁。 咱们接着上节课内容继续讲&#xff0c;我们上节课已经了解了拓朴排序的原理&#xff0c;并且简单的模拟实现了。我们这节课就来开始将其中的内容变成具体的计算过程。 linear, sigmoid和loss这三个函数的值具体该如何计算呢&#xff1f; 我们…
阅读更多...
基于springboot实现电子招投标系统【项目源码】

基于springboot实现电子招投标系统【项目源码】

基于springboot实现电子招投标系统演示 SpringBoot框架 SpringBoot是一个全新开源的轻量级框架。基于Spring4.0设计&#xff0c;其不仅继承了Spring框架原来有的优秀特性&#xff0c;而且还通过简化配置文件来进一步简化了Spring应用的整个搭建以及开发过程。另外在原本的Spri…
阅读更多...
Python学习笔记--数量词

Python学习笔记--数量词

数量词 来，继续加深对正则表达式的理解，这部分理解一下数量词，为什么要用数量词，想想都知道，如果你要匹配几十上百的字符时，难道你要一个一个的写，所以就出现了数量词。 数量词的词法是：{min,max} 。min 和 max 都是非负整数。如果逗号有而 max 被忽略了，则 max 没有…
阅读更多...
​分享mfc140u.dll丢失的解决方法，针对原因解决mfc140u.dll丢失的问题

​分享mfc140u.dll丢失的解决方法，针对原因解决mfc140u.dll丢失的问题

作为电脑小白&#xff0c;如果电脑中出现了mfc140u.dll丢失的问题&#xff0c;肯定会比较的慌乱。但是出现mfc140u.dll丢失的问题&#xff0c;其实也有很简单的办法&#xff0c;所以大家不用慌张&#xff0c;接下来就教大家解决办法&#xff0c;能够有效的解决mfc140u.dll丢失的…
阅读更多...
2023年中国中端连锁酒店分类、市场规模及主要企业市占率[图]

2023年中国中端连锁酒店分类、市场规模及主要企业市占率[图]

中端连锁酒店行业是指定位于中档酒店市场、具有全国统一的品牌形象识别系统、全国统一的运营体系、会员体系和营销体系的酒店。中端酒店通常提供舒适、标准化的房间设施和服务&#xff0c;价格较为合理&#xff0c;符合广大消费者的需求。其价格略高于经济型酒店&#xff0c;但…
阅读更多...
html实现图片裁剪处理(附源码)

html实现图片裁剪处理(附源码)

文章目录 1.设计来源1.1 主界面1.2 裁剪界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/134455169 html实现图片裁剪处理(附源码)&#xff0c;支持图片放大缩小&#…
阅读更多...
uniapp的/绝对定位/相对定位/固定定位/粘滞定位

uniapp的/绝对定位/相对定位/固定定位/粘滞定位

【[html5]你还分不清楚绝对定位和相对定位......】 相对定位一般配合绝对定位使用 <template><view class"content"><view style"background-color: black;width: 100%;height: 300px;position:relative;"><view class"one"…
阅读更多...
比科奇推出5G小基站开放式RAN射频单元的高性能低功耗SoC

比科奇推出5G小基站开放式RAN射频单元的高性能低功耗SoC

全新的PC805作为业界首款支持25Gbps速率eCPRI和CPRI前传接口的系统级芯片&#xff08;SoC&#xff09;&#xff0c;消除了实现低成本开放式射频单元的障碍 中国北京&#xff0c;2023年11月 - 5G开放式RAN基带芯片和电信级软件提供商比科奇&#xff08;Picocom&#xff09;今日…
阅读更多...
开源vs闭源大模型如何塑造技术的未来？开源模型的优劣势未来发展方向

开源vs闭源大模型如何塑造技术的未来？开源模型的优劣势未来发展方向

开源vs闭源大模型如何塑造技术的未来&#xff1f;开源模型的优劣势&未来发展方向 写在最前面一、开源与闭源&#xff1a;定义与历史背景开源和闭源的定义开源大模型&#xff1a;社区驱动的创新 二、开源和闭源的优劣势比较开源大模型&#xff08;瓶颈&#xff09;数据&…
阅读更多...
搭建 AI 图像生成器 (SAAS) php laravel

搭建 AI 图像生成器 (SAAS) php laravel

今天来搭一套&#xff0c;AI 图像生成器 是基于 Openai DALLE 2 和 Openai DALLE 3 以及 Stability AI 和稳定扩散 API 构建的脚本&#xff0c;为用户提供了使用简单的提示和大小生成独特自定义图像的可能性。在这个平台上&#xff0c;创意得以快速、高效地实现&#xff0c;借助…
阅读更多...
基于 FFmpeg 的跨平台视频播放器简明教程（十一）：一种简易播放器的架构介绍

基于 FFmpeg 的跨平台视频播放器简明教程（十一）：一种简易播放器的架构介绍

系列文章目录 基于 FFmpeg 的跨平台视频播放器简明教程&#xff08;一&#xff09;&#xff1a;FFMPEG Conan 环境集成基于 FFmpeg 的跨平台视频播放器简明教程&#xff08;二&#xff09;&#xff1a;基础知识和解封装&#xff08;demux&#xff09;基于 FFmpeg 的跨平台视频…
阅读更多...
面试其他注意事项

面试其他注意事项

面试其他注意事项 一、面试反问 这个岗位的日常工作和主要职责是什么&#xff1f;咱们这边主要负责什么业务&#xff0c;用到了哪些技术呢&#xff1f;对于我们校招生有没有培养体系呢&#xff1f;脱产培训&#xff0c;还是边工作边熟悉&#xff1f;会有导师带嘛&#xff1f;…
阅读更多...
ARMv8平台上安装QT开发环境

ARMv8平台上安装QT开发环境

安装Qt Creator sudo -iapt-get update apt-get upgrade apt list --installed | grep -v oldstable | cut -d/ -f1 | xargs apt-mark unholdapt-get install gcc g clang make-guile build-essential qtbase5-dev qtchooser qt5-qmake qtbase5-dev-tools qtcreator qt5* 配置…
阅读更多...
最新文章

Copyright @ 2022~2023