Jscodeshift और TypeScript में प्रकार का अनुमान

संस्करण 6.0 से शुरू होकर, jscodeshift टाइपस्क्रिप्ट (टीएस) के साथ काम करने का समर्थन करता है। कोडेमोड (परिवर्तन) लिखने की प्रक्रिया में, आपको उस प्रकार के चर का पता लगाने की आवश्यकता हो सकती है जिसमें स्पष्ट एनोटेशन नहीं है। दुर्भाग्य से, jscodeshift बॉक्स से निम्न प्रकार के साधन प्रदान नहीं करता है।

एक उदाहरण पर विचार करें। मान लीजिए कि हम एक परिवर्तन लिखना चाहते हैं जो वर्ग कार्यों और विधियों के लिए एक स्पष्ट रिटर्न प्रकार जोड़ता है। यानी प्रवेश द्वार पर होना:

function foo(x: number) { return x; } 

हम आउटपुट प्राप्त करना चाहते हैं:

 function foo(x: number): number { return x; } 

दुर्भाग्य से, सामान्य मामले में, इस तरह की समस्या का समाधान बहुत nontrivial है। यहाँ कुछ उदाहरण दिए गए हैं:

 function toString(x: number) { return '' + x; } function toInt(str: string) { return parseInt(str); } function toIntArray(strings: string[]) { return strings.map(Number.parseInt); } class Foo1 { constructor(public x = 0) { } getX() { return this.x; } } class Foo2 { x: number; constructor(x = 0) { this.x = x; } getX() { return this.x; } } function foo1(foo: Foo1) { return foo.getX(); } function foo2(foo: Foo2) { return foo.getX(); } 

सौभाग्य से, टीएस संकलक के अंदर पहले से ही इनफेक्शन की समस्या हल हो गई है। कंपाइलर एपीआई एक प्रकार का अनुमान प्रदान करता है जिसका उपयोग आप परिवर्तन लिखने के लिए कर सकते हैं।

हालाँकि, आप केवल jscodeshift पार्सर को ओवरराइड करके TS कंपाइलर का उपयोग नहीं कर सकते हैं। तथ्य यह है कि jscodeshift को एस्ट्री प्रारूप में बाहरी पार्सर से एक सार सिंटैक्स ट्री (एएसटी) की उम्मीद है। और टीएस संकलक एएसटी नहीं है।

बेशक, कोई भी jscodeshift का उपयोग किए बिना TS संकलक का उपयोग कर सकता है, खरोंच से एक परिवर्तन लिख रहा है। या TS उपकरण में मौजूद किसी एक उपकरण का उपयोग करें, उदाहरण के लिए, ts-morph । लेकिन कई लोगों के लिए, jscodeshift एक अधिक परिचित और अभिव्यंजक समाधान होगा। इसलिए, हम आगे विचार करेंगे कि इस सीमा के आसपास कैसे पहुंचें।

विचार jscodeshift पार्सर एएसटी (बाद में एस्ट्री) से टीएस संकलक एएसटी (इसके बाद टीएसटीआरआई) से मैपिंग प्राप्त करने के लिए है, और उसके बाद टीएस कंपाइलर प्रकार के आविष्कार उपकरण का उपयोग करें। अगला, हम इस विचार को लागू करने के दो तरीकों पर विचार करेंगे।

पंक्ति और स्तंभ संख्याओं का उपयोग करके प्रदर्शित करें

पहली विधि TSTree से ESTRE तक मानचित्रण को खोजने के लिए नोड्स की पंक्ति और स्तंभ संख्या (स्थिति) का उपयोग करती है। इस तथ्य के बावजूद कि सामान्य स्थिति में नोड्स की स्थिति संयोग नहीं हो सकती है, प्रत्येक विशिष्ट मामले में वांछित प्रदर्शन ढूंढना लगभग हमेशा संभव होता है।

