Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >30个小知识让你更清楚TypeScript

30个小知识让你更清楚TypeScript

作者头像
桃翁
发布于 2021-09-10 06:32:19
发布于 2021-09-10 06:32:19
5.1K00
代码可运行
举报
文章被收录于专栏:前端桃园前端桃园
运行总次数:0
代码可运行

点击上方 前端桃园,回复“加群”

加入我们一起学习,天天进步

TypeScript 是 Microsoft 开发的JavaScript 的开源超集,用于在不破坏现有程序的情况下添加附加功能。

由于其独特的优势,例如,静态类型和许多速记符号,TypeScript 现在被前端和全栈开发人员广泛用于大型项目。

今天,我们将通过30个 TypeScript 面试问题和答案来帮助你准备TypeScript知识 的面试。

1、 TypeScript 的主要特点是什么?

  • 跨平台:TypeScript 编译器可以安装在任何操作系统上,包括 Windows、macOS 和 Linux
  • ES6 特性:TypeScript 包含计划中的 ECMAScript 2015 (ES6) 的大部分特性,例如箭头函数。
  • 面向对象的语言:TypeScript 提供所有标准的 OOP 功能,如类、接口和模块。
  • 静态类型检查:TypeScript 使用静态类型并帮助在编译时进行类型检查。因此,你可以在编写代码时发现编译时错误,而无需运行脚本。
  • 可选的静态类型:如果你习惯了 JavaScript 的动态类型,TypeScript 还允许可选的静态类型。
  • DOM 操作:您可以使用 TypeScript 来操作 DOM 以添加或删除客户端网页元素。

2、使用 TypeScript 有什么好处?

  • TypeScript 更具表现力,这意味着它的语法混乱更少。
  • 由于高级调试器专注于在编译时之前捕获逻辑错误,因此调试很容易。
  • 静态类型使 TypeScript 比 JavaScript 的动态类型更易于阅读和结构化。
  • 由于通用的转译,它可以跨平台使用,在客户端和服务器端项目中。

3、TypeScript 的内置数据类型有哪些?

数字类型:用于表示数字类型的值。TypeScript 中的所有数字都存储为浮点值。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let identifier: number = value;

布尔类型:一个逻辑二进制开关,包含true或false

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let identifier: string = " ";

Null 类型:Null 表示值未定义的变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let identifier: bool = Boolean value;

未定义类型:一个未定义的字面量,它是所有变量的起点。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let num: number = null;

void 类型:分配给没有返回值的方法的类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let unusable: void = undefined;

4、TypeScript 目前的稳定版本是什么?

当前的稳定版本是 4.2.3。

5、TypeScript 中的接口是什么?

接口为使用该接口的对象定义契约或结构。

接口是用关键字定义的interface,它可以包含使用函数或箭头函数的属性和方法声明。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface IEmployee {
    empCode: number;
    empName: string;
    getSalary: (number) => number; // arrow function
    getManagerName(number): string; 
}

6、TypeScript 中的模块是什么?

TypeScript 中的模块是相关变量、函数、类和接口的集合。

