Jak używać TypeScript?

Cześć, od kilku dni zaczynam robić coś w TypeScripcie. Pomyślałem, że będzie prościej i szybciej niż w JS... Hmmm, no cóż. Było ok, dopóki nie zachciało mi się importować innych bibliotek (a konkretnie AutoNumeric).

Odkąd używam AutoNumeric, mam same problemy z własnym kodem. Wynika to prawdopodobnie z kompletnej nieznajomości TypeScript i ogólnie frontu.
Mimo, że przeczytałem już mnóstwo rzeczy, nadal mam problemy i tak naprawdę próbuję coś ogarnąć bez zrozumienia. Metodą prób i błędów nie wiedząc czemu tak, a nie inaczej. W związku z tym, dalej nic nie działa. Więc, czy ktoś może mi wyjaśnić, jak noobowi, jak to powinno być?

Próbuję zrobić coś prostego.
Mam np. plik app.ts, który wygląda tak:

import AutoNumeric from "autonumeric"
export declare type EventHandler = () => void;

export class App {
    //jakieś tam statyczne metody
}

Jest to ładowane do HTMLa w taki sposób:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="module" src="~/js/app.js"></script>

Następnie mam drugi plik ts, docview.ts, np:

import { App } from "../scripts/app"

function onNodeClick(args)
{
   App.foo();
}

I teraz mam drugi plik html (który ładuje się przez ajax), gdzie mam coś w ten deseń:

<script type="module" src="~/js/docview.js"></script>

<treeview onclick="onNodeClick" />

TreeView tu widoczne to tak naprawdę jest razor'owy tagHelper i mniej więcej tak to wygląda po stronie Razor.

Próbuję to ogarnąć z różnymi ustawieniami tsconfig i ciągle mam różne problemy w runtime. A to, że nie wiadomo, co to jest export. A to, że onNodeClick nie jest zdefiniowane. A ostatnio, że failed to resolve module autonumeric specifier relative references must start with either / ./ or ../

Już mnie szlag jasny trafia. Czy ktoś mi może wyjaśnić, jak to powinno być ogarniane?

Co rozumiem:

• Jeśli plik ma dyrektywę import (lub export), to jest traktowany jako moduł i jego zawartość nie jest widoczna w globalnym scopie. W związku z tym mam porobione te exporty w swoich kodach.
• metodą prób i błędów doszedłem do tego, że jeśli w tsconfig.js w module podam "ES2015" to funkcja onNodeClick jest znajdywana... ale tylko jeśli zrobię window.onNodeClick
• biblioteka autonumeric chyba wymusza target = ES5 i esModuleInterop = true.

Co i jak powinienem zrobić, żeby móc normalnie używać tego wszystkiego? Nie potrzebuję tworzyć żadnych modułów, bo kod, który robię jest raczej pod konkretny projekt. Przynajmniej na tym etapie. HELPUNKU!

Moduły to feature javascripta, nie typescripta. Jeśli chcesz po oldschoolowemu nie korzystać z modułów to nie używaj "import" nigdzie to się nie aktywują.
Wyrzuć type="module" z <script type="module" src="~/js/app.js"></script> i powinien być dostępny w globalnym scope'ie.
Ogólnie jednak niestety korzysta się z import i export wszędzie co mi osobiście się nie podoba, ale daje to większą elastyczność - nie musisz się martwić że dwa skrypty będą gryźć się ze sobą korzystając z tych samych zmiennych globalnych, łatwiej używać bibliotek itp. ale moim zdaniem jest to słabo rozwiązane, kod jest strasznie zanieczyszczony importami i exportami, w dodatku importy muszą wskazywać na ścieżkę do pliku, jeśli zmienisz nazwę pliku to musisz pozmieniać wszystkie referencje (IDE to zazwyczaj robi automatycznie ale nadal zmiany wędrują do wielu plików zamiast jednego).
Moim zdaniem typescript powinien wprowadzić normalne namespace'y i ogarniać importy i exporty automatycznie przy kompilacji.

Mieszasz tutaj dwie metody ładowania skryptów. Jak w TS używasz importów to siłą rzeczy będzie on próbował je na coś przerobić. Jeśli pozbędziesz się importów to będzie marudził, że próbujesz użyć jakichś nieznanych typów z AutoNumeric. Nie wiem czy jest sposób, żeby z nim wygrać. Ja bym tutaj po prostu poszedł za ciosem i wrzucił Webpacka, on Ci z tego zrobi jeden plik, który będzie ładował się jak trzeba.

Czyli co? Mam sobie ogarnąć WebPacka, pousuwać type="module" i wszystko powinno działać? Czy to jest normalny i naturalny sposób na ogarnięcie takich rzeczy?

Tak, jak najbardziej, ciężko teraz znaleźć projekt, który nie używa Webpacka. To jest jeden krótki plik konfiguracyjny z ts-loaderem i wszystko powinno śmigać.