तो, चलिए एक परिवर्तन लिखते हैं जो स्पष्ट एनोटेशन जोड़ने का कार्य करेगा। मुझे आपको याद दिलाना चाहिए, आउटपुट पर हमें निम्नलिखित मिलना चाहिए:

 function toString(x: number): number { return '' + x; } function toInt(str: string): number { return parseInt(str); } function toIntArray(strings: string[]): number[] { return strings.map(Number.parseInt); } class Foo1 { constructor(public x = 0) { } getX(): number { return this.x; } } class Foo2 { x: number; constructor(x = 0) { this.x = x; } getX(): number { return this.x; } } function foo1(foo: Foo1): number { return foo.getX(); } function foo2(foo: Foo2): number { return foo.getX(); } 

सबसे पहले, हमें एक TSTree बनाने और typeChecker कंपाइलर typeChecker :

 const compilerOptions = { target: ts.ScriptTarget.Latest }; const program = ts.createProgram([path], compilerOptions); const sourceFile = program.getSourceFile(path); const typeChecker = program.getTypeChecker(); 

इसके बाद, शुरुआती स्थिति का उपयोग करके एस्ट्री से टीएसट्री तक एक मैपिंग बनाएं। ऐसा करने के लिए, हम दो-स्तरीय Map उपयोग करेंगे (पहला स्तर पंक्तियों के लिए है, दूसरा स्तर स्तंभों के लिए है, परिणाम एक TSTree नोड है):

 const locToTSNodeMap = new Map(); const esTreeNodeToTSNode = ({ loc: { start: { line, column } } }) => locToTSNodeMap.has(line) ? locToTSNodeMap.get(line).get(column) : undefined; (function buildLocToTSNodeMap(node) { const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)); const nextLine = line + 1; if (!locToTSNodeMap.has(nextLine)) locToTSNodeMap.set(nextLine, new Map()); locToTSNodeMap.get(nextLine).set(character, node); ts.forEachChild(node, buildLocToTSNodeMap); }(sourceFile)); 

लाइन संख्या को समायोजित करना आवश्यक है, जैसा कि TSTree में, पंक्ति संख्याएं शून्य से शुरू होती हैं, और एक से एस्ट्री में।

अगला, हमें कक्षाओं के सभी कार्यों और विधियों के चारों ओर जाने की आवश्यकता है, रिटर्न प्रकार की जांच करें और यदि यह null , तो टाइप का एनोटेशन जोड़ें:

 const ast = j(source); ast .find(j.FunctionDeclaration) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); ast .find(j.ClassMethod, { kind: 'method' }) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value).parent); }); return ast.toSource(); 

मुझे क्लास विधि नोड प्राप्त करने के लिए कोड को समायोजित करना पड़ा, क्योंकि एस्ट्री में विधि नोड की प्रारंभिक स्थिति में TSTree में विधि पहचानकर्ता का नोड है (इसलिए हम parent उपयोग करते हैं)।

अंत में, हम रिटर्न प्रकार के एनोटेशन प्राप्त करने के लिए कोड लिखते हैं:

 function getReturnTypeFromString(typeString) { let ret; j(`function foo(): ${typeString} { }`) .find(j.FunctionDeclaration) .some(({ value: { returnType } }) => ret = returnType); return ret; } function getReturnType(node) { return getReturnTypeFromString( typeChecker.typeToString( typeChecker.getReturnTypeOfSignature( typeChecker.getSignatureFromDeclaration(node) ) ) ); } 

