标签: TypeScript

HZFEStudio | 2022-07-01 | TypeScript前端相关

基础:什么是 TypeScript 泛型

相关问题 TypeScript 泛型的作用是什么 回答关键点 工具 使用时指定类型 TypeScript 泛型是一种工具。它能让开发者不在定义时指定类型,而在使用时指定类型。 知识点深入 1\. 泛型类 类型参数在类名后面的尖括号中指定。泛型类可以具有泛型字段或方法。 js class HZFEMember<T, U { private id!: T; private name!: U; setMember(id: T, name: U): void { this.id = id; this.name = name; } show(): void { console.log( ID: ${this.id}, Name: ${this.name} ); } } const member1 = new HZFEMember<number, string (); member1.setMember(1, "QingZhen"); member1.show(); // ID: 1,

 285 |  1 |  0 TypeScript前端相关

HZFEStudio | 2022-07-01 | TypeScript前端相关

基础:TypeScript 中的 Interface 和 Type Alias

相关问题 Interface 和 Type Alias 的作用 Interface 和 Type Alias 的相同点 Interface 和 Type Alias 的区别 回答关键点 类型约束 扩展 类型合并 Interface 和 Type Alias(Type 别名,下文简称 Type)是 TypeScript 中两个非常重要且常用的概念。在程序设计中,Interface 和 Type 主要起到类型的限制和规范的作用,它们不关心实现细节,只规定和限制类或变量必须提供对应的属性和方法。 Interface 和 Type 核心的区别是 Type 不可在定义后重新添加内容,而 Interface 则总是可以扩展新内容。相比 Interface,Type 并没有实际创建一个新的类型,而是创建一个引用某个类型的名字。 知识点深入 总体来说,Interface 和 Type 两者非常相似,Interface 的特性大部分都可以使用 Type 实现,在大多数场景下都可以任意选择 Interface 或 Type 实现功能。根据这两...

 271 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说如何在Vue项目中应用TypeScript?

一、前言 与link类似 在 VUE 项目中应用 typescript ,我们需要引入一个库 vue-property-decorator , 其是基于 vue-class-component 库而来,这个库 vue 官方推出的一个支持使用 class 方式来开发 vue 单文件组件的库 主要的功能如下: methods 可以直接声明为类的成员方法 计算属性可以被声明为类的属性访问器 初始化的 data 可以被声明为类属性 data、render 以及所有的 Vue 生命周期钩子可以直接作为类的成员方法 所有其他属性,需要放在装饰器中 二、使用 vue-property-decorator 主要提供了多个装饰器和一个函数: @Prop @PropSync @Model @Watch @Provide @Inject @ProvideReactive @InjectReactive @Emit @Ref @Component (由 vue-class-component 提供) Mixins

 226 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 的理解?与 JavaScript 的区别?

一、是什么 TypeScript 是 JavaScript 的类型的超集,支持 ES6 语法,支持面向对象编程的概念,如类、接口、继承、泛型等 超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个例子,如果一个集合 A 里面的的所有元素集合 B 里面都存在,那么我们可以理解集合 B 是集合 A 的超集,集合 A 为集合 B 的子集 其是一种静态类型检查的语言,提供了类型注解,在代码编译阶段就可以检查出数据类型的错误 同时扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作 为了保证兼容性, TypeScript 在编译阶段需要编译器编译成纯 JavaScript 来运行,是为大型应用之开发而设计的语言,如下: ts 文件如下: ts const

 152 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说如何在 React 项目中应用 TypeScript?

一、前言 单独的使用 TypeScript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的 例如与 Vue 、 React 这些框架结合使用的时候,会有一定的门槛 使用 TypeScript 编写 React 代码,除了需要 TypeScript 这个库之外,还需要安装 @types/react 、 @types/react-dom bash npm i @types/react -s npm i @types/react-dom -s 至于上述使用 @types 的库的原因在于,目前非常多的 JavaScript 库并没有提供自己关于 TypeScript 的声明文件 所以, ts 并不知道这些库的类型以及对应导出的内容,这里 @types 实际就是社区中的 DefinitelyTyped 库,定义了目前市面上绝大多数的 JavaScript 库的声明 所以下载相关的 JavaScript 对应的 @types 声明时,就能够使用使用该库对应的类型定义 二、使用

 163 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说对 TypeScript 中命名空间与模块的理解?区别?

