前端日记

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

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

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

面试官：说说你对 TypeScript 中函数的理解？与 JavaScript 函数的区别？ 一、是什么函数是 JavaScript 应用程序的基础，帮助我们实现抽象层、模拟类、信息隐藏和模块 在 TypeScript 里，虽然已经支持类、命名空间和模块，但函数仍然是主要定义行为的方式，TypeScript 为 JavaScript 函数添加了额外的功能，丰富了更多的应用场景 函数类型在 TypeScript 类型系统中扮演着非常重要的角色，它们是可组合系统的核心构建块 二、使用方式跟javascript 定义函数十分相似，可以通过funciton 关键字、箭头函数等形式去定义，例如下面一个简单的加法函数： 1const add = (a: number, b: number) => a + b 上述只定义了函数的两个参数类型，这个时候整个函数虽然没有被显式定义，但是实际上 TypeScript 编译器是能够通过类型推断到这个函数的类型，如下图所示： 当鼠标放置在第三行add函数名的时候，会出现完整的函数定义类型，通过: 的形式来定于参数类型，通过 => 连接参数和 ...

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

面试官：说说你对 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 ...

面试官：说说你对 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 与 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 ...

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