Dieser Crashkurs wurde im Frühjahr 2022 im Rahmen des Frontend Developer Programms (FEND) von opencampus gehalten. Dieses Repo ist nur noch als Referenz online und wird nicht mehr bearbeitet. Im main-Branch findet man den Stand vor der Migrierung zu TypeScript, der Stand nach der Migrierung ist im Branch talk festgehalten.
TypeScript is a language for application-scale JavaScript. TypeScript adds optional types to JavaScript that support tools for large-scale JavaScript applications for any browser, for any host, on any OS. TypeScript compiles to readable, standards-based JavaScript
TypeScript ist eine Programmiersprache, die JavaScript um ein statisches Typ-System erweitert. TypeScript-Code kann nicht vom Browser oder von Node ausgeführt werden, stattdessen wird der Code auf korrekte Verwendung der Typen überprüft und anschließend zu JavaScript kompiliert.
TypeScript verbessert vor allem die Developer Experience 👩💻 und findet nebenbei Bugs🐛!
- 🔥 Autocompletion
- 🔍 findet Fehler, damit ihr es nicht tun müsst
- 📄 "dokumentiert" euren Code
function sum(arr) {
return arr.reduce((currentSum, num) => currentSum + num);
}
// was kommt hier wohl raus?
const sumResult = sum([3, 3, "3"]);
console.log(sumResult);
// finde den Fehler
// wir wollen: "HI MUM!"
const shoutHi = "Hi Mum! ".trimsEnd().toLocalUppercase();
console.log(shoutHi);Check out the TypeScript Playground!
Eigentlich alle modernen Bundler (parcel, webpack, vite, ...) können ein Projekt direkt mit TypeScript aufsetzen. Nachträglich ist etwas mehr arbeitet erforderlich.
Wie man ein React + Vite Projekt zu TypeScript migriert:
-
Installiere TypeScript als Dev-Dependency:
yarn add -D typescript -
Füge die nötigen Config-Files hinzu. Diese können aus .config kopiert werden.
⚠️ tsconfig.jsonundtsconfig.node.jsonmüssen im Root Verzeichnis landen (wo auch euerpackage.jsonliegt).vite-env.d.tsmuss insrc/liegen.
cp .configs/tsconfig.json .configs/tsconfig.node.json .
cp .configs/vite-env.d.ts src/-
React ist nicht in TypeScript geschrieben. Die Types kann man sich aber manuell vom Definitely Typed holen.
yarn add -D @types/react -
Die Vite-Config kann als TypeScript-File angelegt. Dazu die Endung von
.jszu.tsändern. Dann werden allerdings die Types für node benötigt:yarn add --dev @types/node.
Damit VS Code etwas als TypeScript-Code erkennt, muss die Datei-Endung geändert werden:
.js -> .ts
.jsx -> .tsx
In GraphQL sind bereits definiert, sodass die Types für TypeScript (und weitere Programmiersprachen mit statistischen Typen) automatisch erzeugt werden können. Der Standard dafür ist inzwischen GraphQL Code Generator. Ein Tutorial für React, Apollo, Typescript findet ihr auch auf der Webseite.
- GraphQL-Code-Generator installieren für TypeScript, React, Apollo:
yarn add -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/introspection- GraphQL-Code-Generator initialisieren:
yarn graphql-codegen init
# interaktiv
# ? What type of application are you building? Application built with React
# ? Where is your schema?: https://api-eu-central-1.graphcms.com/v2/cl3d189141hkk01xpcesz7a2l/master # hier muss euer GraphQL-Endpunkt rein
# ? Pick plugins: # einfach ja, die Plugins haben wir vorher schon ausgewählt
# ? Where to write the output: src/generated/graphql.tsx
# ? Do you want to generate an introspection file? Yes
# ? How to name the config file? codegen.yml
# ? What script in package.json should run the codegen? codegen-
Füge einen
graphql/mit.graphql-Files mit euren Queries hinzu. Alle eure Queries landen dann in diesen Files. Codegen generiert alle Types und Hooks. Ihr müsst nur noch importieren und nichts doppelt pflegen. -
Optional: Fügt die GraphQL-Extension
mquandalle.graphzu VS Code für Syntax-Highlighting in.graphql-Files hinzu.
- 📘 🇬🇧 The TypeScript Handbook -- Offizielles Tutorial von Microsoft
- 📹 🇬🇧 Fun with Conditional Types - Titian Cernicova-Dragomir -- Tutorial zu allen fortgeschrittenen TypeScript-Themen (~3 h)
- 📹 🇩🇪 TypeScript lernen: Eine Einführung in 80 Minuten // deutsch -- guter Einstieg auf deutsch
- Deno -- Node-Alternative mit Fokus auf Sicherheit, kann TypeScript nativ ausführen
- A Proposal For Type Syntax in JavaScript -- Wird TypeScript ein fester Teil von JavaScript?
- A heroic new proposal for JavaScript // The Code Report -- Wem Videos lieber sind 😉