静的解析で実現したいことから 逆算して学ぶ TypeScript Compiler

TSKaigi 2025の登壇資料です

Transcript

1. 2025-05-23 TSKaigi 2025 ੩తղੳͰ࣮ݱ͍ͨ͜͠ͱ͔Β
 ٯࢉֶͯ͠Ϳ
 TypeScript Compiler ߵ૥ ࿨࢘ / Kazushi Konosu 1
2. ߵ૥ ࿨࢘ / Kazushi Konosu • Software Engineer & Engineering Manager,
 LINEϠϑʔגࣜձࣾ • ڈ೥ TypeScript Remove (tsr)ͱ͍͏OSSΛ
 ։ൃ͠·ͨ͠ 1.2k GitHub Stars ⭐ 2
3. ੩తղੳ • ϓϩάϥϜΛ࣮ߦͤͣʹιʔείʔυ͔Β৘ใΛಡΈऔΔ͜ͱ • ྫ • ܕνΣοΫ (tsc) • Ϧϯτ (ESLint) • ϑΥʔϚοτ (Prettier) ੩తղੳͷՄೳੑ͸ແݶେʂ 3
4. ߏจ໦ ίʔυ ৘ใ ίʔυ ߏจ໦ 4
5. function add(a: number, b: number) { return a + b; } 5
6. └── SourceFile "function add(a: number, b: number) { return a + b; }" ├── SyntaxList "function add(a: number, b: number) { return a + b; }" │ └── FunctionDeclaration "function add(a: number, b: number) { return a + b; }" │ ├── FunctionKeyword "function" │ ├── Identifier "add" │ ├── OpenParenToken "(" │ ├── SyntaxList "a: number, b: number" │ │ ├── Parameter "a: number" │ │ │ ├── Identifier "a" │ │ │ ├── ColonToken ":" │ │ │ └── NumberKeyword "number" │ │ ├── CommaToken "," │ │ └── Parameter "b: number" │ │ ├── Identifier "b" │ │ ├── ColonToken ":" │ │ └── NumberKeyword "number" │ ├── CloseParenToken ")" │ └── Block "{ return a + b; }" │ ├── FirstPunctuation "{" │ ├── SyntaxList "return a + b;" │ │ └── ReturnStatement "return a + b;" │ │ ├── ReturnKeyword "return" │ │ ├── BinaryExpression "a + b" │ │ │ ├── Identifier "a" │ │ │ ├── PlusToken "+" │ │ │ └── Identifier "b" │ │ └── SemicolonToken ";" │ └── CloseBraceToken "}" └── EndOfFileToken "" 6
7. ߏจ໦ ίʔυ ৘ใ ίʔυ ߏจ໦ ߏจ໦ͷੜ੒ɺ୳ࡧ(traverse)ɺग़ྗͷํ๏͚ͩΘ͔Ε͹͍͍ʂ 7
8. ੩తղੳͰ࣮ݱ͍ͨ͜͠ͱ͔Β
 ٯࢉֶͯ͠Ϳ
 TypeScript Compiler 8
