面试官:说说你对 TypeScript 中枚举类型的理解?应用场景?
面试官:说说你对 TypeScript 中枚举类型的理解?应用场景?
一、是什么枚举是一个被命名的整型常数的集合,用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型
通俗来说,枚举就是一个对象的所有可能取值的集合
在日常生活中也很常见,例如表示星期的SUNDAY、MONDAY、TUESDAY、WEDNESDAY、THURSDAY、FRIDAY、SATURDAY就可以看成是一个枚举
枚举的说明与结构和联合相似,其形式为:
123456enum 枚举名{ 标识符①[=整型常数], 标识符②[=整型常数], ... 标识符N[=整型常数],}枚举变量;
二、使用枚举的使用是通过enum关键字进行定义,形式如下:
1enum xxx { ... }
声明关键字为枚举类型的方式如下:
12// 声明d为枚举类型Directionlet d: Direction;
类型可以分成:
数字枚举
字符串枚举
异构枚举
数字枚举当我们声明一个枚举类型是,虽然没有给它们赋值,但是它们的值其 ...
面试官:说说你对 TypeScript 中泛型的理解?应用场景?
面试官:说说你对 TypeScript 中泛型的理解?应用场景?
一、是什么泛型程序设计(generic programming)是程序设计语言的一种风格或范式
泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型,在实例化时作为参数指明这些类型在typescript中,定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性
假设我们用一个函数,它可接受一个 number 参数并返回一个 number 参数,如下写法:
123function returnItem (para: number): number { return para}
如果我们打算接受一个 string 类型,然后再返回 string类型,则如下写法:
123function returnItem (para: string): string { return para}
上述两种编写方式,存在一个最明显的问题在于,代码重复度比较高
虽然可以使用 any类型去替代,但这也并不是很好的方案,因为我们的目的是接收什 ...
面试官:说说你对 TypeScript 中接口的理解?应用场景?
面试官:说说你对 TypeScript 中接口的理解?应用场景?
一、是什么接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法
简单来讲,一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例的方法
typescript的核心功能之一就是对类型做检测,虽然这种检测方式是“鸭式辨型法”,而接口的作用就是为为这些类型命名和为你的代码或第三方代码定义一个约定
二、使用方式接口定义如下:
12interface interface_name {}
例如有一个函数,这个函数接受一个 User 对象,然后返回这个 User 对象的 name 属性:
1const getUserName = (user) => user.name
可以看到,参数需要有一个user的name属性,可以通过接口描述user参数的结构
123456interface User { name: string age: number}co ...
面试官:说说对 TypeScript 中命名空间与模块的理解?区别?
面试官:说说对 TypeScript 中命名空间与模块的理解?区别?
一、模块TypeScript 与 ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块
相反地,如果一个文件不带有顶级的import或者export声明,那么它的内容被视为全局可见的
例如我们在在一个 TypeScript 工程下建立一个文件 1.ts,声明一个变量a,如下:
1const a = 1
然后在另一个文件同样声明一个变量a,这时候会出现错误信息
提示重复声明a变量,但是所处的空间是全局的
如果需要解决这个问题,则通过import或者export引入模块系统即可,如下:
123const a = 10;export default a
在typescript中,export关键字可以导出变量或者类型,用法与es6模块一致,如下:
1234export const a = 1export type Person = { name: String}
通过import 引入模块,如下:
1import { a ...
面试官:说说你对 TypeScript 中高级类型的理解?有哪些?
面试官:说说你对 TypeScript 中高级类型的理解?有哪些?
一、是什么除了string、number、boolean 这种基础类型外,在 typescript 类型声明中还存在一些高级的类型应用
这些高级类型,是typescript为了保证语言的灵活性,所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景
二、有哪些常见的高级类型有如下:
交叉类型
联合类型
类型别名
类型索引
类型约束
映射类型
条件类型
交叉类型通过 & 将多个类型合并为一个类型,包含了所需的所有类型的特性,本质上是一种并的操作
语法如下:
1T & U
适用于对象合并场景,如下将声明一个函数,将两个对象合并成一个对象并返回:
123456789101112function extend<T , U>(first: T, second: U) : T & U { let result: <T & U> = {} for (let key in first) { resu ...
面试官:说说如何在 React 项目中应用 TypeScript?
面试官:说说如何在 React 项目中应用 TypeScript?
一、前言单独的使用 TypeScript 并不会导致学习成本很高,但是绝大部分前端开发者的项目都是依赖于框架的
例如与 Vue、React 这些框架结合使用的时候,会有一定的门槛
使用 TypeScript 编写 React 代码,除了需要 TypeScript 这个库之外,还需要安装 @types/react、@types/react-dom
123npm i @types/react -snpm i @types/react-dom -s
至于上述使用 @types 的库的原因在于,目前非常多的 JavaScript 库并没有提供自己关于 TypeScript 的声明文件
所以,ts 并不知道这些库的类型以及对应导出的内容,这里 @types 实际就是社区中的 DefinitelyTyped 库,定义了目前市面上绝大多数的 JavaScript 库的声明
所以下载相关的 JavaScript 对应的 @types 声明时,就能够使用使用该库对应的类型定义
二、使用方式在编写 React 项目的时候,最常见的使用的 ...
面试官:说说你对 TypeScript 的理解?与 JavaScript 的区别?
面试官:说说你对 TypeScript 的理解?与 JavaScript 的区别?
一、是什么TypeScript 是 JavaScript 的类型的超集,支持ES6语法,支持面向对象编程的概念,如类、接口、继承、泛型等
超集,不得不说另外一个概念,子集,怎么理解这两个呢,举个例子,如果一个集合 A 里面的的所有元素集合 B 里面都存在,那么我们可以理解集合 B 是集合 A 的超集,集合 A 为集合 B 的子集
其是一种静态类型检查的语言,提供了类型注解,在代码编译阶段就可以检查出数据类型的错误
同时扩展了 JavaScript 的语法,所以任何现有的 JavaScript 程序可以不加改变的在 TypeScript 下工作
为了保证兼容性,TypeScript 在编译阶段需要编译器编译成纯 JavaScript 来运行,是为大型应用之开发而设计的语言,如下:
ts 文件如下:
12const hello: string = "Hello World!";console.log(hello);
编译文件后:
12const hello = "Hel ...
面试官:说说如何在Vue项目中应用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 (由 vue-class-component 提供)
@Co ...
面试官:vue项目本地开发完成后部署到服务器后报404是什么原因呢?
面试官:vue项目本地开发完成后部署到服务器后报404是什么原因呢?
一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可
我们知道vue项目在构建后,是生成一系列的静态文件
常规布署我们只需要将这个目录上传至目标服务器即可
12// scp 上传 user为主机登录用户,host为主机外网ip, xx为web容器静态资源路径scp dist.zip user@host:/xx/xx/xx
让web容器跑起来,以nginx为例
12345678server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; }}
配置完成记得重启nginx
12345// 检查配置是否正确nginx -t // 平滑重启nginx -s reload
操作完后就可以在浏览器输入域名进行访问了
当然上面只是提到最简单也是最直接的一种布署方式
什么自动化,镜像, ...
面试官:Vue项目中有封装过axios吗?主要是封装哪方面的?
面试官:Vue项目中有封装过axios吗?主要是封装哪方面的?
一、axios是什么axios 是一个轻量的 HTTP客户端
基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御XSRF
基本使用安装
1234// 项目中安装npm install axios --S// cdn 引入<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
导入
1import axios from 'axios'
发 ...