背上小书包准备面试之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 开发提供了更强大的类型系统和工具支持,以帮助开发者编写更健壮和可扩展的应用程序。

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

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

相关文章

轻薄的ESL电子标签有哪些特性?

在智慧物联逐渐走进千万家的当下&#xff0c;技术变革更加日新月异。ESL电子标签作为科技物联的重要组成部分&#xff0c;是推动千行百业数字化转型的重要技术&#xff0c;促进物联网产业的蓬勃发展。在智慧零售、智慧办公、智慧仓储等领域&#xff0c;ESL电子标签在未来是不可…

win11右下角图标(网络,音量,电量)点击无反应问题,两分钟解决!

win11系统用的好好的&#xff0c;突然有一天任务栏右下角的常用三件套&#xff08;网络&#xff0c;音量&#xff0c;电量&#xff09;左键单击没反应&#xff0c;无法方便的调节音量和连接wifi&#xff0c;如下图所示&#xff0c;但是右键好用&#xff0c;不过不方便。网上查了…

嵌入式 C 语言程序数据基本存储结构

一、5大内存分区 内存分成5个区&#xff0c;它们分别是堆、栈、自由存储区、全局/静态存储区和常量存储区。 1、栈区(stack)&#xff1a;FIFO就是那些由编译器在需要的时候分配&#xff0c;在不需要的时候自动清除的变量的存储区。里面的变量通常是局部变量、函数参数等。 ​…

【Windows API】获取卷标、卷名

1、卷->卷标 使用FindFirstVolume()和FindNextVolume()函数体系&#xff0c;枚举系统所有卷&#xff08;Volume&#xff09;的例子&#xff0c;然后获取卷标、卷类型。这个方式可以枚举出没有驱动器号&#xff08;卷标&#xff09;的卷。 int TestMode1() {HANDLE hVolume…

Failed to connect to bitbucket.org port 443

浏览器可以访问bitbucket&#xff0c;但是在终端或者sourcetree上死活无法进行pull, push等操作。 Root Cause&#xff1a;“【翻】【墙】软件”使用了http proxy&#xff0c;所以也得为git设置相同的http proxy。 所以&#xff0c;解决方法是&#xff1a; 1&#xff0c;查看“…

网络系统架构演变

1.系统架构演变 随着互联网的发展&#xff0c;网站应用的规模不断扩大。需求的激增&#xff0c;带来的是技术上的压力。系统架构也因此不断的演进、升级、迭代。从单一应用&#xff0c;到垂直拆分&#xff0c;到分布式服务&#xff0c;到SOA&#xff0c;以及现在火热的微服务架…

【Django】无法从“django.utils.encoding”导入名称“force_text”

整晚处理 Django 的导入错误。 我将把它作为提醒&#xff0c;希望处于相同情况的人数会减少。 原因 某些软件包版本不支持Django 4 请看下表并决定Django和Python的版本 方案 如果出现难以响应&#xff0c;或者更改环境麻烦&#xff0c;请尝试以下操作 例如出现以下错误 …

云计算的发展前景怎么样

云计算是当前科技领域中最受关注的领域之一,它的出现改变了传统的计算模式,使得企业和个人能够更加便捷地访问和使用计算资源。随着云计算技术的不断发展,它的前景也变得更加光明。 以下是云计算的发展前景: 云计算的市场份额将继续增长:根据市场研究机构的报告,云计算的市场份…

vfuhyuuy

Sublime Text is an awesome text editor. If you’ve never heard of it, you shouldcheck it out right now. I’ve made this tutorial because there’s no installer for the Linux versions of Sublime Text. While that’s not a real problem, I feel there is a clean…

通过版本号控制强制刷新浏览器或清空浏览器缓存

背景介绍 在我们做 web 项目时&#xff0c;经常会遇到一个问题就是&#xff0c;需要 通知业务人员&#xff08;系统用户&#xff09;刷新浏览器或者清空浏览器 cookie 缓存的情况。 而对于用户而言&#xff0c;很多人一方面不懂如何操作&#xff0c;另一方面由于执行力问题&am…

