Typescript面试题

最新推荐文章于 2024-04-30 08:45:20 发布

码农来喽

最新推荐文章于 2024-04-30 08:45:20 发布

阅读量1.1k

点赞数

分类专栏：面试题文章标签： typescript 前端

本文链接：https://blog.csdn.net/qq_48962360/article/details/127267884

版权

面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

# typescript

1、ts与js相比较有哪些优势？

概述： TS是JS的超集(TypeScript 是一种给 JavaScript 添加特性的语言扩展。)，JS有的Ts都有，Ts是微软开发的开源编程语言，遵循Es6、Es5规范，设计目标是开发大型应用，可以在任何浏览器、计算机、操作系统上运行。本质上向JS中添加了可选的静态类型和基于类的面向对象编程。

区别： JS变量是没有类型的，即age=18，age可以是任何类型的，可以继续给age赋值为age=”aaa” Ts有明确的类型(即：变量名:number(数值类型)) eg：let age: number = 18

TS优势

类型化思维方式，使开发更严谨，提前发现错误，减少改Bug时间
类型系统提高了代码可读性，维护和重构代码更加容易
补充了接口、枚举等开发大型应用时JS缺失的功能

JS的类型系统存在"先天缺陷"，绝大部分错误都是类型错误(Uncaught TypeError)

2、TypeScript 中的原始类型有哪些？

TypeScript的原始类型包括: boolean、number、string、void、undefined、null、symbol、bigint。

布尔类型：boolean
数字类型：number
字符串类型：string
空值：void
Null 和 Undefined：null 和 undefined
Symbol 类型：symbol
BigInt 大数整数类型：bigint

2.1、TypeScript 中的基本类型有哪些 ?

类型：

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi"	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:"孙悟空"}	任意的JS对象
array	[1, 2, 3]	任意JS数组
tuple（元组）	[4, 5]	元素，TS新增类型，固定长度数组
enum	enum(A, B)	枚举, TS中新增类型

3、说说数组在 TypeScript 中是如何工作的？

我们使用数组来存储相同类型的值，数组是有序和索引的值集合

索引从 0 开始，即第一个元素的索引为 0，第二个元素的索引为 1，依此类推

4、什么是 any 类型，何时使用？

any类型

可以赋值任意类型的数据
声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

当一个变量需要赋值的数据类型不确定时，就使用any类型，它可以赋值任意数据类型

5、什么是void，什么时候使用void类型？

void 用来表示空, 以函数为例, 就表示没有返回值的函数或返回值为undefind

void返回值是空(undefind)，但是不能将类型“null”分配给类型“void”。

因为没有返回值的函数总是返回 undefined，而 void 总是在 JavaScript 中返回 undefined，TypeScript 中的void 是一个正确的类型，告诉开发人员这个函数返回 undefined

6、TypeScript 中声明变量有哪些不同的关键字？

type 只能声明一次
interface 可以声明多次
enum
let const var

7、如何书写带有类型注释的函数？

函数是执行特定代码的代码块

函数可以有选择地接受一个或多个参数，处理它们，并有选择地返回一个值。

function greet(name: string): string {
    return `Hello,${name}`
}
let greeting = greet("string字符串")

8、如何在 TypeScript 中创建对象？

对象是类似字典的keys和values的集合，key 必须是唯一的。它们类似于数组，有时也称为关联数组

但是，数组使用数字来索引值，而对象允许使用任何其他类型作为键

let obj: {x: number; y: string} = {
    x: 10,
    y: "hello"
}

9、如何在 TypeScript 中指定可选属性？

通过添加 ？对象类型可以具有零个或多个可选属性，在属性名称之后

let obj: {x: number; y: string; z?: number} = {
    x: 10,
    y: "hello"
}
// z可以加可以不加

10、说说枚举在 TypeScript 中是如何工作的？

枚举允许我们创建命名常量，这是一种为数字常量值赋予更友好名称的简单方法

枚举由关键字 enum 定义，后跟其名称和成员

// 在js的标准中是没有枚举这一说的，但在typescript中是有这个类型的。枚举的意思是把所有相关的子数据，都收集起来。例如一个星期里的每一天：
// 枚举允许开发者定义一组命名的常量。使用枚举可以使其更容易记录意图，或创建一组不同的情况。TypeScript提供了基于数字和字符串的枚举。
// 数字枚举
enum Weekday {
  Monday,
  Tuseday,
  Wednesday=6, // 默认从0开始，但到这里，从6开始
  Thursday,
  Friday,
  Saturday,
  Sunday
}

// 然后直接通过Weekday.Monday就可以获取到对应的值，默认情况下，第一个枚举值是0，然后每个后续值依次递增 1。
// 数字枚举如果没有初始化，默认初始化值为0，每项+1
// 如果有初始化，则在初始化值的基础上，每项+1
// 如果某项被赋值（可以是负数或负数），那么之后的项在此基础上+1
// 如果未手动赋值的枚举项与手动赋值的重复了，如例4，TypeScript 是不会察觉到这一点的，但建议尽量避免

// 字符串枚举:声ming必须  
enum Direction {
  Up = "UP", 
  Down = "DOWN", 
  Left = "LEFT", 
  Right = "RIGHT",
}
// 很好地 "序列化"

11、说说TypeScript 中 for 循环的不同变体

TypeScript 提供了以下三种循环集合的方法

// for 循环
let values = [10,"foo",true];
for(let i = 0; i < values.length; i++){
    console.log(values[i])
}

// forEach函数
let values = [10,"foo",true];
values.forEach( val =>{
     console.log(val)
})

// for..of 声明
let values = [10,"foo",true];
for(let val of values) {
    console.log(val)
}

12、类型注解和类型别名有什么区别？

类型别名为现有类型提供替代名称。如果类型名称太长，您可以引入不同的较短的名称，并使用新的名称

类型别名不会引入新类型，它们相当于相应的底层类型

13、type（类型别名）和interface（接口）区别是什么？

接口基本使用

// 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
// 接口名可以重复（可以声明合并）
  interface yourType {
    name: string
    age: number
  }
  interface yourType {
    gender: string
  }
  const you: yourType = {
    name: 'yoyo',
    age: 333,
    gender: '女'   // 这里的属性要和接口中一致，不能少，不能多
  }

类型别名基本使用

  // 描述一个对象的类型
  // 类型别名：名称唯一，不能重复
  type myType = {
    name: string
    age: number
  }

  const obj: myType = {
    name: 'ccc',
    age: 33  // 这里的属性要和类型声明中一致，不能少，不能多
  }

区别：

命名规范
- type类型别名命名唯一，不可重复
- interface接口可以重复定义

type可以使用in 关键字生成映射类型 interface不行

type Keys = "firstname" | "surname"

type DudeType = {
  [key in Keys]: string
}

const test: DudeType = {
  firstname: "Pawel",
  surname: "Grzybek"
}

interface 与 type 可以相互扩展对方单语法不通 (extends关键字 &操作符)

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; } // 利用type扩展interface
const obj: Point = {
    x: 22,
    y: 33
}

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; }; // 利用interface扩展 type
const obj: Point = {
    x: 22,
    y: 33
}
console.log(obj) 
// 输出：
// { "x": 22, "y": 33 }

建议：公共的用 interface 实现，不能用 interface 实现的再用 type 实现