Typescript類型檢查原理之Override如何實現(xiàn)

這篇文章主要介紹了Typescript類型檢查原理之Override如何實現(xiàn)的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Typescript類型檢查原理之Override如何實現(xiàn)文章都會有所收獲，下面我們一起來看看吧。

override 修飾符是干嘛的

首先，我們來看下這個修飾符的作用：被 override 標(biāo)示的方法必須得在父類中存在，否則會報錯。

class Animal {   getName() { return ''; } } class Dog extends Animal {   override bak() {     return 'wang';   }   override getName() {     return 'wang';   } }

上面這段代碼會報錯：This member cannot have an 'override' modifier because it is not  declared in the base class  'Animal'.就是說重寫的放在父類不存在，這樣能避免父類重構(gòu)的時候把一些子類需要重寫的方法給去掉。

如何實現(xiàn) override 修飾符的類型檢查

其實所有的修飾符，包括 override、public、static 等，在 parse 成 AST 后都是作為一個屬性存在的，這個 override  也是，我們通過 astexplorer.net 來查看一下。

可以看到 override 屬性為 true。這樣我們就可以通過這個屬性把該 class 的所有的需要 override 的 ClassMethod  過濾出來。

然后還可以拿到 superClass 的名字，從作用域中找到對應(yīng)的聲明，然后遍歷 AST 找到它所聲明的所有 ClassMethod。

兩者對比一下，所有不在父類中的 ClassMethod 都需要報錯。

代碼實現(xiàn)

我們基于 babel 來做 parser 和分析，寫一個插件來做 override 的類型檢查。

開啟語法 typescript 插件來解析 ts 語法。

const { transformFromAstSync } = require('@babel/core'); const  parser = require('@babel/parser');  const ast = parser.parse(sourceCode, {     sourceType: 'unambiguous',     plugins: ['typescript'] });  const { code } = transformFromAstSync(ast, sourceCode, {     plugins: [overrideCheckerPlugin] });

插件要處理的是 ClassDeclaration，我們先搭一個基本的結(jié)構(gòu)：

const { declare } = require('@babel/helper-plugin-utils');  const overrideCheckerPlugin = declare((api, options, dirname) => {     api.assertVersion(7);      return {         pre(file) {             file.set('errors', []);         },         visitor: {             ClassDeclaration(path, state) {                 const semanticErrors = state.file.get('errors');                 //...                 state.file.set('errors', semanticErrors);             }         },         post(file) {             console.log(file.get('errors'));         }     } });

具體的檢查邏輯是拿到父類的所有方法名，拿到當(dāng)前類的所有 override 方法名，然后做下過濾。

我們首先要拿到父類的 ast，通過名字從作用域中查找。

const superClass = path.node.superClass; if (superClass) {     const superClassPath = path.scope.getBinding(superClass.name).path; }

然后封裝一個方法來拿父類方法名，通過 path.traverse 來遍歷 ast，把收集到的方法名存到 state 中。

function getAllClassMethodNames(classDeclarationNodePath) {     const state = {         allSuperMethodNames: []     }     classDeclarationNodePath.traverse({         ClassMethod(path) {             state.allSuperMethodNames.push(path.get('key').toString())         }     });     return state.allSuperMethodNames; }

這樣就拿到了所有父類方法名。

之后需要拿到當(dāng)前類的所有方法名并過濾出 override 為 true 且不在父類中的進(jìn)行報錯。

const superClass = path.node.superClass; if (superClass) {     const superClassPath = path.scope.getBinding(superClass.name).path;     const allMethodNames = getAllClassMethodNames(superClassPath);      path.traverse({         ClassMethod(path) {             if (path.node.override){                 const methodName = path.get('key').toString();                 const superClassName = superClassPath.get('id').toString();                 if (!allMethodNames.includes(methodName)) {                     // 報錯                                                     }             }         }     }); }

報錯的部分使用 code frame 來創(chuàng)建友好的代碼打印格式，通過 Error.stackTraceLimit 設(shè)置為 0 去掉調(diào)用棧信息。

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

這樣，我們就完成了 override 的類型檢查，整體代碼如下：

const { declare } = require('@babel/helper-plugin-utils');  function getAllClassMethodNames(classDeclarationNodePath) {     const state = {         allSuperMethodNames: []     }     classDeclarationNodePath.traverse({         ClassMethod(path) {             state.allSuperMethodNames.push(path.get('key').toString())         }     });     return state.allSuperMethodNames; }  const overrideCheckerPlugin = declare((api, options, dirname) => {     api.assertVersion(7);      return {         pre(file) {             file.set('errors', []);         },         visitor: {             ClassDeclaration(path, state) {                 const semanticErrors = state.file.get('errors');                  const superClass = path.node.superClass;                 if (superClass) {                     const superClassPath = path.scope.getBinding(superClass.name).path;                     const allMethodNames = getAllClassMethodNames(superClassPath);                              path.traverse({                         ClassMethod(path) {                             if (path.node.override){                                 const methodName = path.get('key').toString();                                 const superClassName = superClassPath.get('id').toString();                                 if (!allMethodNames.includes(methodName)) {                                     const tmp = Error.stackTraceLimit;                                     Error.stackTraceLimit = 0;                                     let errorMessage = `this member cannot have an 'override' modifier because it is not declared in the base class '${superClassName}'`;                                     semanticErrors.push(path.get('key').buildCodeFrameError(errorMessage, Error));                                     Error.stackTraceLimit = tmp;                                                                     }                             }                         }                     });                 }                 state.file.set('errors', semanticErrors);             }         },         post(file) {             console.log(file.get('errors'));         }     } });  module.exports = overrideCheckerPlugin;

測試效果

我們用最開始的代碼來測試一下：

class Animal {     getName() { return ''; } } class Dog extends Animal {     override bak() {         return 'wang';     }     override getName() {         return 'wang';     } }

打印信息為：

正確的識別出了 bak 在父類不存在的錯誤。

關(guān)于“Typescript類型檢查原理之Override如何實現(xiàn)”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Typescript類型檢查原理之Override如何實現(xiàn)”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。