你可以将模块视为包含执行任务所需的一切的容器。可以导入模块以轻松地在项目之间共享代码。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module module_name{
class xyz{
export sum(x, y){
return x+y;
}
}

7、后端如何使用TypeScript?

你可以将 Node.js 与 TypeScript 结合使用,将 TypeScript 的优势带入后端工作。

只需输入以下命令,即可将 TypeScript 编译器安装到你的 Node.js 中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm i -g typescript

8、TypeScript 中的类型断言是什么?

TypeScript 中的类型断言的工作方式类似于其他语言中的类型转换,但没有 C# 和 Java 等语言中可能的类型检查或数据重组。类型断言对运行时没有影响,仅由编译器使用。

类型断言本质上是类型转换的软版本,它建议编译器将变量视为某种类型,但如果它处于不同的形式,则不会强制它进入该模型。

9、如何在 TypeScript 中创建变量?

你可以通过三种方式创建变量:var,let,和const。 var是严格范围变量的旧风格。你应该尽可能避免使用,var因为它会在较大的项目中导致问题。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var num:number = 1;

let是在 TypeScript 中声明变量的默认方式。与var相比,let减少了编译时错误的数量并提高了代码的可读性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let num:number = 1;

const创建一个其值不能改变的常量变量。它使用相同的范围规则,let并有助于降低整体程序的复杂性。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const num:number = 100;

10、在TypeScript中如何从子类调用基类构造函数?

你可以使用该super()函数来调用基类的构造函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Animal {
  name: string;
  constructor(theName: string) {
    this.name = theName;
  }
  move(distanceInMeters: number = 0) {
    console.log(`${this.name} moved ${distanceInMeters}m.`);
  }
}
class Snake extends Animal {
  constructor(name: string) {
    super(name);
  }
  move(distanceInMeters = 5) {
    console.log("Slithering...");
    super.move(distanceInMeters);
  }
}

11、解释如何使用 TypeScript mixin。

Mixin 本质上是在相反方向上工作的继承。Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。

相反,类A继承类B来获得它的功能,类B从类A需要返回一个新类的附加功能。

12、TypeScript 中如何检查 null 和 undefined?

你可以使用 juggle-check,它检查 null 和 undefined,或者使用 strict-check,它返回true设置为null的值,并且不会评估true未定义的变量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//juggle
if (x == null) {  
}

var a: number;  
var b: number = null;  
function check(x, name) {  
    if (x == null) {  
        console.log(name + ' == null');  
    }  
    if (x === null) {  
        console.log(name + ' === null');  
    }  
    if (typeof x === 'undefined') {  
        console.log(name + ' is undefined');  
    }  
}  
check(a, 'a');  
check(b, 'b');

13、TypeScript 中的 getter/setter 是什么?你如何使用它们?

Getter 和 setter 是特殊类型的方法,可帮助你根据程序的需要委派对私有变量的不同级别的访问。

Getters 允许你引用一个值但不能编辑它。Setter 允许你更改变量的值,但不能查看其当前值。这些对于实现封装是必不可少的。

例如,新雇主可能能够了解get公司的员工人数,但无权set了解员工人数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const fullNameMaxLength = 10;
class Employee {
  private _fullName: string = "";
  get fullName(): string {
    return this._fullName;
  }
  set fullName(newName: string) {
    if (newName && newName.length > fullNameMaxLength) {
      throw new Error("fullName has a max length of " + fullNameMaxLength);
    }
    this._fullName = newName;
  }
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
  console.log(employee.fullName);
}

14、 如何允许模块外定义的类可以访问?

你可以使用export关键字打开模块以供在模块外使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module Admin {
  // use the export keyword in TypeScript to access the class outside
  export class Employee {
    constructor(name: string, email: string) { }
  }
  let alex = new Employee('alex', 'alex@gmail.com');
}
// The Admin variable will allow you to access the Employee class outside the module with the help of the export keyword in TypeScript
let nick = new Admin.Employee('nick', 'nick@yahoo.com');

15、如何使用 Typescript 将字符串转换为数字?

与 JavaScript 类似,你可以使用parseInt或parseFloat函数分别将字符串转换为整数或浮点数。你还可以使用一元运算符+将字符串转换为最合适的数字类型,“3”成为整数,3而“3.14”成为浮点数3.14。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var x = "32";
var y: number = +x;

16、什么是 .map 文件,为什么/如何使用它?

甲.map文件是源地图,显示原始打字稿代码是如何解释成可用的JavaScript代码。它们有助于简化调试,因为你可以捕获任何奇怪的编译器行为。

调试工具还可以使用这些文件来允许你编辑底层的 TypeScript 而不是发出的 JavaScript 文件。

17、TypeScript 中的类是什么?你如何定义它们?

类表示一组相关对象的共享行为和属性。

例如,我们的类可能是Student,其所有对象都具有该attendClass方法。另一方面,John是一个单独的 type 实例,Student可能有额外的独特行为,比如attendExtracurricular.

你使用关键字声明类class:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class Student {    
    studCode: number;    
    studName: string;    
    constructor(code: number, name: string) {    
            this.studName = name;    
            this.studCode = code;    
    }

18、TypeScript 与 JavaScript 有什么关系?

TypeScript 是 JavaScript 的开源语法超集,可编译为 JavaScript。所有原始 JavaScript 库和语法仍然有效,但 TypeScript 增加了 JavaScript 中没有的额外语法选项和编译器功能。

TypeScript 还可以与大多数与 JavaScript 相同的技术接口,例如 Angular 和 jQuery

19、TypeScript 中的 JSX 是什么?

JSX 是一种可嵌入的类似于 XML 的语法,允许你创建 HTML。TypeScript 支持嵌入、类型检查和将 JSX 直接编译为 JavaScript。

20、TypeScript 支持哪些 JSX 模式?

TypeScript有内置的支持preserve,react和react-native。

  • preserve 保持 JSX 完整以用于后续转换。
  • react不经过 JSX 转换,而是react.createElement作为.js文件扩展名发出和输出。
  • react-native结合起来preserve,react因为它维护所有 JSX 和输出作为.js扩展。

21、如何编译 TypeScript 文件?

你需要调用 TypeScript 编译器tsc来编译文件。你需要安装 TypeScript 编译器,你可以使用npm.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install -g typescript
tsc <TypeScript File Name>

22、 TypeScript 中有哪些范围可用?这与JS相比如何?

  • 全局作用域:在任何类之外定义,可以在程序中的任何地方使用。
  • 函数/类范围:在函数或类中定义的变量可以在该范围内的任何地方使用。
  • 局部作用域/代码块:在局部作用域中定义的变量可以在该块中的任何地方使用。

23、TypeScript 中的箭头/lambda 函数是什么?

胖箭头函数是用于定义匿名函数的函数表达式的速记语法。它类似于其他语言中的 lambda 函数。箭头函数可让你跳过function关键字并编写更简洁的代码。

24、解释rest参数和声明rest参数的规则。

其余参数允许你将不同数量的参数(零个或多个)传递给函数。当你不确定函数将接收多少参数时,这很有用。其余符号之后的所有参数...都将存储在一个数组中。 例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function Greet(greeting: string, ...names: string[]) {
    return greeting + " " + names.join(", ") + "!";
}
Greet("Hello", "Steve", "Bill"); // returns "Hello Steve, Bill!"
Greet("Hello");// returns "Hello !"

rest 参数必须是参数定义的最后一个,并且每个函数只能有一个 rest 参数。

25、什么是三斜线指令?有哪些三斜杠指令?

三斜线指令是单行注释,包含用作编译器指令的 XML 标记。每个指令都表示在编译过程中要加载的内容。三斜杠指令仅在其文件的顶部工作,并且将被视为文件中其他任何地方的普通注释。

  • /// <reference path="..." /> 是最常见的指令,定义文件之间的依赖关系。
  • /// <reference types="..." />类似于path但定义了包的依赖项。
  • /// <reference lib="..." />允许您显式包含内置lib文件。

26、Omit类型有什么作用?

Omit是实用程序类型的一种形式,它促进了常见的类型转换。Omit允许你通过传递电流Type并选择Keys在新类型中省略来构造类型。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Omit<Type, Keys>

例如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
interface Todo {
  title: string;
  description: string;
  completed: boolean;
  createdAt: number;
}
type TodoPreview = Omit<Todo, "description">;

27、TypeScript中如何实现函数重载?

要在 TypeScript 中重载函数,只需创建两个名称相同但参数/返回类型不同的函数。两个函数必须接受相同数量的参数。这是 TypeScript 中多态性的重要组成部分。

例如,你可以创建一个add函数,如果它们是数字,则将两个参数相加,如果它们是字符串,则将它们连接起来。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function add(a:string, b:string):string;
function add(a:number, b:number): number;
function add(a: any, b:any): any {
    return a + b;
}
add("Hello ", "Steve"); // returns "Hello Steve" 
add(10, 20); // returns 30

28、如何让接口的所有属性都可选?

你可以使用partial映射类型轻松地将所有属性设为可选。

29、什么时候应该使用关键字unknown?

unknown,如果你不知道预先期望哪种类型,但想稍后分配它,则应该使用该any关键字,并且该关键字将不起作用。

30、什么是装饰器,它们可以应用于什么?

装饰器是一种特殊的声明,它允许你通过使用@<name>注释标记来一次性修改类或类成员。每个装饰器都必须引用一个将在运行时评估的函数。

例如,装饰器@sealed将对应于sealed函数。任何标有 的@sealed都将用于评估sealed函数。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
function sealed(target) {
  // do something with 'target' ...
}

它们可以附加到:

  • 类声明
  • 方法
  • 配件
  • 特性
  • 参数

注意:默认情况下不启用装饰器。要启用它们,你必须experimentalDecorators从tsconfig.json文件或命令行编辑编译器选项中的字段。

英文 | https://betterprogramming.pub/top-50-typescript-interview-questions-explained-5e69b73eeab1翻译 | web前端开发

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端桃园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
TypeScript 简介及编码规范
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
阿宝哥
2019/11/05
10.8K0
了不起的 TypeScript 入门教程
想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图:
阿宝哥
2020/06/10
7.3K0
TypeScript手记(四)
对于传统的 JavaScript 程序我们会使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手,因为他们用的是基于类的继承并且对象是由类构建出来的。从 ECMAScript 2015,也就是 ES6 开始, JavaScript 程序员将能够使用基于类的面向对象的方式。使用 TypeScript,我们允许开发者现在就使用这些特性,并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行,而不需要等到下个 JavaScript 版本。
用户7572539
2020/08/26
5590
初探 TypeScript函数基本类型泛型接口类内置对象
前段时间有朋友和我推荐 TypeScript ,他说写起来特别爽,让我去试一试,那时候我还在那是啥高深莫测的东西。刚好那段时间忙,一直没有时间看。最近也很忙,还是抽时间来探一探 TypeScript ;简单说 ts 主要提供的是 dynamic type check,提供的 interface 接口这个功能在开发项目的时候会很有帮助。TypeScript是 JavaScript 的一个超集。他和 JavaScript 有着千丝万缕的关系。
sunseekers
2018/10/31
7.6K0
你了解 Typescript 吗
被删
2017/09/26
5.8K2
编写高质量可维护的代码:Awesome TypeScript
? 这是第 84 篇不掺水的原创,想要了解更多,请戳上方蓝色字体:政采云前端团队 关注我们吧~ 本文首发于政采云前端团队博客:编写高质量可维护的代码:Awesome TypeScript https
政采云前端团队
2021/01/14
2.6K0
类_TypeScript笔记4
TypeScript里的类的定义与ES6 Class规范一致,静态属性,实例属性,访问器等都支持:
ayqy贾杰
2019/06/12
7910
TypeScript: 请停止使用 any
当我们开发 TypeScript 代码时,很可能会遇到 any 关键字。我们看到的大多数用法都表明我们正在处理 TypeScript 中的基本类型。在文档中我们可能会找到:
ConardLi
2020/10/30
1.2K0
TypeScript: 请停止使用 any
TypeScript
接口(interface)可以用于对【对象的形状(Shape)】进行描述,当然也可以使用interface 描述 class
九旬
2020/10/23
2K0
TypeScript
Typescript真香秘笈
本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 1. 前言 2018年Stack Overflow Developer的调研(https://insights.stackoverflow.com/survey/2018/)显示,TypeScript已经成为比JavaScript更受开发者喜爱的编程语言了。 之前我其实对于typescript没有太多好感,主要是认为其学习成本比较高,写起代码来还要多写很多类型声明,并且会受到静态类型检查
用户1097444
2022/06/29
5.9K0
Typescript真香秘笈
TypeScript 常用知识总结
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准。
EchoROne
2022/08/15
1.9K0
分享 30 道 TypeScript 相关面的面试题
在当今的 Web 开发世界中,TypeScript 作为一种强大的工具为自己赢得了一席之地,它弥补了 JavaScript 的灵活性和静态类型语言的鲁棒性之间的差距(至少在 JavaScript 实现自己的类型之前)。
前端达人
2023/09/25
2.3K0
分享 30 道 TypeScript 相关面的面试题
深入浅出TypeScript | 青训营笔记
TS(TypeScript)是一种由Microsoft开发和维护的编程语言,它是JavaScript的超集,支持静态类型检查、类、接口、泛型等特性。TS最终会被编译为标准的JavaScript代码,因此可以运行在任何支持JavaScript的环境中。
心安事随
2024/07/29
2500
深入浅出TypeScript | 青训营笔记
TypeScript小笔记
比如各种框架的常用类型,ts中内置的常用类型,以及一些容易被忽略和遗忘的点,陆陆续续顺手把他们写到文章中记录起来。
19组清风
2021/11/15
1.1K0
TypeScript小笔记
深入浅出 TypeScript
本文是阅读小册 「《深入浅出 TypeScript》」 的阅读笔记,对TypeScript感兴趣的同学请继续阅读吧。
chuckQu
2022/08/19
3K0
TypeScript基础知识
TypeScript是JavaScript的一个超集,支持ECMAScript6标准。
岳泽以
2022/11/22
2.4K0
TypeScript基础知识
JSX_TypeScript笔记17
TypeScript 也支持JSX,除了能够像Babel一样把 JSX 编译成 JavaScript 外,还提供了类型检查
ayqy贾杰
2019/06/12
2.5K0
JSX_TypeScript笔记17
【HormonyOS4+NEXT】TypeScript基础语法详解
TypeScript是一种由微软开发的开源编程语言,它是JavaScript的一个超集,添加了静态类型、类、接口和泛型等特性。这些特性使得TypeScript在大型项目中具有更好的可维护性和可扩展性。本文将对TypeScript的基础语法进行详细讲解,帮助读者快速入门。
颜颜yan_
2024/04/20
2230
前端应该掌握的Typescript基础知识
js 是一门动态弱类型语言, 我门可以随意的给变量赋不同类型的值 ts 是拥有类型检查系统的 javascript 超集, 提供了对 es6 的支持, 可以编译成纯 javascript,运行在任何浏览器上。 TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
前端老鸟
2022/03/07
6950
【译】2019年开始使用Typescript
基于2018年Stack Overflow Developer的调研,TypeScript作为编程语言比JavaScript更受“喜爱”。TypeScript在js开发者中这么受喜爱的原因是:在你运行代码前,添加到javascript中的类型有助你发现错误(代码)。TypeScript编译器提供的错误可以很好的引导你如何修复代码错误。往javascript中添加类型同时有助代码编辑器提供一些高级的功能,例如代码完成,项目范围的重构和自动模块的导入。
Jimmy_is_jimmy
2019/07/31
2.3K0
相关推荐
TypeScript 简介及编码规范
更多 >
交个朋友
加入腾讯云技术交流站
洞悉AI新动向 Get大咖技术交流群
加入HAI高性能应用服务器交流群
探索HAI应用新境界 共享实践心得
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验