面试题：TypeScript动画库类型安全交互之复杂对象类型定义

Question

在TypeScript动画库中，有一个对象用于描述动画的配置信息，包括动画的起始位置（包含x和y坐标）、结束位置（同样包含x和y坐标）、动画的缓动函数（一个字符串，比如 'linear' 、 'ease - in' 等）。请定义这个配置对象的类型，并编写一个函数接收这个配置对象，且要保证函数内对配置对象属性的访问都是类型安全的，阐述如何进行类型检查和增强类型安全性。

Answer 1

1. 定义配置对象类型：

   type AnimationConfig = {
       start: {
           x: number;
           y: number;
       };
       end: {
           x: number;
           y: number;
       };
       easingFunction: string;
   };
   

2. 编写接收配置对象的函数：

   function animate(config: AnimationConfig) {
       console.log(`Starting animation from (${config.start.x}, ${config.start.y}) to (${config.end.x}, ${config.end.y}) with ease function ${config.easingFunction}`);
   }
   

3. 类型检查和增强类型安全性的阐述：
   • 类型定义明确：通过 type 关键字定义 AnimationConfig 类型，明确了对象的结构，使得对象属性的类型一目了然。在函数参数中使用该类型，TypeScript 编译器就会进行静态类型检查，确保传入的对象符合定义的结构。
   • 避免运行时错误：在函数内部，由于参数 config 已经被明确为 AnimationConfig 类型，对 config 属性的访问都是类型安全的。如果尝试访问不存在的属性，TypeScript 编译器会报错，这避免了在运行时因为访问不存在的属性而导致的错误。
   • 代码可维护性增强：明确的类型定义使得代码更易于理解和维护。当其他人阅读或修改代码时，可以清楚地知道 AnimationConfig 对象应该具备哪些属性以及属性的类型，降低了理解和修改代码的难度。