9. TypeScript CompilerΛબͿཧ༝ ESTreeϕʔε TypeScript Compiler ॆ࣮ͨ͠ΤίγεςϜ ✅ ૬ରతʹॆ࣮͍ͯ͠ͳ͍ΤίγεςϜ ଟ͘ͷࢀߟࢿྉ ✅ ݶΒΕͨυΩϡϝϯτ ίʔυͷʮҙຯʯͷ׆༻͕ݶఆత ܕɺࢀরؔ܎ͳͲҙຯ΁ͷΞΫηε ✅ ෳ਺ͷґଘؔ܎ ୯Ұͷґଘؔ܎ ✅ 9
10. • ESTreeΛϕʔεʹͦΕͧΕͷπʔϧ͕ಠ࣮ࣗ૷Λ͍ͯ͠Δ • ESLint/PrettierͷϓϥάΠϯͰࡁΉ಺༰Ͱͳ͍৔߹ɺෳࡶͳґଘؔ܎͕ඞཁ • ref. un fi ed.js, @typescript-eslint/parser • ڧݻͳܕʹΑΔॻ͖ຯͷΑ͞ TypeScript CompilerΛબͿཧ༝ (2) // node: ts.Node if (ts.isIdentifier(node)) { // node: ts.Identifier } ֶशۂઢ͸ٸ͕ͩ׆༻͢ΔՁ஋͕͋Δ 10
11. ֓೦ͷ੔ཧ Ξϓϩʔνͷํ๏ ࣮ફ τϐοΫ 11
12. ֓೦ͷ੔ཧ Ξϓϩʔνͷํ๏ ࣮ફ τϐοΫ 12
13. ֓ཁ • TypeScript Compiler͸ɺؔ਺ܕϓϩάϥϛϯάͷӨڹΛड͚͍ͯΔ • Interfaceͱfactoryؔ਺ͷ૊Έ߹Θͤ • interface SourceFile ͱ createSourceFile() • interface Program ͱ createProgram() • interface TypeChecker ͱ program.getTypeChecker() 13
14. Node • ͢΂ͯͷߏจཁૉͷϕʔεͱͳΔInterface • node.kind: ts.SyntaxKind ϓϩύςΟͰछྨΛ൑ผ • posͱendͰϑΝΠϧ಺ʹ͓͚ΔҐஔ৘ใΛอ࣋ • .parent .getChildren() Ͱྡ઀͢Δ௖఺ΛࢀরͰ͖Δ • ϊʔυͷੜ੒͸ߏจͷछྨ͝ͱʹߦ͏ • ex. ts.factory.createIdentifier() ͢΂ͯͷϊʔυ͸֊૚ߏ଄Λܗ੒͠ɺϓϩάϥϜͷߏจΛදݱ͢Δ 14
15. SourceFile • ୯ҰϑΝΠϧͷߏจ໦Λදݱ • NodeΛܧঝͨ͠Interface • ϑΝΠϧϨϕϧͷϝλσʔλΛอ࣋ • string͔Β ts.createSourceFile() ʹΑͬͯੜ੒Ͱ͖Δ 15
16. Program • Programͱ͸ • ෳ਺SourceFileͷू߹ମ • ϓϩδΣΫτશମΛදݱ • ϑΝΠϧؒͷؔ܎ੑΛղܾ • ܕνΣοΫͷίϯςΩετΛఏڙ • Program͸ඞͣ͠΋ϑΝΠϧγεςϜʹΞΫηεඞཁ͸ͳ͍ • ts.CompilerHostΛ౉͢͜ͱͰΦϯϝϞϦͰϑΝΠϧΛදݱͰ͖Δ 16
17. TypeChecker • program.getTypeChecker() • ܕղܾͱݕূͷΤϯδϯ • ܕਪ࿦ͷ࣮ߦ • γϯϘϧղܾͷఏڙ • ܕޓ׵ੑͷνΣοΫ TypeCheckerΛ͔ͭ͏͜ͱͰɺߏจ͚ͩͰ͸ͳ͍ίʔυ͕࣋ͭҙຯΛ׆༻Ͱ͖Δ 17
18. Symbol & Type • Symbol checker.getSymbolAtLocation() • એݴͱࢀরΛ݁ͼ͚ͭΔ • ࢀরؔ܎Λ௥੻ • Type checker.getTypeAtLocation() • ࣜ΍એݴͷܕ৘ใ • ਪ࿦ͷ݁Ռ 18
19. LanguageService • Programʹ࣌ؒ࣠ͱΑΓߴϨϕϧͳAPIΛ௥Ճͨ֓͠೦ • ߴ౓ϨϕϧAPI • languageService.findReferences() • ϑΝΠϧͷฤूঢ়ଶΛѻ͏ • LanguageService΋ಉ༷ʹts.LanguageServiceHostΛ౉͢͜ͱͰɺ
 ΦϯϝϞϦͰϑΝΠϧΛѻ͑Δ LanguageService͸VSCodeͷTypeScriptݴޠػೳͷϕʔεͳͷͰɺ
 VSCodeͰ͖Δ͜ͱ͸API͔Β΋ݺͼग़ͤΔ 19
