首页 > web前端 > js教程 > TypeScript 面试问题

TypeScript 面试问题

Linda Hamilton
发布: 2025-01-05 13:44:40
原创
205 人浏览过

TypeScript Interview Questions

问题 - 什么是 TypeScript?

  • TypeScript 是 Javascript 的超集
  • 添加静态类型,从而提高代码质量并在运行前进行错误检查。
  • 它支持接口、枚举、泛型等功能。
  • 提供更好的错误检查、增强的工具和改进的代码可读性。

问题 - 什么是显式和隐式类型赋值?

  • 显式意味着写出类型。就像下面这样——
let firstName: string = "Rutvik";
登录后复制
登录后复制
登录后复制
  • 隐式意味着 TypeScript 将根据值猜测类型。以下类型将被视为数字
let age = 23;
登录后复制
登录后复制
登录后复制

问题 - TypeScript 中any、unknown 和never 之间的区别?

  • any 的类型用于分配任意类型的变量。
  • 即使重新分配其他类型也不会报错。
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
登录后复制
登录后复制
登录后复制
  • unknown类型比any类型更好,因为它要求我们在对值进行操作之前检查类型。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
登录后复制
登录后复制
登录后复制
  • 类型从不代表从未发生过的值。
  • 它通常用于未正确返回的函数的返回语句。
function throwError(message: string): never {
    throw new Error(message);
}
登录后复制
登录后复制
登录后复制

问题 - 如何给出数组的类型?

  • 对于输入数组,我们需要给出如下类型。在下面的示例中,数组只能包含字符串类型。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
登录后复制
登录后复制
登录后复制
  • 我们还可以使用 readonly 关键字,这可以防止数组被更改。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
登录后复制
登录后复制
登录后复制

问题 - 什么是数组中的类型推断?

  • 如果我们不给数组指定任何类型,它会自动推断类型。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
登录后复制
登录后复制
登录后复制

问题 - 什么是元组?

  • 它是一个具有预定义长度和类型的类型数组。
  • 它在给出不同类型的混合数组类型时非常有用。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
登录后复制
登录后复制
登录后复制

问题 - 什么是只读元组?

  • 如果我们不将元组设置为只读,我们可以向定义的元组添加更多项,并且 TypeScript 不会抛出任何错误。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
登录后复制
登录后复制
登录后复制
  • 现在,为了解决这个问题,我们在类型之前使用关键字 readonly。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
登录后复制
登录后复制
登录后复制

问题 - 如何给出对象的类型?

  • 我们可以通过创建另一个类似结构的对象并指定对象中的键和键的类型来给出对象的类型。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
登录后复制
登录后复制
登录后复制

问题 - 如何在对象中拥有可选属性?

  • 要提供可选属性或键,我们需要添加 ?在他们的钥匙之后。
let firstName: string = "Rutvik";
登录后复制
登录后复制
登录后复制

问题 - 解释一下 TypeScript 中的枚举?

  • 枚举是一种常量变量。您必须仅使用其中的值。
  • 默认情况下这些值是数字,从 0 开始并以 1 递增。
  • 它们可以是数字或基于字符串的
let age = 23;
登录后复制
登录后复制
登录后复制
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
登录后复制
登录后复制
登录后复制

问题 - 什么是类型别名?

  • 它们允许使用自定义名称定义类型,并且可用于所有基本类型(如字符串和数字)以及复杂类型(如对象和数组)。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
登录后复制
登录后复制
登录后复制

问题 - 什么是接口?

  • 接口类似于类型,但只能用于对象。
function throwError(message: string): never {
    throw new Error(message);
}
登录后复制
登录后复制
登录后复制

问题 - 如何扩展接口?

  • 接口可以使用extend关键字进行扩展。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
登录后复制
登录后复制
登录后复制

问题 - 什么是并集和交集类型?

联盟:-

  • 当属性可以是多个值(例如字符串或数字)时,使用联合类型。
  • 因此,它们也被称为 OR,并通过使用 | 来使用。象征。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
登录后复制
登录后复制
登录后复制

交叉口:-

  • 将多种类型合并为一个时使用交叉类型。
  • 因此,它们也称为 AND,并通过使用 & 符号来使用。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
登录后复制
登录后复制
登录后复制

问题 - Typescript 中的函数是什么?

如何在函数中给出返回类型?

  • 我们可以在函数名后面加上 : 符号来给出函数的返回类型。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
登录后复制
登录后复制
登录后复制

如何在函数中指定参数类型?

  • 我们可以通过在每个参数后面用 : 符号提及参数来给出参数的类型。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
登录后复制
登录后复制
登录后复制

