Typescript类型检查原理之Override是如何实现的

本文转载自微信公众号「神光的编程秘籍」，作者神说要有光 。转载本文请联系神光的编程秘籍公众号。

作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。成都创新互联公司提供从前期的网站品牌分析策划、网站设计、网站建设、成都做网站、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。

前段时间写过一篇类型检查的实现原理的文章，实现了简单的赋值语句和函数调用的类型检查。实际上类型检查的情况特别多，一篇文章肯定写不完，所以我准备用系列文章来讲述各种类型检查的实现原理，帮助大家更好的掌握 typescript。

这一篇我们来实现 4.3 新增的 class 的 override 关键字的类型检查。(源码链接在后面)

override 修饰符是干嘛的

首先，我们来看下这个修饰符的作用：被 override 标示的方法必须得在父类中存在，否则会报错。

 
 
 
 
    
  
  
  
  
  1. class Animal { 
    2. 
  
  
  
  
  2.   getName() { return ''; } 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. class Dog extends Animal { 
    5. 
  
  
  
  
  5.   override bak() { 
    6. 
  
  
  
  
  6.     return 'wang'; 
    7. 
  
  
  
  
  7.   } 
    8. 
  
  
  
  
  8.   override getName() { 
    9. 
  
  
  
  
  9.     return 'wang'; 
    10. 
  
  
  
  
  10.   } 
    11. 
  
  
  
  
  11. } 
    12.

上面这段代码会报错：This member cannot have an 'override' modifier because it is not declared in the base class 'Animal'.就是说重写的放在父类不存在，这样能避免父类重构的时候把一些子类需要重写的方法给去掉。

如何实现 override 修饰符的类型检查

其实所有的修饰符，包括 override、public、static 等，在 parse 成 AST 后都是作为一个属性存在的，这个 override 也是，我们通过 astexplorer.net 来查看一下。

可以看到 override 属性为 true。这样我们就可以通过这个属性把该 class 的所有的需要 override 的 ClassMethod 过滤出来。

然后还可以拿到 superClass 的名字，从作用域中找到对应的声明，然后遍历 AST 找到它所声明的所有 ClassMethod。

两者对比一下，所有不在父类中的 ClassMethod 都需要报错。

代码实现

我们基于 babel 来做 parser 和分析，写一个插件来做 override 的类型检查。关于 babel 插件的基础可以看小册《babel 插件通关秘籍》。

开启语法 typescript 插件来解析 ts 语法。

 
 
 
 
    
  
  
  
  
  1. const { transformFromAstSync } = require('@babel/core'); 
    2. 
  
  
  
  
  2. const  parser = require('@babel/parser'); 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. const ast = parser.parse(sourceCode, { 
    5. 
  
  
  
  
  5.     sourceType: 'unambiguous', 
    6. 
  
  
  
  
  6.     plugins: ['typescript'] 
    7. 
  
  
  
  
  7. }); 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. const { code } = transformFromAstSync(ast, sourceCode, { 
    10. 
  
  
  
  
  10.     plugins: [overrideCheckerPlugin] 
    11. 
  
  
  
  
  11. }); 
    12.

插件要处理的是 ClassDeclaration，我们先搭一个基本的结构：

 
 
 
 
    
  
  
  
  
  1. const { declare } = require('@babel/helper-plugin-utils'); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const overrideCheckerPlugin = declare((api, options, dirname) => { 
    4. 
  
  
  
  
  4.     api.assertVersion(7); 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.     return { 
    7. 
  
  
  
  
  7.         pre(file) { 
    8. 
  
  
  
  
  8.             file.set('errors', []); 
    9. 
  
  
  
  
  9.         }, 
    10. 
  
  
  
  
  10.         visitor: { 
    11. 
  
  
  
  
  11.             ClassDeclaration(path, state) { 
    12. 
  
  
  
  
  12.                 const semanticErrors = state.file.get('errors'); 
    13. 
  
  
  
  
  13.                 //... 
    14. 
  
  
  
  
  14.                 state.file.set('errors', semanticErrors); 
    15. 
  
  
  
  
  15.             } 
    16. 
  
  
  
  
  16.         }, 
    17. 
  
  
  
  
  17.         post(file) { 
    18. 
  
  
  
  
  18.             console.log(file.get('errors')); 
    19. 
  
  
  
  
  19.         } 
    20. 
  
  
  
  
  20.     } 
    21. 
  
  
  
  
  21. }); 
    22.

具体的检查逻辑是拿到父类的所有方法名，拿到当前类的所有 override 方法名，然后做下过滤。

我们首先要拿到父类的 ast，通过名字从作用域中查找。

 
 
 
 
    
  
  
  
  
  1. const superClass = path.node.superClass; 
    2. 
  
  
  
  
  2. if (superClass) { 
    3. 
  
  
  
  
  3.     const superClassPath = path.scope.getBinding(superClass.name).path; 
    4. 
  
  
  
  
  4. } 
    5.

然后封装一个方法来拿父类方法名，通过 path.traverse 来遍历 ast，把收集到的方法名存到 state 中。

 
 
 
 
    
  
  
  
  
  1. function getAllClassMethodNames(classDeclarationNodePath) { 
    2. 
  
  
  
  
  2.     const state = { 
    3. 
  
  
  
  
  3.         allSuperMethodNames: [] 
    4. 
  
  
  
  
  4.     } 
    5. 
  
  
  
  
  5.     classDeclarationNodePath.traverse({ 
    6. 
  
  
  
  
  6.         ClassMethod(path) { 
    7. 
  
  
  
  
  7.             state.allSuperMethodNames.push(path.get('key').toString()) 
    8. 
  
  
  
  
  8.         } 
    9. 
  
  
  
  
  9.     }); 
    10. 
  
  
  
  
  10.     return state.allSuperMethodNames; 
    11. 
  
  
  
  
  11. } 
    12.

这样就拿到了所有父类方法名。

之后需要拿到当前类的所有方法名并过滤出 override 为 true 且不在父类中的进行报错。

 
 
 
 
    
  
  
  
  
  1. const superClass = path.node.superClass; 
    2. 
  
  
  
  
  2. if (superClass) { 
    3. 
  
  
  
  
  3.     const superClassPath = path.scope.getBinding(superClass.name).path; 
    4. 
  
  
  
  
  4.     const allMethodNames = getAllClassMethodNames(superClassPath); 
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.     path.traverse({ 
    7. 
  
  
  
  
  7.         ClassMethod(path) { 
    8. 
  
  
  
  
  8.             if (path.node.override){ 
    9. 
  
  
  
  
  9.                 const methodName = path.get('key').toString(); 
    10. 
  
  
  
  
  10.                 const superClassName = superClassPath.get('id').toString(); 
    11. 
  
  
  
  
  11.                 if (!allMethodNames.includes(methodName)) { 
    12. 
  
  
  
  
  12.                     // 报错                                     
    13. 
  
  
  
  
  13.                 } 
    14. 
  
  
  
  
  14.             } 
    15. 
  
  
  
  
  15.         } 
    16. 
  
  
  
  
  16.     }); 
    17. 
  
  
  
  
  17. } 
    18.

报错的部分使用 code frame 来创建友好的代码打印格式，通过 Error.stackTraceLimit 设置为 0 去掉调用栈信息。

 
 
 
 
    
  
  
  
  
  1. const tmp = Error.stackTraceLimit; 
    2. 
  
  
  
  
  2. Error.stackTraceLimit = 0; 
    3. 
  
  
  
  
  3. let errorMessage = `this member cannot have an 'override' modifier because it is not declared in the base class '${superClassName}'`; 
    4. 
  
  
  
  
  4. semanticErrors.push(path.get('key').buildCodeFrameError(errorMessage, Error)); 
    5. 
  
  
  
  
  5. Error.stackTraceLimit = tmp; 
    6.

这样，我们就完成了 override 的类型检查，整体代码如下：

 
 
 
 
    
  
  
  
  
  1. const { declare } = require('@babel/helper-plugin-utils'); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. function getAllClassMethodNames(classDeclarationNodePath) { 
    4. 
  
  
  
  
  4.     const state = { 
    5. 
  
  
  
  
  5.         allSuperMethodNames: [] 
    6. 
  
  
  
  
  6.     } 
    7. 
  
  
  
  
  7.     classDeclarationNodePath.traverse({ 
    8. 
  
  
  
  
  8.         ClassMethod(path) { 
    9. 
  
  
  
  
  9.             state.allSuperMethodNames.push(path.get('key').toString()) 
    10. 
  
  
  
  
  10.         } 
    11. 
  
  
  
  
  11.     }); 
    12. 
  
  
  
  
  12.     return state.allSuperMethodNames; 
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. const overrideCheckerPlugin = declare((api, options, dirname) => { 
    16. 
  
  
  
  
  16.     api.assertVersion(7); 
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18.     return { 
    19. 
  
  
  
  
  19.         pre(file) { 
    20. 
  
  
  
  
  20.             file.set('errors', []); 
    21. 
  
  
  
  
  21.         }, 
    22. 
  
  
  
  
  22.         visitor: { 
    23. 
  
  
  
  
  23.             ClassDeclaration(path, state) { 
    24. 
  
  
  
  
  24.                 const semanticErrors = state.file.get('errors'); 
    25. 
  
  
  
  
  25.  
    26. 
  
  
  
  
  26.                 const superClass = path.node.superClass; 
    27. 
  
  
  
  
  27.                 if (superClass) { 
    28. 
  
  
  
  
  28.                     const superClassPath = path.scope.getBinding(superClass.name).path; 
    29. 
  
  
  
  
  29.                     const allMethodNames = getAllClassMethodNames(superClassPath); 
    30. 
  
  
  
  
  30.          
    31. 
  
  
  
  
  31.                     path.traverse({ 
    32. 
  
  
  
  
  32.                         ClassMethod(path) { 
    33. 
  
  
  
  
  33.                             if (path.node.override){ 
    34. 
  
  
  
  
  34.                                 const methodName = path.get('key').toString(); 
    35. 
  
  
  
  
  35.                                 const superClassName = superClassPath.get('id').toString(); 
    36. 
  
  
  
  
  36.                                 if (!allMethodNames.includes(methodName)) { 
    37. 
  
  
  
  
  37.                                     const tmp = Error.stackTraceLimit; 
    38. 
  
  
  
  
  38.                                     Error.stackTraceLimit = 0; 
    39. 
  
  
  
  
  39.                                     let errorMessage = `this member cannot have an 'override' modifier because it is not declared in the base class '${superClassName}'`; 
    40. 
  
  
  
  
  40.                                     semanticErrors.push(path.get('key').buildCodeFrameError(errorMessage, Error)); 
    41. 
  
  
  
  
  41.                                     Error.stackTraceLimit = tmp;                                     
    42. 
  
  
  
  
  42.                                 } 
    43. 
  
  
  
  
  43.                             } 
    44. 
  
  
  
  
  44.                         } 
    45. 
  
  
  
  
  45.                     }); 
    46. 
  
  
  
  
  46.                 } 
    47. 
  
  
  
  
  47.                 state.file.set('errors', semanticErrors); 
    48. 
  
  
  
  
  48.             } 
    49. 
  
  
  
  
  49.         }, 
    50. 
  
  
  
  
  50.         post(file) { 
    51. 
  
  
  
  
  51.             console.log(file.get('errors')); 
    52. 
  
  
  
  
  52.         } 
    53. 
  
  
  
  
  53.     } 
    54. 
  
  
  
  
  54. }); 
    55. 
  
  
  
  
  55.  
    56. 
  
  
  
  
  56. module.exports = overrideCheckerPlugin; 
    57.

github 链接

测试效果

我们用最开始的代码来测试一下：

 
 
 
 
    
  
  
  
  
  1. class Animal { 
    2. 
  
  
  
  
  2.     getName() { return ''; } 
    3. 
  
  
  
  
  3. } 
    4. 
  
  
  
  
  4. class Dog extends Animal { 
    5. 
  
  
  
  
  5.     override bak() { 
    6. 
  
  
  
  
  6.         return 'wang'; 
    7. 
  
  
  
  
  7.     } 
    8. 
  
  
  
  
  8.     override getName() { 
    9. 
  
  
  
  
  9.         return 'wang'; 
    10. 
  
  
  
  
  10.     } 
    11. 
  
  
  
  
  11. } 
    12.

打印信息为：

正确的识别出了 bak 在父类不存在的错误。

至此，我们实现了 override 的类型检查!

总结

类型检查情况很多，所以需要一个系列文章去讲，这一篇我们来实现 override 的类型检查。

override 是 ts 4.3 加入的特性，带有 override 修饰符的方法必须在父类中有对应的声明，否则会报错。

我们通过 babel 插件的方式实现了类型检查，思路是从作用域取出父类的声明，然后通过 path.traverse 拿到所有方法名，之后再取当前类的所有方法名，对于没在父类中声明并且带有 override 修饰符的方法进行报错。

本文是 【typescript 类型检查原理】系列文章的第二篇，后续还会有更多 typescript 类型检查的实现原理揭秘的文章。希望能够帮助大家更好的掌握 typescript。

关于 babel 插件的知识，可以看我的 babel 小册《babel 插件通关秘籍》，其中有详细的讲解。

本文源码链接 https://github.com/QuarkGluonPlasma/babel-plugin-exercize/tree/master/exercize-type-checker/src

网页标题：Typescript类型检查原理之Override是如何实现的
当前URL：http://www.shufengxianlan.com/qtweb/news47/250347.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

面包屑导航知识

各行业网站

网站建设方案　　 　宜宾网站建设　　 　绵阳网站制作　　 　自贡主机托管　　 　成都网站建设　　 　雪茄烟品牌　　 　seo优化　　 　广安网站建设　　 　德昌麦琪建站　　 　成都门户网站建设设计方案　　 　手机网站开发　　 　橡塑板　　 　网络营销推广　　 　网络口碑营销　　 　成都工装公司　　 　网创优客　　 　复盛机电设备　　 　网站建设公司　　 　绵阳服务器托管　　 　成都广告招牌