20. ֓೦ͷ࢖͍෼͚ • ୯ҰϑΝΠϧͷΈ • ߏจղੳͷΈ → ts.createSourceFile()Λ࢖༻ • ܕ৘ใ΋ඞཁ → ProgramΛ࡞੒ͯ͠ program.getTypeChecker() • ෳ਺ϑΝΠϧʢϓϩδΣΫτશମʣ • Ұ౓͖Γ → ProgramΛ࢖༻ • ߋ৽Λ؅ཧ͢Δඞཁ͕͋Δ → LanguageServiceΛ࢖༻ ඞཁ࠷খݶͷબ୒Λߦ͏͜ͱͰɺύϑΥʔϚϯεͱγϯϓϧ͞Λ࣮ݱ 20
21. ֓೦ͷ੔ཧ Ξϓϩʔνͷํ๏ ࣮ફ τϐοΫ 21
22. • ts.createProgram()΍ts.createSourceFile()ͱ͍ͬͨ
 factoryؔ਺Ͱίʔυ͔Βߏจ໦΁ͷม׵͸Ͱ͖ͨ • ୳ࡧΛߦ͏ʹ͸visitorΛ࢖༻ • ϊʔυͷࢠଙʹରͯ͠ɺ࠶ؼతʹvisitorΛݺͿ ղੳ 22
23. import ts from 'typescript'; const code = `const hello = 'world';`; const sourceFile = ts.createSourceFile('file.ts', code, ts.ScriptTarget.Latest); const variableNames: string[] = []; const visit = (node: ts.Node) => { if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name)) { variableNames.push(node.name.text); } ts.forEachChild(node, visit); }; sourceFile.forEachChild(visit); console.log(variableNames); VisitorύλʔϯͰ৘ใΛऩू͢Δ͜ͱ͕Ͱ͖Δ 23
24. ίʔυฤूɾੜ੒ • TransformerͱPrinterΛ૊Έ߹ΘͤΔ • Transformer • VisitorΛ࢖ͬͯฤू͍ͨ͠ߏจཁૉͷϊʔυΛஔ͖׵͑Δ • Printer • TransfomerΛద༻ͨ͠ߏจ໦Λจࣈྻͱͯ͠ग़ྗ͢Δ • ϑΥʔϚοτ͕ࣦΘΕΔ 24
25. TransformerͱPrinterΛ࢖͏͜ͱͰɺίʔυΛੜ੒Ͱ͖Δ import ts from 'typescript'; const code = `const hello = 'world';`; const sourceFile = ts.createSourceFile('file.ts', code, ts.ScriptTarget.Latest); const transformer = (context: ts.TransformationContext) => (node: ts.Node): ts.Node => { if (ts.isStringLiteral(node) && node.text === 'world') { return ts.factory.createStringLiteral('edited'); } return ts.visitEachChild( node, (node) => transformer(context)(node), context, ); }; const result = ts.transform(sourceFile, [transformer]); const printer = ts.createPrinter(); const transformedCode = printer.printFile( result.transformed[0] as ts.SourceFile, ); console.log(transformedCode); 25
26. ίʔυฤूɾੜ੒ (2) • Transformer/PrinterͰ͸ϑΥʔϚοτ่͕ΕΔ • TextChangeͱ͍͏มߋΛѻ͏Interface • TypeScript಺෦Ͱ͸NodeͷҐஔ৘ใΛ΋ͱʹ
 TextChangeΛੜ੒ͯ͠ɺͦΕΛద༻͍ͯ͠Δ • PublicͰ͸ͳ͍ͷͰࣗલͰ࣮૷͢Δඞཁ͕͋Δ interface TextSpan { start: number; length: number; } interface TextChange { span: TextSpan; newText: string; } Ref. https://github.com/microsoft/TypeScript/blob/b504a1eed45e35b5f54694a1e0a09f35d0a5663c/src/services/textChanges.ts#L1364
 Ref. https://github.com/line/tsr/blob/06a0ef5e63739e78fa51aba49b63e898f5a6b7d3/lib/util/applyTextChanges.ts#L29ͨͩ͠ద༻͢ΔࡍʹվߦΛௐ੔͍ͯ͠Δ 26