पूरी सूची:

 import * as ts from 'typescript'; export default function transform({ source, path }, { j }) { const compilerOptions = { target: ts.ScriptTarget.Latest }; const program = ts.createProgram([path], compilerOptions); const sourceFile = program.getSourceFile(path); const typeChecker = program.getTypeChecker(); const locToTSNodeMap = new Map(); const esTreeNodeToTSNode = ({ loc: { start: { line, column } } }) => locToTSNodeMap.has(line) ? locToTSNodeMap.get(line).get(column) : undefined; (function buildLocToTSNodeMap(node) { const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)); const nextLine = line + 1; if (!locToTSNodeMap.has(nextLine)) locToTSNodeMap.set(nextLine, new Map()); locToTSNodeMap.get(nextLine).set(character, node); ts.forEachChild(node, buildLocToTSNodeMap); }(sourceFile)); function getReturnTypeFromString(typeString) { let ret; j(`function foo(): ${typeString} { }`) .find(j.FunctionDeclaration) .some(({ value: { returnType } }) => ret = returnType); return ret; } function getReturnType(node) { return getReturnTypeFromString( typeChecker.typeToString( typeChecker.getReturnTypeOfSignature( typeChecker.getSignatureFromDeclaration(node) ) ) ); } const ast = j(source); ast .find(j.FunctionDeclaration) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); ast .find(j.ClassMethod, { kind: 'method' }) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value).parent); }); return ast.toSource(); } export const parser = 'ts'; 

टाइपस्क्रिप्ट-एस्लिंट पार्सर का उपयोग करना

जैसा कि ऊपर दिखाया गया है, हालांकि नोड्स के पदों का उपयोग करने वाला प्रदर्शन काम करता है, यह सटीक परिणाम नहीं देता है और कभी-कभी "मैनुअल ट्यूनिंग" की आवश्यकता होती है। एक अधिक सामान्य समाधान एस्ट्री नोड्स का एक स्पष्ट मानचित्रण TSTree को लिखना होगा। यह है कि टाइपस्क्रिप्ट-एस्लिंट प्रोजेक्ट पार्सर कैसे काम करता है। हम इसका उपयोग करेंगे।

सबसे पहले, हमें अंतर्निहित jscodeshift पार्सर को टाइपस्क्रिप्ट-एस्लिंट पार्सर को ओवरराइड करने की आवश्यकता है। सबसे सरल मामले में, कोड इस तरह दिखता है:

 export const parser = { parse(source) { return typescriptEstree.parse(source); } }; 

हालाँकि, हमें TSTree और typeChecker चेकर को ESTree नोड्स की मैपिंग प्राप्त करने के लिए कोड को थोड़ा जटिल करना होगा। इसके लिए, टाइपस्क्रिप्ट-एसलिंट parseAndGenerateServices फ़ंक्शन का उपयोग करता है। सब कुछ काम करने के लिए, हमें .ts फ़ाइल के लिए पथ और उस पर tsconfig.json कॉन्फ़िगरेशन फ़ाइल के लिए पथ पास करना tsconfig.json । चूंकि ऐसा करने का कोई सीधा तरीका नहीं है, इसलिए आपको वैश्विक चर (ओह!) का उपयोग करना होगा।

 const parserState = {}; function parseWithServices(j, source, path, projectPath) { parserState.options = { filePath: path, project: projectPath }; return { ast: j(source), services: parserState.services }; } export const parser = { parse(source) { if (parserState.options !== undefined) { const options = parserState.options; delete parserState.options; const { ast, services } = typescriptEstree.parseAndGenerateServices(source, options); parserState.services = services; return ast; } return typescriptEstree.parse(source); } }; 

हर बार जब हम टाइपस्क्रिप्ट-एस्लिंट पार्सर टूल्स का एक विस्तारित सेट प्राप्त करना चाहते हैं, तो हम parseWithServices फ़ंक्शन को कॉल करते हैं, जिसमें हम आवश्यक पैरामीटर पास करते हैं (अन्य मामलों में, हम अभी भी j फ़ंक्शन का उपयोग करते हैं):

 const { ast, services: { program, esTreeNodeToTSNodeMap } } = parseWithServices(j, source, path, tsConfigPath); const typeChecker = program.getTypeChecker(); const esTreeNodeToTSNode = ({ original }) => esTreeNodeToTSNodeMap.get(original); 

