背上小书包准备面试之TypeScript篇

这篇具有很好参考价值的文章主要介绍了背上小书包准备面试之TypeScript篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

typescript是啥?与javascript的区别?

typescript数据类型?

typescript中枚举类型?应用场景?

typescript中接口的理解?应用场景?

typescript中泛型的理解?应用场景?

如何在react项目中应用typescript?


这TypeScript我真不知道面试会咋问。。。

哦以前还写过一篇基础⬇️

Typescript 基础易理解-------冲冲冲_ts和js有什么区别_慢谷的博客-CSDN博客

typescript是啥?与javascript的区别?

TypeScript是一个强类型的JavaScript超集,可编译为纯JavaScript。它是一种用于应用级JavaScript开发的语言。(c#、Java就是强类型语言)

区别:

1.TypeScript支持强类型js不支持

2.TypeScript 支持类和接口的概念,使面向对象编程更简单明确。类用于定义对象的结构和行为,接口则用于定义对象的合同(即对象应该具有的属性和方法)

3.高级特性:TypeScript 提供了一些 JavaScript 中缺少的高级特性,如元组(Tuple)、枚举(Enum)、泛型(Generics)等。这些特性有助于更好地描述数据结构和处理逻辑。

4.编译时类型检查:TypeScript 在编译阶段进行类型检查,捕获并报告类型错误。这减少了运行时错误,增加了代码质量和可维护性。

5.生态系统和工具支持:TypeScript 兼容 JavaScript 的生态系统,可以使用现有的 JavaScript 库和框架。此外,TypeScript 提供了强大的开发工具支持,如代码编辑器的智能感知、重构功能和错误检查。

尽管 TypeScript 是 JavaScript 的超集,但它仍然可以编译为普通的 JavaScript 代码,并且可以在任何支持 JavaScript 的运行环境中运行。TypeScript 主要用于开发大型项目,特别是需要更强类型约束和更好工具支持的场景。

我就背:ts是js的超集,在js的基础上提供了更多的类型和功能;ts 是一种带有静态类型检查的编程语言,它可以在开发过程中检测出类型错误。而 js是一种动态类型语言,它在运行时才进行类型检查;ts是编译性语言,需要编译成js才能在浏览器或其他 JavaScript 运行时环境中执行。而js是解释性语言不需要编译可直接在浏览器或者其他JavaScript 运行时环境中执行。

typescript数据类型?

基本类型

number: 表示数值,包括整数和浮点数。

string: 表示字符串。

boolean: 表示布尔值,即 true 或 false。

null 和 undefined: 分别表示 null 和 undefined。

symbol: 表示唯一的、不可变的值。

数组类型:

type[] 或 Array<type>: 表示由指定类型元素组成的数组。

元组类型:

[type1, type2, ...]: 表示固定长度和特定顺序的数组,每个位置上的元素可以具有不同的类型。

对象类型:

object: 表示非原始类型的值,例如对象、函数和数组等。

{} 或 Record<string, type>: 表示具有指定属性和对应类型的对象。

函数类型:

(arg1: type1, arg2: type2, ...) => returnType: 表示函数类型,包括参数的类型和返回值的类型。

类型推断:

如果没有显式指定变量的类型,TypeScript 可以根据赋予给变量的值来推断其类型。

高级类型:

union: 表示多个类型中的一个值。例如,type1 | type2 表示可以是 type1 或 type2。

intersection: 表示多个类型的交集。例如,type1 & type2 表示必须同时满足 type1 和 type2。

type: 用于创建自定义类型别名。

enum: 表示一组命名的常量值。

typescript中枚举类型?应用场景?

枚举类型(Enum)用于定义一组命名的常量值。枚举类型可以为每个常量分配一个名称,并使代码更具可读性和可维护性。

enum Color {

  Red,

  Green,

  Blue,

}

let myColor: Color = Color.Green;

console.log(myColor); // 输出 1

在上面的示例中,我们定义了一个名为 Color 的枚举类型,它包含三个常量值:Red、Green 和 Blue。这些常量默认从 0 开始自动编号。

应用场景:

表示一组相关的常量值:例如表示不同颜色、星期几、状态等。

限制变量取值范围:通过指定枚举类型,可以确保变量只能取枚举中定义的值,防止无效值的引入。

增加代码可读性:使用枚举类型可以使代码更清晰地表达意思,提供更好的代码可读性和可维护性。

替代魔法数值:将代码中的魔法数值(magic numbers)替换为有意义的枚举常量,增加代码的可维护性。

枚举类型在处理一组固定的常量值时非常有用,它们提供了一种更好的方式来组织和使用常量。通过使用枚举类型,可以减少错误、提高代码可读性,并使代码更具表现力。

typescript中接口的理解?应用场景?

在 TypeScript 中,接口(Interface)用于描述对象的结构和行为,定义了对象应该具有哪些属性和方法。通过接口,可以明确指定对象的形状,并在开发过程中进行类型检查,确保对象符合接口的要求。以下是接口的示例:

interface Person {

  name: string;

  age: number;

  sayHello(): void;

}

let person: Person = {

  name: "Alice",

  age: 30,

  sayHello() {

    console.log("Hello, I'm " + this.name);

  },

};

person.sayHello(); // 输出 "Hello, I'm Alice"

在上面的示例中,我们定义了一个名为 Person 的接口,它要求对象具有 name 和 age 属性,并且必须有一个名为 sayHello 的方法,没有返回值。

应用场景:

定义对象的形状:接口可用于定义对象的属性和方法,确保对象的结构符合预期。

类型检查和提示:通过使用接口,在编码阶段就能捕获潜在的类型错误,并提供代码编辑器的智能感知和自动补全功能。

对象解构和函数参数:可以使用接口来约束对象解构和函数参数,以增加代码的可读性和可靠性。

定义类的实现规范:接口也可以作为类的合同,规定类必须实现指定的属性和方法,促使类的一致性和可扩展性。

接口在 TypeScript 中是一个重要的概念,它提供了一种强大的方式来描述对象的结构和行为,并且能够帮助开发者更好地理解和使用代码。通过使用接口,可以编写更健壮、可读性更高的代码,并在团队合作中提供清晰的约定和规范。

typescript中的interface和type有什么区别?

1.type不能继承,interface能继承;

interface 可以通过关键字 extends 进行继承其他 interface,从而扩展和组合类型。

interface Animal {
  name: string;
}

interface Dog extends Animal {
  bark(): void;
}

上述代码中,Dog 接口继承了 Animal 接口,从而拥有了 name 属性,并在其基础上增加了一个 bark 方法。

与此不同,type 不支持直接的继承,无法扩展其他类型。但是可以使用联合类型(|)和交叉类型(&)进行类型组合:

type Animal = {
  name: string;
};

type Dog = Animal & {
  bark(): void;
};

 

2.type可创建类型别名;

type 可以用来创建类型别名(Type Alias),给一个类型取一个新的名称。这样可以提高代码的可读性和可维护性。例如:

type Person = {
  name: string;
  age: number;
};

Person 是一个类型别名,表示一个具有 nameage 属性的对象类型。

3.type可以声明任何类型,interface只能声明对象;

type 可以声明任何类型,包括原始类型、联合类型、交叉类型、函数类型等。例如:

type MyNumber = number | string;

type MyObject = {
  id: number;
  name: string;
};

type MyFunction = (x: number, y: number) => number;
相比之下,interface 主要用于声明对象类型。它只能描述对象的形状、属性和方法,不能直接声明其他类型。

4.同名type只能有一个,同名interface可以多个

如果存在多个同名的 interface,它们会自动合并成一个大的接口,从而扩展了原有的接口。例如:

interface Animal {
  name: string;
}

interface Animal {
  age: number;
}

const dog: Animal = {
  name: 'Dog',
  age: 5,
};

在这个例子中,两个 Animal 接口合并为一个,拥有 nameage 两个属性的接口。

相反,如果使用同名的 type 别名,后面的别名会覆盖前面的定义,无法进行合并。

总体来说,typeinterface 在某些方面有不同的特性和用途。根据具体的需求和场景,选择合适的方式来声明和组织类型定义。

typescript中泛型的理解?应用场景?

在 TypeScript 中,泛型(Generics)是一种在编程语言中用于创建可重用代码的工具。通过泛型,可以在定义函数、类或接口时使用类型参数,使其可以适用于多种不同类型的数据。

以下是一个简单的泛型函数示例:

function identity<T>(arg: T): T {

  return arg;

}

let result = identity<string>("Hello");

console.log(result); // 输出 "Hello"

在上面的示例中,我们定义了一个名为 identity 的泛型函数。使用 <T> 表示类型参数,并将其应用于函数参数和返回值的类型。这样,我们可以通过传入不同类型的参数来调用该函数,并且函数会返回相同类型的结果。

应用场景:

提高代码的复用性:通过使用泛型,可以编写更通用的函数、类或接口,以处理多种类型的数据,提高代码的复用性。

类型安全性:泛型能够提供类型检查和约束,避免意外的类型错误,并在编码阶段捕获潜在问题。

抽象数据结构:泛型在实现抽象数据结构(如栈、队列等)时非常有用,可以处理各种元素类型而无需重复编写代码。

函数式编程风格:泛型常用于函数式编程风格中,例如在数组的 map、filter 等函数中,可以使用泛型来处理不同类型的数据。

通过合理应用泛型,可以提高代码的灵活性、可读性和可维护性。它是 TypeScript 中强大且重要的特性之一,使得我们能够编写更加通用和类型安全的代码。

面试的时候我就背这句:泛型是指在定义函数、接口,类的时候没有提前指定具体的类型,而是在使用的时候再指定类型的一种特性。

如何在react项目中应用typescript?

要在 React 项目中应用 TypeScript,可以按照以下步骤进行设置:

1.创建 TypeScript React 项目:使用脚手架工具(如 Create React App)创建一个新的 TypeScript 项目。

npx create-react-app my-app --template typescript

2.将现有 React 项目转换为 TypeScript:如果已经有一个现有的 React 项目,并希望将其转换为 TypeScript,可以执行以下操作:

在项目根目录运行以下命令安装 TypeScript 和相关的类型定义文件:

npm install typescript @types/react @types/react-dom

3.配置 TypeScript 编译选项:可以创建 tsconfig.json 文件来配置 TypeScript 编译选项。可以使用默认配置,也可以根据项目需求进行自定义配置。

4.安装和使用 TypeScript 类型定义库:如果使用了第三方库或组件,可以通过安装相应的类型定义文件(通常以 @types/ 开头)来提供类型支持。

开始编写 TypeScript 代码:在 React 组件中使用 TypeScript 的优势之一是能够为组件的 props、state 和事件处理函数等添加明确的类型注解,以提供更好的类型检查和智能感知。

5.运行项目:使用适合的命令(如 npm start)来启动 TypeScript React 项目,并在开发过程中享受 TypeScript 的类型检查和错误提示。

通过将 TypeScript 引入到 React 项目中,能够增加代码的可靠性、可读性和可维护性。TypeScript 为 React 开发提供了更强大的类型系统和工具支持,以帮助开发者编写更健壮和可扩展的应用程序。文章来源地址https://www.toymoban.com/news/detail-647365.html

到了这里,关于背上小书包准备面试之TypeScript篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端经典面试题 | 吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解

    🖥️ 前端经典面试题 专栏:吊打面试官系列 之 说说你对TypeScript 和 JavaScript的理解 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答

    2024年01月17日
    浏览(26)
  • 《前端面试题》- TypeScript - TypeScript的优/缺点

    简述TypeScript的优/缺点 优点 增强了代码的可读性和可维护性 包容性,js可以直接改成ts,ts编译报错也可以生成js文件,兼容第三方库,即使不是ts编写的 社区活跃,完全支持es6 缺点 增加学习成本 增加开发成本,因为增加了类型定义 需要编译,类型检查会增加编译时长,语

    2024年04月23日
    浏览(16)
  • 【面试题】 TypeScript 前端面试题 由浅到深

    1、前端面试题库 ( 面试必备 )             推荐:★★★★★ 地址:web前端面试题库 1.Boolean,Number,String 声明:类型 = 类型对应变量 类型收敛——字面量类型 2.undefined,null 在 TypeScript 中,null 与 undefined 类型都是有具体意义的类型。所以在默认情况下会被视作其他类型的

    2024年02月03日
    浏览(21)
  • 面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,Jav

    2024年02月15日
    浏览(25)
  • 服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

    1. ASP.NET Core           ASP.NET Core 是一个跨平台、高性能及开源的框架,用于生成基于云且连接互联网的新式应用程式。 官方文档:ASP.NET documentation | Microsoft Learn  2.  ASP.NET Core SignalR         ASP.NET Core SignalR 是开源库,用于服务端与客户端建立实时通信,可以自动管理连接

    2024年02月06日
    浏览(22)
  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(32)
  • 2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新

    HTML篇 CSS篇 JS篇 Vue篇 TpeScript篇 React篇 微信小程序篇 前端面试题汇总大全(含答案超详细,HTML,JS,CSS汇总篇)-- 持续更新 1. 谈谈你对MVVM开发模式的理解? MVVM是一种简化用户界面的 实践驱动编程方式 。在当前主流的前后端分离的开发模式中,MVVM模式的优越性日益体现,相较

    2024年02月10日
    浏览(32)
  • TypeScript与JavaScript

    博主作品: 《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+MySQL+Vue等前后端分离项目,可以在左边的分类专栏找到更多项目。《Uniapp项目案例》有几个有uniapp教程,企业实战开发。《微服务实战》专栏是本人的实战经验总结,《Spring家族及微服务系列》专注Spring、SpringMV

    2024年02月05日
    浏览(23)
  • 单例模式——javascript和typescript

    确保某个方法或者类只有一个是咧。而且自行实例子并向整个系统提供这个实例。 某个方法或类只能一个; 必须自行创建这个实例 必须自行向整个系统提供这个实例。

    2024年02月05日
    浏览(27)
  • 一文了解JavaScript 与 TypeScript的区别

    TypeScript 和 JavaScript 是两种互补的技术,共同推动前端和后端开发。在本文中,我们将带您快速了解JavaScript 与 TypeScript的区别。   一、TypeScript 和 JavaScript 之间的区别 JavaScript 和 TypeScript 看起来非常相似,但有一个重要的区别。 JavaScript 和 TypeScript 之间的主要区别在于 JavaS

    2024年02月14日
    浏览(25)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包