27. Ξϓϩʔνͷ࢖͍෼͚ ໨త Ξϓϩʔν ߏจͷղੳ SourceFile + visitor ܕ৘ใͳͲίʔυͷҙຯʹؔ͢Δ৘ใͷ׆༻ Program + TypeChecker + visitor ίʔυੜ੒ SourceFile/Program + visitor + factory + Printer ϑΥʔϚοτΛҡ࣋ͨ͠ฤू SourceFile/Program + visitor + factory + ฤूϩ δοΫ ίʔυฤूʹ௥ै͢Δඞཁ͕͋Δͱ͖ LanguageService + ඞཁʹԠ্ͯ͡ه findReferencsͳͲͷߴϨϕϧͳAPI͕ඞཁ LanguageService + ඞཁʹԠ্ͯ͡ه 27
28. ֓೦ͷ੔ཧ Ξϓϩʔνͷํ๏ ࣮ફ τϐοΫ 28
29. Idea: importจͷҰׅॻ͖׵͑ • tscon fi g pathsͷઃఆΛফ͢ɾNode.js ESMʹ४ڌ͢Δ֦ுࢠͷ௥Ճ • ࢖༻͢ΔAPI • ts.createSourceFile() • TypeChecker • TextChange 29
30. Idea: OpenAPIఆ͔ٛΒϥϯλΠϜίʔυੜ੒ • OpenAPI͔Βܕఆ͚ٛͩͰ͸ͳ͘ɺϥϯλΠϜίʔυΛੜ੒͢Δ • ࢖༻͢ΔAPI • ts.createSourceFile() • Transformer/Printer 30
31. ·ͱΊ • TypeScript Compilerͷجຊ֓೦ • Node, SourceFile, Program, TypeChecker, LanguageService • ໨తʹԠͨ͡Ξϓϩʔν • Visitor, Transformer/Printer, TextChangeΛ࢖ͬͨࣗલͷฤूϩδοΫ • ࣮ફͷΞΠσΞ 31
32. Further Reading • ެࣜCompiler APIϨϑΝϨϯε
 https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API • ίʔυ͕಺෦తʹͲͷΑ͏ʹදݱ͞Ε͍ͯΔ͔Λ֬ೝ͢Δ
 https://ts-ast-viewer.com/ • ࠓ೔ͷൃදͷ಺༰͕࣮ࡍͷϥΠϒϥϦʹͲͷΑ͏ʹ׆༻͞Ε͍ͯΔ͔ΛݟΔ
 https://github.com/line/tsr 32
33. Thank you! 🧑💻 X @kazushikonosu github.com/kazushisan 33
34. import ts from 'typescript'; const sourceFile = ts.createSourceFile( 'add.ts', 'function add(a: number, b: number) { return a + b; }', ts.ScriptTarget.Latest, true, ); function printNode(node: ts.Node, prefix: string = '', isLast: boolean = true) { const connector = isLast ? '└── ' : '├── '; const childPrefix = prefix + (isLast ? ' ' : '│ '); const kind = ts.SyntaxKind[node.kind]; const text = node.getText(sourceFile).replace(/\n/g, '\\n'); console.log(`${prefix}${connector}${kind} "${text}"`); const children = node.getChildren(sourceFile); children.forEach((child, index) => { printNode(child, childPrefix, index === children.length - 1); }); } printNode(sourceFile); declare var node: ts.Node if (ts.isIdentifier(node)) { node // do something } ts.createLanguageService({}) Appendix 1:
 ߏจ໦ΛՄࢹԽ͢Δίʔυ • P6ͷߏจ໦ΛtreeίϚϯυ෩ʹ
 දࣔ͢Δྫ 34
35. Appendix 2: tscon fi gΛಡΈࠐΉ import ts from 'typescript'; const { config } = ts.readConfigFile( 'path/to/tsconfig.json', ts.sys.readFile, ); const { options, fileNames } = ts.parseJsonConfigFileContent( config, ts.sys, 'path/to/project/root', ); const program = ts.createProgram(fileNames, options); • ൃදͰ͸tscon fi g.jsonΛѻΘͣʹ TypeScript CompilerͷύϥϝʔλΛ௚઀ ࢦఆ͕ͨ͠ɺtscon fi g.jsonΛಡΈࠐΜͰ ֎෦Խ͢Δ͜ͱ΋Ͱ͖Δ • tscon fi g.jsonͷϑΟʔϧυ͸APIͰ͸࢖༻ ͞Ε͍ͯͳ͍ͨΊɺ ts.CompilerOptionsΛຬͨ͢Φϒ δΣΫτʹม׵͢Δ࡞ۀ͕ඞཁ 35