Android descendantFocusability 属性

view 焦点问题处理 作用 通过该属性可以指定viewGroup和其子View到底谁获取焦点&#xff0c; 直接在viewGroup上使用就行。 属性值 属性值含义beforeDescendantsviewgroup会优先其子类控件而获取到焦点afterDescendantsviewgroup只有当其子类控件不需要获取焦点时才获取焦点…

MFC创建和使用OCX控件

文章目录 MFC建立OCX控件注册OCX控件与反注册使用Internet Explorer测试ocx控件OCX控件添加方法OCX控件添加事件Web使用OCX控件MFC使用OCX控件使用OCX控件调用ocx的功能函数对ocx的事件响应OCX控件调试工具tstcon32.exe加载ocx控件使用tstcon32.exe调试ocxMFC建立OCX控件 新建…

【ChatGPT 指令大全】怎么使用ChatGPT来辅助知识学习

目录 概念解说 简易教学 深度教学 教学与测验 解释一个主题的背后原理 总结 在当今信息时代&#xff0c;互联网的快速发展为我们获取知识提供了前所未有的便利。而其中&#xff0c;人工智能技术的应用也为我们的学习和交流带来了新的可能性。作为一种基于自然语言处理的人…

ORA-01704: string literal too long

这是在做数据迁移的时候&#xff0c;将mysql库中的数据整理成Oracle脚本&#xff0c;接着在客户端运行sql脚本插入数据时碰到的问题。明显就是文本太长了导致的报错&#xff0c;但是实际上设置的字段是可以支持这么长的文本数据的。 解决方案 直接写程序导出导入数据&#xff0…

Postgresql 基础使用语法

1.数据类型 1.数字类型 类型 长度 说明 范围 与其他db比较 Smallint 2字节 小范围整数类型 32768到32767 integer 4字节 整数类型 2147483648到2147483647 bigint 8字节 大范围整数类型 -9233203685477808到9223203685477807 decimal 可变 用户指定 精度小…

rust学习-tokio::time

示例 use std::time::Duration; use tokio::{task, time::interval};#[tokio::main] async fn main() {let mut interval interval(Duration::from_secs(1));let handle task::spawn(async move {loop {interval.tick().await;println!("tick");}});handle.await.…

【大数据】一些基本概念

一、数据库、数据仓库、数据湖 1.什么是数据库 (Database, DB) 数据库是指长期储存在计算机中的有组织的, 可共享的数据集合 就是存储数据的仓库 数据库有三个特点: 永久存储, 有组织, 可共享 数据库是一种结构化数据存储技术&#xff0c;用于存储和管理有组织的数据。数据库…

微信小程序云开发快速入门(2/4)

前言 我们对《微信小程序云开发快速入门&#xff08;1/4&#xff09;》的知识进行回顾一下。在上章节我们知道了云开发的优势以及能力&#xff0c;并且我们还完成了码仔备忘录的本地版到网络版的改造&#xff0c;主要学习了云数据库同时还通过在小程序使用云API直接操作了云数…

SciencePub学术| 智能计量类重点SCIE征稿中

SciencePub学术 刊源推荐: 智能计量类重点SCIE征稿中&#xff01;信息如下&#xff0c;录满为止&#xff1a; 一、期刊概况&#xff1a; 智能计量类重点SCIE 【期刊简介】IF&#xff1a;2.0-2.5&#xff0c;JCR3区&#xff0c;中科院4区&#xff1b; 【版面类型】正刊&#…

new BigDecimal(double val)注意事项 / JWT解析BigDecimal类型数据

前言&#xff1a; 公司项目中有一个板块需要解析JWT令牌获取载荷里面封装的数据&#xff0c;遇到要解析一个BigDecimal类型的数据 问题发现过程&#xff1a; 正常来说&#xff0c;我们解析一个JWT令牌的步骤如下&#xff1a; public static Claims getDataFromToken(String tok…