Plugin tasarımı
- TypeScript kursu
- Uzman
- Ders 27/35
- 5 dk
Language service plugin iskeletini yazarsın.
Language service plugin nedir?
Bir language service plugin, TypeScript dil servisini süsleyen (decorate) bir fonksiyondur. ts.server.PluginCreateInfo alır ve bir ts.LanguageService döndürür. Plugin, tsconfig.json'daki plugins dizisine eklenerek etkinleşir.
import ts from "typescript";
function createPlugin(
info: ts.server.PluginCreateInfo
): ts.LanguageService {
const ls = info.languageService;
return { ...ls };
}
export = createPlugin;Plugin iskeleti
İskelet, mevcut dil servisini alır ve metodları sarar. getSemanticDiagnostics gibi metodları override edip önce ls'nin sonucunu alır, eklemeleri yapar ve döndürürsün.
return {
...ls,
getSemanticDiagnostics: function(fileName) {
const prior = ls.getSemanticDiagnostics(fileName);
return prior;
},
};Uygulama Plugin iskeleti
Bir plugin fonksiyonu yaz: ts.server.PluginCreateInfo alır, ts.LanguageService döndürür. info.languageService'ten ls al, getSemanticDiagnostics'i sar ve ls'nin diagnostics'ini olduğu gibi döndür. Bir test yaz: mock dil servisi 1 diagnostic döndürsün; plugin'i çağır ve diagnostic sayısını yazdır.
Başlangıç kodu
import * as ts from "typescript";
// Bir language service plugin fonksiyonu yaz:
// - PluginCreateInfo alır, LanguageService döndürür
// - info'daki dil servisini al
// - Semantic diagnostics metodunu sar ve ls'nin diagnostics'ini döndür
// Bir test yaz: mock dil servisi 1 diagnostic döndürsün
// Plugin'i çağır ve diagnostic sayısını yazdır.
// kodunu buraya yazÖrnek çözüm
import ts from "typescript";
function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
const ls = info.languageService;
return {
...ls,
getSemanticDiagnostics: function(fileName: string) {
return ls.getSemanticDiagnostics(fileName);
},
};
}
const fakeLs = {
getSemanticDiagnostics: function(_fileName: string): ts.Diagnostic[] {
return [{ category: ts.DiagnosticCategory.Error, code: 1, messageText: "test", file: undefined, start: 0, length: 1 } as ts.Diagnostic];
},
} as unknown as ts.LanguageService;
const info = { languageService: fakeLs, config: {} } as unknown as ts.server.PluginCreateInfo;
const plugin = createPlugin(info);
const diags = plugin.getSemanticDiagnostics("app.ts");
console.log(diags.length);Beklenen çıktı
1
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir language service plugin ne döndürür?
- ts.Diagnostic[]
- ts.SourceFile
- ts.LanguageService Doğru cevap
- ts.Program
Açıklama: Plugin, PluginCreateInfo alır ve süslenmiş bir LanguageService döndürür. Program, Diagnostic[] veya SourceFile döndürmez.
2 Dil servisini al
function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
const ls = info.____;
return { ...ls };
}function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
const ls = info.languageService;
return { ...ls };
}Açıklama: info.languageService mevcut LanguageService'i verir; ls ve service özellikleri yoktur, getService diye yöntem yoktur.
3 Plugin iskeleti parçaları
| Kavram | Anlamı |
|---|---|
PluginCreateInfo |
Plugin girdisi |
info.languageService |
Mevcut dil servisi |
ts.LanguageService |
Plugin çıktısı |
getSemanticDiagnostics |
Süslenen metod |