Typescript面试题

# 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优势

  1. 类型化思维方式,使开发更严谨,提前发现错误,减少改Bug时间

  2. 类型系统提高了代码可读性,维护和重构代码更加容易

  3. 补充了接口、枚举等开发大型应用时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 实现

14、谈谈你对泛型的认识

ts中的泛型就跟any差不多,不过与any不同的是,any会丢失类型而泛型不会。

当应一个函数中传入一个 num 10 但是最后返回回来的参数可能是 string ,这样对于参数类型就会丢失。

你可能感兴趣的:(面试题,typescript,前端)