यह केवल कोड लिखने और कक्षाओं के कार्यों और तरीकों को संशोधित करने के लिए बनी हुई है:

 ast .find(j.FunctionDeclaration) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); ast .find(j.MethodDefinition, { kind: 'method' }) .forEach(({ value }) => { if (value.value.returnType === null) value.value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); return ast.toSource(); 

यह ध्यान दिया जाना चाहिए कि हमें क्लास मेथड्स को बायपास MethodDefinition लिए ClassMethod चयनकर्ता को ClassMethod साथ बदलना पड़ा (विधि के वापसी मूल्य का एक्सेस कोड भी थोड़ा बदल गया है)। यह टाइपस्क्रिप्ट-एस्लिंट पार्सर की बारीकियों है। getReturnType फ़ंक्शन getReturnType पहले उपयोग किए गए समान है।

पूरी सूची:

 import * as typescriptEstree from '@typescript-eslint/typescript-estree'; export default function transform({ source, path }, { j }, { tsConfigPath }) { const { ast, services: { program, esTreeNodeToTSNodeMap } } = parseWithServices(j, source, path, tsConfigPath); const typeChecker = program.getTypeChecker(); const esTreeNodeToTSNode = ({ original }) => esTreeNodeToTSNodeMap.get(original); function getReturnTypeFromString(typeString) { let ret; j(`function foo(): ${typeString} { }`) .find(j.FunctionDeclaration) .some(({ value: { returnType } }) => ret = returnType); return ret; } function getReturnType(node) { return getReturnTypeFromString( typeChecker.typeToString( typeChecker.getReturnTypeOfSignature( typeChecker.getSignatureFromDeclaration(node) ) ) ); } ast .find(j.FunctionDeclaration) .forEach(({ value }) => { if (value.returnType === null) value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); ast .find(j.MethodDefinition, { kind: 'method' }) .forEach(({ value }) => { if (value.value.returnType === null) value.value.returnType = getReturnType(esTreeNodeToTSNode(value)); }); return ast.toSource(); } const parserState = {}; function parseWithServices(j, source, path, projectPath) { parserState.options = { filePath: path, project: projectPath }; return { ast: j(source), services: parserState.services }; } export const parser = { parse(source) { if (parserState.options !== undefined) { const options = parserState.options; delete parserState.options; const { ast, services } = typescriptEstree.parseAndGenerateServices(source, options); parserState.services = services; return ast; } return typescriptEstree.parse(source); } }; 

दृष्टिकोण के पेशेवरों और विपक्ष

पंक्ति और स्तंभ दृष्टिकोण

पेशेवरों:

• यह निर्मित में पार्सर jscodeshift को ओवरराइड करने की आवश्यकता नहीं है।
• कॉन्फ़िगरेशन और स्रोत ग्रंथों को स्थानांतरित करने की लचीलापन (आप मेमोरी में फ़ाइलों और लाइनों / ऑब्जेक्ट दोनों को स्थानांतरित कर सकते हैं, नीचे देखें)।

विपक्ष:

• स्थिति से नोड्स का प्रदर्शन गलत है और कुछ मामलों में समायोजन की आवश्यकता है।

पार्सर टाइपस्क्रिप्ट-एसलिंट

पेशेवरों:

• एक एएसटी से दूसरे में नोड्स की सटीक मैपिंग।

विपक्ष:

• टाइपस्क्रिप्ट-एस्लिंट पार्सर की एएसटी संरचना बिल्ट-इन पार्सर में जॉक्सोडेशफ़्ट से थोड़ी अलग है।
• टीएस कॉन्फ़िगरेशन और स्रोत को स्थानांतरित करने के लिए फ़ाइलों का उपयोग करने की आवश्यकता है।

निष्कर्ष

पहला दृष्टिकोण मौजूदा परियोजनाओं को जोड़ना आसान है, जैसा कि इसके लिए पार्सर पुनर्वितरण की आवश्यकता नहीं है, लेकिन एएसटी नोड्स के मानचित्रण को समायोजन की आवश्यकता है।

दूसरे दृष्टिकोण पर निर्णय अग्रिम में सबसे अच्छा किया जाता है, अन्यथा आपको परिवर्तित एएसटी संरचना के कारण कोड डिबगिंग में समय बिताना पड़ सकता है। दूसरी ओर, आपके पास कुछ नोड्स की पूरी मैपिंग होगी (और इसके विपरीत)।

पुनश्च

ऊपर उल्लेख किया गया था कि टीएस पार्सर का उपयोग करते समय, आप कॉन्फ़िगरेशन और स्रोत ग्रंथों को फ़ाइलों के रूप में और मेमोरी में ऑब्जेक्ट के रूप में दोनों में स्थानांतरित कर सकते हैं। ऑब्जेक्ट के रूप में कॉन्फ़िगरेशन का स्थानांतरण और फ़ाइल के रूप में स्रोत पाठ का स्थानांतरण उदाहरण में माना जाता था। निम्नलिखित फ़ंक्शन का एक कोड है जो आपको किसी फ़ाइल से कॉन्फ़िगरेशन पढ़ने की अनुमति देता है:

 class TsDiagnosticError extends Error { constructor(err) { super(Array.isArray(err) ? err.map(e => e.messageText).join('\n') : err.messageText); this.diagnostic = err; } } function tsGetCompilerOptionsFromConfigFile(tsConfigPath, basePath = '.') { const { config, error } = ts.readConfigFile(tsConfigPath, ts.sys.readFile); if (error) throw new TsDiagnosticError(error); const { options, errors } = ts.parseJsonConfigFileContent(config, tsGetCompilerOptionsFromConfigFile.host, basePath); if (errors.length !== 0) throw new TsDiagnosticError(errors); return options; } tsGetCompilerOptionsFromConfigFile.host = { fileExists: ts.sys.fileExists, readFile: ts.sys.readFile, readDirectory: ts.sys.readDirectory, useCaseSensitiveFileNames: true }; 

और लाइन से एक TS प्रोग्राम बनाएं:

 function tsCreateStringSourceCompilerHost(mockPath, source, compilerOptions, setParentNodes) { const host = ts.createCompilerHost(compilerOptions, setParentNodes); const getSourceFileOriginal = host.getSourceFile.bind(host); const readFileOriginal = host.readFile.bind(host); const fileExistsOriginal = host.fileExists.bind(host); host.getSourceFile = (fileName, languageVersion, onError, shouldCreateNewSourceFile) => { return fileName === mockPath ? ts.createSourceFile(fileName, source, languageVersion) : getSourceFileOriginal(fileName, languageVersion, onError, shouldCreateNewSourceFile); }; host.readFile = (fileName) => { return fileName === mockPath ? source : readFileOriginal(fileName); }; host.fileExists = (fileName) => { return fileName === mockPath ? true : fileExistsOriginal(fileName); }; return host; } function tsCreateStringSourceProgram(source, compilerOptions, mockPath = '_source.ts') { return ts.createProgram([mockPath], compilerOptions, tsCreateStringSourceCompilerHost(mockPath, source, compilerOptions)); } 

संदर्भ

• jscodeshift
• टाइपप्रति
• कंपाइलर एपीआई का उपयोग करना
• टाइपप्रति-eslint
• tsconfig.json से How to get CompilerOptions
• मैं कैसे टाइप करूँ मेमोरी में टाइपस्क्रिप्ट कोड का एक स्निपेट?
• टाइप इंट्रेंस के लिए कंपाइलर एपीआई का उपयोग करें
• सामान्य फ़ंक्शन जानकारी प्राप्त करने के लिए टाइपस्क्रिप्ट कंपाइलर एपीआई का उपयोग कैसे करें, जैसे: रिटर्न टाइप / पैरामीटर?