TypeScript 面试题及详细答案 100题 （91-100）-- 工程实践与框架集成

还是大剑师兰特2025-10-26 21:59

《前后端面试题》专栏集合了前后端各个知识模块的面试题，包括html，javascript，css，vue，react，java，Openlayers，leaflet，cesium，mapboxGL，threejs，nodejs，mangoDB，SQL，Linux... 。

前后端面试题-专栏总目录

文章目录

  • 一、本文面试题目录
      • [91. 如何为第三方库添加类型声明？当没有`@types`包时该怎么办？](#91. 如何为第三方库添加类型声明？当没有@types包时该怎么办？)
      • [92. `@types`组织的作用是什么？如何安装和使用`@types`包？](#92. @types组织的作用是什么？如何安装和使用@types包？)
      • [93. TypeScript与React结合时，如何定义函数组件的Props类型？如何处理children？](#93. TypeScript与React结合时，如何定义函数组件的Props类型？如何处理children？)
      • [94. React的Hooks（如`useState`、`useEffect`、`useCallback`）在TypeScript中如何指定类型？](#94. React的Hooks（如useState、useEffect、useCallback）在TypeScript中如何指定类型？)
      • [95. TypeScript与Vue 3结合时，如何用`defineProps`和`defineEmits`指定类型？](#95. TypeScript与Vue 3结合时，如何用defineProps和defineEmits指定类型？)
      • [96. 如何在TypeScript中处理Promise的类型？`Promise<T>`的泛型参数表示什么？](#96. 如何在TypeScript中处理Promise的类型？Promise<T>的泛型参数表示什么？)
      • [97. `async/await`在TypeScript中的类型如何定义？如何处理异步错误的类型？](#97. async/await在TypeScript中的类型如何定义？如何处理异步错误的类型？)
      • [98. 如何在TypeScript中操作DOM元素？如何获取特定DOM元素的类型（如`HTMLInputElement`）？](#98. 如何在TypeScript中操作DOM元素？如何获取特定DOM元素的类型（如HTMLInputElement）？)
      • [99. TypeScript与Webpack集成时，需要配置哪些关键 loader 或 plugin？](#99. TypeScript与Webpack集成时，需要配置哪些关键 loader 或 plugin？)
      • [100. TypeScript 4.x及以上版本的重要新特性有哪些？（如模板字符串类型、可选链、空值合并等）](#100. TypeScript 4.x及以上版本的重要新特性有哪些？（如模板字符串类型、可选链、空值合并等）)
  • 二、100道TypeScript面试题目录列表

一、本文面试题目录

91. 如何为第三方库添加类型声明？当没有@types包时该怎么办？

  • 原理说明 ：

    第三方库的类型声明用于告诉TypeScript库的API类型信息。若库本身不含类型声明（如无.d.ts文件），且没有官方或社区维护的@types包，需手动添加类型声明。

  • 解决方式：

    1. 创建全局声明文件 ：在项目中新建declarations.d.ts，用declare module声明模块类型。
    2. 局部类型声明：在使用库的文件中直接声明模块类型（仅限该文件生效）。
    3. 贡献类型声明 ：向@types仓库提交类型声明（长期解决方案）。

  • 示例代码：

    typescript 复制代码 
    // declarations.d.ts（全局声明）
declare module 'untyped-lib' {
  // 声明库的导出成员
  export function func(a: string): number;
  export const value: boolean;
}

// 使用时
import { func, value } from 'untyped-lib';
func('test'); // 类型检查通过

92. @types组织的作用是什么？如何安装和使用@types包？

  • 原理说明 ：
    @types是npm上的官方组织，用于存放社区维护的第三方库类型声明包。这些包为无类型声明的JavaScript库提供TypeScript类型支持，统一管理类型定义。

  • 安装与使用：

    1. 安装：通过npm/yarn安装对应库的@types包（如@types/lodash对应lodash）。
    2. 使用：安装后TypeScript会自动识别类型，无需额外配置。

  • 示例代码：

    bash 复制代码 
    # 安装lodash的类型声明
npm install @types/lodash --save-dev

# 使用时自动获得类型提示
import { debounce } from 'lodash';
debounce(() => {}, 100); // 类型检查生效

93. TypeScript与React结合时，如何定义函数组件的Props类型？如何处理children？

  • 原理说明 ：

    React函数组件的Props类型需通过接口或类型别名定义，明确组件接收的参数类型。children是特殊的Props，用于传递子元素，类型通常为React.ReactNode（支持文本、元素、数组等）。

  • 示例代码：

    typescript 复制代码 
    import React from 'react';

// 定义Props类型
interface ButtonProps {
  label: string;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean; // 可选属性
  children?: React.ReactNode; // 子元素
}

// 函数组件
const Button: React.FC<ButtonProps> = ({ label, onClick, disabled, children }) => {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
      {children}
    </button>
  );
};

// 使用
<Button 
  label="Click" 
  onClick={(e) => console.log(e)}
>
  子元素
</Button>

94. React的Hooks（如useState、useEffect、useCallback）在TypeScript中如何指定类型？

  • 原理说明 ：

    React Hooks在TypeScript中可通过泛型参数显式指定类型，若初始值能明确推断类型，也可省略泛型。

  • 常见Hooks类型指定：

    • useState：通过useState<T>(initialValue)指定状态类型。
    • useEffect：无需显式类型（依赖项类型自动推断）。
    • useCallback：通过useCallback<(params) => returnType>(...)指定函数类型。

  • 示例代码：

    typescript 复制代码 
    import React, { useState, useEffect, useCallback } from 'react';

const MyComponent = () => {
  // 显式指定useState类型（初始值为null时必须）
  const [user, setUser] = useState<{ name: string } | null>(null);

  // useEffect依赖项类型自动推断
  useEffect(() => {
    fetch('/user').then(res => res.json()).then(data => setUser(data));
  }, []);

  // useCallback指定函数类型
  const handleClick = useCallback<(id: number) => void>((id) => {
    console.log('ID:', id);
  }, []);

  return <div>{user?.name}</div>;
};

95. TypeScript与Vue 3结合时，如何用defineProps和defineEmits指定类型？

  • 原理说明 ：

    Vue 3的<script setup>语法中，defineProps用于声明组件接收的Props类型，defineEmits用于声明组件触发的事件类型。TypeScript可通过泛型参数或类型字面量指定类型。

  • 示例代码：

    typescript 复制代码 
    // 单文件组件（.vue）
<script setup lang="ts">
// 用泛型指定Props类型
const props = defineProps<{
  name: string;
  age?: number; // 可选Props
}>();

// 用类型字面量指定Emits类型
const emit = defineEmits<{
  (e: 'change', value: string): void;
  (e: 'submit'): void;
}>();

// 使用
emit('change', 'test'); // 类型检查通过
emit('submit');
</script>

96. 如何在TypeScript中处理Promise的类型？Promise<T>的泛型参数表示什么？

  • 原理说明 ：
    Promise<T>是TypeScript中表示异步操作的泛型类型，泛型参数T表示Promise成功 resolved 时的返回值类型。通过T可明确异步操作的结果类型，避免any导致的类型丢失。

  • 示例代码：

    typescript 复制代码 
    // 定义返回Promise<number>的函数
function fetchNumber(): Promise<number> {
  return new Promise((resolve) => {
    setTimeout(() => resolve(42), 1000);
  });
}

// 处理Promise
fetchNumber().then(num => {
  console.log(num.toFixed(2)); // num类型为number
});

// 泛型参数为对象类型
type User = { id: number; name: string };
function fetchUser(): Promise<User> {
  return Promise.resolve({ id: 1, name: 'Alice' });
}

97. async/await在TypeScript中的类型如何定义？如何处理异步错误的类型？

  • 原理说明 ：
    async函数的返回值类型自动推断为Promise<T>（T为函数内return的值类型）。await可直接获取Promise<T>中的T类型。异步错误通过try/catch捕获，错误类型通常为any（需显式指定为Error或自定义错误类型）。

  • 示例代码：

    typescript 复制代码 
    // async函数类型定义
async function getString(): Promise<string> {
  return 'hello'; // 返回值类型为string，函数类型为Promise<string>
}

// 使用await
async function handle() {
  const str = await getString(); // str类型为string
  console.log(str.length);

  // 处理错误
  try {
    await fetch('/invalid');
  } catch (error) {
    // 显式指定错误类型
    const err = error as Error;
    console.log(err.message);
  }
}

98. 如何在TypeScript中操作DOM元素？如何获取特定DOM元素的类型（如HTMLInputElement）？

  • 原理说明 ：

    TypeScript提供了内置的DOM元素类型（如HTMLDivElement、HTMLInputElement等），通过document.getElementById、querySelector等方法获取DOM元素时，可指定类型断言（as）明确元素类型，避免默认的HTMLElement或null类型过宽。

  • 示例代码：

    typescript 复制代码 
    // 获取特定类型的DOM元素
const input = document.getElementById('username') as HTMLInputElement;
if (input) {
  input.value = 'test'; // 安全访问input特有的value属性
}

// 处理可能为null的情况
const button = document.querySelector<HTMLButtonElement>('button');
button?.click(); // 可选链调用，避免null错误

// 事件处理类型
input?.addEventListener('change', (e: Event) => {
  const target = e.target as HTMLInputElement;
  console.log(target.value);
});

99. TypeScript与Webpack集成时，需要配置哪些关键 loader 或 plugin？

  • 原理说明 ：

    Webpack需通过loader处理TypeScript文件，将其编译为JavaScript。核心配置包括ts-loader（或babel-loader+@babel/preset-typescript）和类型检查插件。

  • 关键配置：

    1. ts-loader：将TypeScript编译为JavaScript（依赖tsconfig.json）。
    2. fork-ts-checker-webpack-plugin：在单独进程中进行类型检查，提高构建速度。
    3. babel-loader（可选）：结合Babel处理TypeScript，支持更多浏览器兼容。

  • 示例配置 （webpack.config.js）：

    javascript 复制代码 
    const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader', // 处理TypeScript
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin(), // 单独进程进行类型检查
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'], // 解析TS/TSX文件
  },
};

100. TypeScript 4.x及以上版本的重要新特性有哪些？（如模板字符串类型、可选链、空值合并等）

  • 原理说明 ：

    TypeScript 4.x及以上版本引入了多项增强功能，提升类型系统的灵活性和开发体验。

  • 重要新特性：

    1. 模板字符串类型（4.1+）：通过模板字符串生成新类型，支持字符串拼接和模式匹配。

      typescript 复制代码 
      type Greeting = `Hello ${'Alice' | 'Bob'}`; // "Hello Alice" | "Hello Bob"

    2. 可选链（?.）和空值合并（??）（3.7+，4.x完善）：简化可选属性访问和默认值处理，编译为安全的JavaScript代码。

      typescript 复制代码 
      const name = user?.name ?? 'Guest'; // 等价于 user && user.name ? user.name : 'Guest'

    3. 具名元组元素（4.0+）：为元组元素命名，提高可读性。

      typescript 复制代码 
      type Point = [x: number, y: number];

    4. unknown的改进 ：更严格的类型检查，替代any作为未知类型的推荐选择。

    5. satisfies操作符（4.9+）：确保表达式符合类型，同时保留更具体的推断类型。

      typescript 复制代码 
      const config = { name: 'test', port: 8080 } satisfies { name: string; port: number };

    6. 装饰器（5.0+稳定）：标准化装饰器语法，支持装饰类、方法、属性等。

      typescript 复制代码 
      function log(target: any, key: string) { /* ... */ }
class MyClass { @log method() {} }

二、100道TypeScript面试题目录列表

文章序号 TypeScript面试题100道
1 TypeScript面试题及详细答案100道（01-10）
2 TypeScript面试题及详细答案100道（11-20）
3 TypeScript面试题及详细答案100道（21-30）
4 TypeScript面试题及详细答案100道（31-40）
5 TypeScript面试题及详细答案100道（41-50）
6 TypeScript面试题及详细答案100道（51-60）
7 TypeScript面试题及详细答案100道（61-70）
8 TypeScript面试题及详细答案100道（71-80）
9 TypeScript面试题及详细答案100道（81-90）
10 TypeScript面试题及详细答案100道（91-100）
相关推荐
可触的未来，发芽的智生4 小时前
触摸未来2025-10-25：蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569154 小时前
typeof null === 'object'：JavaScript 最古老的 bug 为何 30 年无法修复？
前端·javascript·面试
我谈山美，我说你媚4 小时前
flutter使用getx做一个todolist
1024程序员节
__WanG4 小时前
如何编写标准StatefulWidget页面
前端·flutter
m0_739030004 小时前
springboot中的怎么用JUnit进行测试的？
junit·1024程序员节
非凡ghost4 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost4 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端
非凡ghost4 小时前
K-Lite Mega/FULL Codec Pack(视频解码器)
前端·javascript·后端
麦麦大数据4 小时前
F034 vue+neo4j 体育知识图谱系统|体育文献知识图谱vue+flask知识图谱管理+d3.js可视化
javascript·vue.js·知识图谱·neo4j·文献·体育·知识图谱管理
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08KGG转MP3工具|非KGM文件|解密音频09安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）10Labelme从安装到标注：零基础完整指南