如何在函数中给出可选参数、默认参数和剩余参数?

  • 使用默认参数,我们可以将参数标记为可选。像这样,其中 c 是可选的并用 ? 表示。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
登录后复制
登录后复制
登录后复制
  • 默认值(ES6 功能)位于类型之后。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
登录后复制
登录后复制
登录后复制
  • 其余参数(ES6 功能)被赋予数组类型,因为它们转换数组中传递的项目。
interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};
登录后复制
登录后复制

问题 - TypeScript 中的转换是什么?

  • 强制转换是覆盖变量类型的过程。
  • 就像下面的示例一样,类型未知,但在与 as 关键字一起使用时将其设置为字符串。
enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
登录后复制
登录后复制
  • 我们还可以使用<>代替 as。两者的意思是一样的。
let firstName: string = "Rutvik";
登录后复制
登录后复制
登录后复制

问题 - TypeScript 中的泛型是什么?

  • Typeascript 中的泛型允许您创建可以处理多种数据类型的可重用组件或函数。
let age = 23;
登录后复制
登录后复制
登录后复制

问题 - Typescript 中的实用程序类型?

  • TypeScript 提供实用类型来简化常见类型转换。
  • 这些类型使对象和接口类型的操作和交互变得更加容易。
  • 以下是一些常用实用程序类型的细分:

1. 部分

  • 使 T 类型的所有属性可选。
  • 用例:当您想要创建一个只需要某些属性的对象时。
let x: any = 10;
x = 'hello'; // No TypeScript error
console.log(x.toUpperCase()); // No TypeScript error
登录后复制
登录后复制
登录后复制

2. 必填

  • 使 T 类型的所有属性成为必需。
  • 用例:当您想要强制所有属性必须存在时。
let y: unknown = 10;
// Type assertion needed before using y as number
if (typeof y === 'number') {
    console.log(y.toFixed(2));
}
登录后复制
登录后复制
登录后复制

3.只读

  • 使 T 类型的所有属性只读。
  • 用例:确保对象的属性无法被修改。
function throwError(message: string): never {
    throw new Error(message);
}
登录后复制
登录后复制
登录后复制

4. 选择

  • 通过从类型 T 中选取一组属性 K 创建类型。
  • 用例:当您只需要类型的特定属性时。
const names: string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // no error
登录后复制
登录后复制
登录后复制

5. 省略

  • 通过从类型 T 中省略一组属性 K 来创建类型。
  • 用例:当您想要除特定属性之外的所有属性时。
const names: readonly string[] = ["Rutvik", "Rohit", "Virat"];
names.push("Bumrah"); // Error: Property 'push' does not exist on type 'readonly string[]'.
登录后复制
登录后复制
登录后复制

6. 记录

  • 使用键 K 和类型 T 的值构造一个类型。
  • 用例:创建具有固定键和一致值类型的对象类型。
const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4); // no error
登录后复制
登录后复制
登录后复制

7. 排除

  • 从类型 T 中排除所有可分配给 U 的类型。
  • 用例:过滤掉特定类型。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
登录后复制
登录后复制
登录后复制

8. 提取物

  • 仅从类型 T 中提取可分配给 U 的类型。
  • 用例:将类型缩小到特定子集。
let ourTuple: [number, boolean, string];

// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
//No safety in indexes from 3
ourTuple.push('This is wrong');
登录后复制
登录后复制
登录后复制

9. 不可空

  • 从类型 T 中排除 null 和 undefined。
  • 用例:确保值既不为 null 也不未定义。
let ourTuple: readonly [number, boolean, string];
// initialize correctly
ourTuple = [5, false, 'Coding Hero was here'];
// throws error as it is readonly
ourTuple.push('Coding Hero took a day off');
登录后复制
登录后复制
登录后复制

10. 返回类型

  • 推断函数类型的返回类型。
  • 用例:捕获和使用函数的返回类型。
interface CarTypes {
    brand: string,
    model: string,
    year: number
}


const car: CarTypes = {
  brand: "Tata",
  model: "Punch",
  year: 2020
};
登录后复制
登录后复制
登录后复制

11. 实例类型

  • 构造一个由构造函数类型 T 的实例类型组成的类型。
  • 用例:获取类实例的类型。
interface CarTypes {
    brand: string,
    model: string,
    year?: number
}

const car: CarTypes = {
  brand: "Tata",
  model: "Punch"
};
登录后复制
登录后复制

十二、参数

  • 提取函数类型的参数类型。
  • 用例:重用函数的参数类型。
enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Up); // 1
console.log(Direction.Down); // 2
登录后复制
登录后复制

以上是TypeScript 面试问题的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板