一、模块 TypeScript 与 ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的 import 或者 export 声明,那么它的内容被视为全局可见的 例如我们在在一个 TypeScript 工程下建立一个文件 1.ts ,声明一个变量 a ,如下: ts const a = 1 然后在另一个文件同样声明一个变量 a ,这时候会出现错误信息 提示重复声明 a 变量,但是所处的空间是全局的 如果需要解决这个问题,则通过 import 或者 export 引入模块系统即可,如下: ts const a = 10; export default a 在 typescript 中, export 关键字可以导出变量或

 140 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中接口的理解?应用场景?

一、是什么 接口 是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的 类 去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法 简单来讲,一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例的方法 typescript 的核心功能之一就是对类型做检测,虽然这种检测方式是“鸭式辨型法”,而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定 二、使用方式 接口定义如下: ts interface interface_name { } 例如有一个函数,这个函数接受一个 User 对象,然后返回这个 User 对象的 name 属性: ts const getUserName = (user) = user.name 可以看到,参数需要有一个 user 的 name 属性,可以通过接口描述 user 参数的结构 ts interface User { name: string age: number

 191 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中高级类型的理解?有哪些?

一、是什么 除了 string 、 number 、 boolean 这种基础类型外,在 typescript 类型声明中还存在一些高级的类型应用 这些高级类型,是 typescript 为了保证语言的灵活性,所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景 二、有哪些 常见的高级类型有如下: 交叉类型 联合类型 类型别名 类型索引 类型约束 映射类型 条件类型 交叉类型 通过 & 将多个类型合并为一个类型,包含了所需的所有类型的特性,本质上是一种并的操作 语法如下: ts T & U 适用于对象合并场景,如下将声明一个函数,将两个对象合并成一个对象并返回: ts function extend<T , U (first: T, second: U) : T & U { let result: <T & U = {} for (let key in first) { result[key] = first[key] } f

 183 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中泛型的理解?应用场景?

一、是什么 泛型程序设计(generic programming)是程序设计语言的一种风格或范式 泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型 在 typescript 中,定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性 假设我们用一个函数,它可接受一个 number 参数并返回一个 number 参数,如下写法: ts function returnItem (para: number): number { return para } 如果我们打算接受一个 string 类型,然后再返回 string 类型,则如下写法: ts function returnItem (para: string): string { return para } 上述两种编写方式,存在一个最明显的问题在于,代码重复度比较高 虽然可以使用 any 类型去替代,但这也并不是很好的方案,因为我们的目的是接收什么类型的参数返回什么类型的

 214 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中函数的理解?与 JavaScript 函数的区别?

一、是什么 函数是 JavaScript 应用程序的基础,帮助我们实现抽象层、模拟类、信息隐藏和模块 在 TypeScript 里,虽然已经支持类、命名空间和模块,但函数仍然是主要定义行为的方式, TypeScript 为 JavaScript 函数添加了额外的功能,丰富了更多的应用场景 函数类型在 TypeScript 类型系统中扮演着非常重要的角色,它们是可组合系统的核心构建块 二、使用方式 跟 javascript 定义函数十分相似,可以通过 funciton 关键字、箭头函数等形式去定义,例如下面一个简单的加法函数: ts const add = (a: number, b: number) = a + b 上述只定义了函数的两个参数类型,这个时候整个函数虽然没有被显式定义,但是实际上 TypeScript 编译器是能够通过类型推断到这个函数的类型,如下图所示: ![6e5bdae550df4c7fb25b7efee6add29d](https://static.developers.pub/6e5bdae

 162 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中枚举类型的理解?应用场景?

一、是什么 枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型 通俗来说,枚举就是一个对象的所有可能取值的集合 在日常生活中也很常见,例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举 枚举的说明与结构和联合相似,其形式为: txt enum 枚举名{ 标识符①[=整型常数], 标识符②[=整型常数], ... 标识符N[=整型常数], }枚举变量; 二、使用 枚举的使用是通过 enum 关键字进行定义,形式如下: ts enum xxx { ... } 声明关键字为枚举类型的方式如下: ts // 声明d为枚举类型Direction let d: Direction; 类型可以分成: 数字枚举 字符串枚举 异构枚举 数字枚举 当我们声明一个枚举类型是,虽然没有给它们赋值,但是它们的

 154 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 装饰器的理解?应用场景?

一、是什么 装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上 是一种在不改变原类和使用继承的情况下,动态地扩展对象功能 同样的,本质也不是什么高大上的结构,就是一个普通的函数, @expression 的形式其实是 Object.defineProperty 的语法糖 expression 求值后必须也是一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入 二、使用方式 由于 typescript 是一个实验性特性,若要使用,需要在 tsconfig.json 文件启动,如下: ts { "compilerOptions": { "target": "ES5", "experimentalDecorators": true } } typescript 装饰器的使用和 javascript 基本一致 类的装饰器可以装饰: 类 方法/属性 参数 访问器 类装饰 例如声明一个函数 addAge 去给 Clas

 202 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说 typescript 的数据类型有哪些?

一、是什么 typescript 和 javascript 几乎一样,拥有相同的数据类型,另外在 javascript 基础上提供了更加实用的类型供开发使用 在开发阶段,可以为明确的变量定义为某种类型,这样 typescript 就能在编译阶段进行类型检查,当类型不合符预期结果的时候则会出现错误提示 二、有哪些 typescript 的数据类型主要有如下: boolean(布尔类型) number(数字类型) string(字符串类型) array(数组类型) tuple(元组类型) enum(枚举类型) any(任意类型) null 和 undefined 类型 void 类型 never 类型 object 对象类型 boolean 布尔类型 tsx let flag:boolean = true; // flag = 123; // 错误 flag = false; //正确 number 数字类型,和 javascript 一样, typescrip

 258 |  0 |  0 TypeScript前端相关

动感超人, | 2022-06-27 | TypeScript前端相关

说说你对 TypeScript 中类的理解?应用场景?

一、是什么 类(Class)是面向对象程序设计(OOP,Object-Oriented Programming)实现信息封装的基础 类是一种用户定义的引用数据类型,也称类类型 传统的面向对象语言基本都是基于类的, JavaScript 基于原型的方式让开发者多了很多理解成本 在 ES6 之后, JavaScript 拥有了 class 关键字,虽然本质依然是构造函数,但是使用起来已经方便了许多 但是 JavaScript 的 class 依然有一些特性还没有加入,比如修饰符和抽象类 TypeScript 的 class 支持面向对象的所有特性,比如 类、接口等 二、使用方式 定义类的关键字为 class ,后面紧跟类名,类可以包含以下几个模块(类的数据成员): 字段 : 字段是类里面声明的变量。字段表示对象的有关数据。 构造函数 : 类实例化时调用,可以为类的对象分配内存。 方法 : 方法为对象要执行的操作 如下例子: ts class Car { // 字段

 424 |  0 |  0 TypeScript前端相关

黑夜尽头 | 2022-02-28 | JavaScriptTypeScript

一文读懂 TypeScript 泛型及应用( 7.8K字)

觉得 TypeScript 泛型有点难,想系统学习 TypeScript 泛型相关知识的小伙伴们看过来, 本文从八个方面入手,全方位带你一步步学习 TypeScript 中泛型 ,详细的内容大纲请看下图: 动静(图)结合 ,在泛型学习之路助你一臂之力,还在犹豫什么,赶紧开启 TypeScript 泛型的学习之旅吧! 想入门 TypeScript 的小伙伴看过来,阿宝哥特意为你们准备的 —— [1.2W字 | 了不起的 TypeScript 入门教程](https://juejin.cn/post/6844904182843965453 "https://juejin.cn/post/6844904182843965453")(1027+ 个👍)教程。 一、泛型是什么 软件工程中,我们不仅要创建一致的定义良好的 API,同时也要考虑可重用性。 组件不仅能够...

 788 |  1 |  0 JavaScriptTypeScript