TypeScript: Unterschied zwischen den Versionen
Codica (Diskussion | Beiträge) |
Codica (Diskussion | Beiträge) Markierungen: Mobile Bearbeitung Mobile Web-Bearbeitung |
||
(53 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
Zeile 3: | Zeile 3: | ||
== TypeScript und Node.js == | == TypeScript und Node.js == | ||
+ | === Allgemein === | ||
Siehe | Siehe | ||
* https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html | * https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html | ||
Zeile 8: | Zeile 9: | ||
* [https://www.typescriptlang.org/docs/handbook/compiler-options.html TypeScript Compiler Optionen] | * [https://www.typescriptlang.org/docs/handbook/compiler-options.html TypeScript Compiler Optionen] | ||
* [https://fettblog.eu/typescript-node-visual-studio-code/ Debugging TypeScript auf Node.js] | * [https://fettblog.eu/typescript-node-visual-studio-code/ Debugging TypeScript auf Node.js] | ||
+ | |||
+ | === Bauen eines npm-Moduls mit TypeScript === | ||
+ | |||
+ | Siehe | ||
+ | * https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-typescript-package-to-npm-89d93ff7bccd | ||
+ | * https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c | ||
== TypeScript und Jest == | == TypeScript und Jest == | ||
+ | |||
+ | npm install --save-dev jest ts-jest @types/jest | ||
+ | npx ts-jest config:init | ||
+ | |||
+ | Außerdem muss man in der <code>tsconfig.json</code> in compilerOptions => types noch "jest" aufnehmen. Das kann dann so aussehen: | ||
+ | "types": ["node","jest"], | ||
+ | |||
Siehe | Siehe | ||
+ | * https://jestjs.io/docs/getting-started#using-typescript | ||
* [[React]] zur Frontend-Entwicklung mit Jest | * [[React]] zur Frontend-Entwicklung mit Jest | ||
* [https://github.com/basarat/typescript-book/blob/master/docs/testing/jest.md Jest für TypeScript], basiert auf ts-jest | * [https://github.com/basarat/typescript-book/blob/master/docs/testing/jest.md Jest für TypeScript], basiert auf ts-jest | ||
Zeile 17: | Zeile 32: | ||
== TypeScript und einzelne Anwendungsfelder == | == TypeScript und einzelne Anwendungsfelder == | ||
+ | |||
+ | === TypeScript und Node.js === | ||
+ | |||
+ | Das Aufsetzen eines [[Nodejs]]-Projekts mit TypeScript wird bei [https://khalilstemmler.com/blogs/typescript/node-starter-project/ Khalil Stemmer ] geschildert. | ||
+ | |||
+ | Wie man eine Library mit TypeScript baut wird von [https://www.tsmean.com/articles/how-to-write-a-typescript-library/ Mean] geschildert. | ||
+ | |||
+ | Ein Kommandozeilen-Script in TypeScript auf Basis von Node.js zeigt | ||
+ | * https://itnext.io/how-to-create-your-own-typescript-cli-with-node-js-1faf7095ef89 | ||
+ | * https://dev.to/raphaelmansuy/boost-your-productivity-by-creating-your-own-cli-command-with-typescript-part-1-5g37 | ||
+ | * https://medium.com/geekculture/building-a-node-js-cli-with-typescript-packaged-and-distributed-via-homebrew-15ba2fadcb81. | ||
+ | |||
+ | |||
+ | ==== Beispiel für Library in Typescript ==== | ||
+ | Siehe | ||
+ | * https://itnext.io/how-to-create-your-own-typescript-cli-with-node-js-1faf7095ef89 | ||
+ | * [[TypeScript#TypeScript_und_Jest]] | ||
+ | |||
+ | Im Terminal: | ||
+ | mkdir $PROJEKT_VERZEICHNIS | ||
+ | cd $PROJEKT_VERZEICHNIS | ||
+ | npm init | ||
+ | npm install --save-dev ts-jest typescript jest @types/jest ts-node | ||
+ | npx tsc --init | ||
+ | |||
+ | Anpassen von package.json | ||
+ | "main":"./dist/index.js", | ||
+ | "scripts": { | ||
+ | "test": "jest", | ||
+ | "test:watch": "jest --watch", | ||
+ | "build": "tsc" | ||
+ | }, | ||
+ | |||
+ | Anpassen von tsconfig.json | ||
+ | "rootDir": "./src", | ||
+ | "types": ["jest"], | ||
+ | "declaration": true, | ||
+ | "declarationMap": true, | ||
+ | "outDir": "./dist", | ||
+ | |||
+ | |||
+ | Im Terminal | ||
+ | npx ts-jest config:init | ||
+ | |||
+ | In jest.config.js folgende Zeile in <code>module.exports={</code> einfügen: | ||
+ | testPathIgnorePatterns:["/node_modules/","/dist/"], | ||
+ | |||
+ | Einrichten von [[git]]. Erzeugen der Datei <code>.gitignore</code> im Projektverzeichnis: | ||
+ | node_modules/ | ||
+ | dist/ | ||
+ | |||
+ | Initialisierung und erster Commit: | ||
+ | git init | ||
+ | git status | ||
+ | git add . | ||
+ | git commit | ||
+ | |||
+ | ==== Beispiel für Kommandozeilen-Programm in Typescript ==== | ||
+ | |||
+ | Zuerst Schritte ausführen wie in [[TypeScript#Beispiel_f.C3.BCr_Library_in_Typescript]]. | ||
+ | |||
+ | Dann [https://www.npmjs.com/package/commander commander] installieren | ||
+ | npm install --save commander @commander-js/extra-typings | ||
+ | |||
+ | nodemon installieren: | ||
+ | npm install --save-dev nodemon @types/node | ||
+ | |||
+ | In package.json | ||
+ | "bin": { | ||
+ | "APPNAME":"./dist/index.js" | ||
+ | }, | ||
+ | "scripts": { | ||
+ | "test": "jest", | ||
+ | "test:watch": "jest --watch", | ||
+ | "build": "tsc", | ||
+ | "dev:version": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' 'src/index.ts' -- '--version'" | ||
+ | }, | ||
+ | |||
+ | APPNAME muss dabei durch den Namen des Kommandozeilenprogramms ersetzt werden. | ||
+ | |||
+ | In src/index.ts | ||
+ | |||
+ | #!/usr/bin/env node | ||
+ | import { program } from "commander"; | ||
+ | const pkg = require("../package.json"); | ||
+ | program | ||
+ | .name(pkg.name) | ||
+ | .version(pkg.version) | ||
+ | .description(pkg.description) | ||
+ | .action(()=>{ | ||
+ | console.log("hi") | ||
+ | }) | ||
+ | .parse(); | ||
+ | |||
+ | In <code>tsconfig.json</code>: | ||
+ | "types": ["jest","node"], | ||
+ | |||
+ | |||
+ | Statt commander kann man z.B. auch | ||
+ | * https://www.npmjs.com/package/@rushstack/ts-command-line | ||
+ | * [https://yargs.js.org/docs/ yargs] | ||
+ | * [https://github.com/mdbetancourt/soly soly], sehr gute TypeScript-Unterstützung, aber wohl nicht gepflegt | ||
+ | nutzen | ||
+ | |||
+ | === TypeScript literals ohne einen bestimmten String === | ||
+ | |||
+ | Siehe | ||
+ | * https://stackoverflow.com/questions/41476063/typescript-remove-key-from-type-subtraction-type | ||
=== typensicherer Event-Handling === | === typensicherer Event-Handling === | ||
Zeile 32: | Zeile 155: | ||
** https://cs.mcgill.ca/~mxia3/2016/11/18/Statically-typed-PostgreSQL-queries-and-typescript-schemats/ | ** https://cs.mcgill.ca/~mxia3/2016/11/18/Statically-typed-PostgreSQL-queries-and-typescript-schemats/ | ||
* [https://www.npmjs.com/package/pg-query-parser pg-query-parser] ermöglicht das Parsen einer SQL-Anweisung und anschließendes Bearbeiten mittels TypeScript/JavaScript. | * [https://www.npmjs.com/package/pg-query-parser pg-query-parser] ermöglicht das Parsen einer SQL-Anweisung und anschließendes Bearbeiten mittels TypeScript/JavaScript. | ||
+ | * [https://www.prisma.io/ Prisma], an ORM for TypeScript | ||
+ | |||
+ | * '''[https://github.com/gajus/slonik Slonik]''' nutzt neuere Features von ES6 und kann daher auch gut mit TypeScript genutzt werden. | ||
+ | ** Darauf aufbauend ermöglicht [https://www.npmjs.com/package/@slonik/typegen?activeTab=readme @slonik/typegen] automatisch TypeScript-Interfaces zu erzeugen, mit deren Hilfe das Ergebnis von SELECT-Querys typsicher verwendet werden kann. | ||
+ | ** [https://blog.logrocket.com/improving-type-safety-postgresql-slonik/ Beispielanwendung mit Slonik, TypeScript und Express] | ||
+ | |||
+ | === TypeScript - Laufzeit-Typ-Überprüfung === | ||
+ | |||
+ | Type Script kann zur Kompilierzeit Typensicherheit sicherstellen. Verschiedene Tools können auf Basis von TypeScript-Typen Prüfmethoden erstellen, um zur Laufzeit z.B. ein in JSON eingelesenen Typ auf Übereinstimmung mit dem TypeScript-Typ abzugleichen: | ||
+ | |||
+ | Eine Möglichkeit ist typescript-json-validator: | ||
+ | npm install --save-dev typescript-json-validator | ||
+ | |||
+ | |||
+ | In <code>src/types/types.ts</code> werden die zu validierenden Typen exportiert. | ||
+ | |||
+ | In der package.json wird unter "scripts" folgender Eintrag hinzugefügt: | ||
+ | "build:validators": "typescript-json-validator --defaultProps=false --useNamedExport --collection src/types/types.ts && sed -i -e \"s/export {/export type {/\" -e s/\\\"format\\\":\\\"fast\\\",// -e s/\\\"nullable\\\":true,// -e s/\\\"uniqueItems\\\":true,// -e s/\\\"unicode\\\":true,// src/types/types.validator.ts", | ||
+ | |||
+ | Der <code>sed</code>-Befehl sollte folgende Fehler vermeiden: | ||
+ | |||
+ | * "Das Argument vom Typ \"{ allErrors: true; coerceTypes: false; format: string; nullable: boolean; unicode: true; uniqueItems: boolean; useDefaults: false; }\" kann dem Parameter vom Typ \"Options\" nicht zugewiesen werden.\n Das Objektliteral kann nur bekannte Eigenschaften angeben, und \"\"format\"\" ist im Typ \"Options\" nicht vorhanden.", | ||
+ | * Das erneute Exportieren eines Typs erfordert bei Festlegung des Flags \"--isolatedModules\" die Verwendung von \"export type\".", | ||
+ | |||
+ | |||
+ | |||
+ | Siehe auch | ||
+ | |||
+ | * [https://github.com/sumukhbarve/monoduck/tree/main/src/tapiduck tAPIDuck] | ||
+ | * tRPC | ||
+ | * [https://www.npmjs.com/package/ts-auto-guard?activeTab=readme ts-auto-guard] | ||
+ | * [https://www.npmjs.com/package/typescript-json-validator typescript-json-validator] | ||
+ | ** benützt ajv und typescript-json-schema-generator | ||
+ | ** [https://emasuriano.com/blog/dynamic-types-validation-in-typescript Anleitung auf emasuriano.com] | ||
+ | * [https://learning-notes.mistermicheels.com/javascript/typescript/runtime-type-checking/ Ajv] prüft JSON gegen [[JSON Schema]] und [[JSON Type Definition]]. JSON Schema kann aus TypeScript-erstellt werden: | ||
+ | ** https://www.npmjs.com/package/ts-json-schema-generator | ||
+ | ** https://github.com/YousefED/typescript-json-schema | ||
+ | * https://github.com/woutervh-/typescript-is | ||
+ | * https://github.com/fabiandev/ts-runtime | ||
+ | * https://github.com/pelotom/runtypes | ||
+ | ** https://github.com/johngeorgewright/runtyping | ||
+ | |||
+ | Siehe auch | ||
+ | * https://learning-notes.mistermicheels.com/javascript/typescript/runtime-type-checking/ | ||
+ | * https://www.typescriptneedstypes.com/ | ||
+ | * https://tsoa-community.github.io/docs/ Type safe rest APIs | ||
+ | |||
+ | === TypeScript REST-API === | ||
+ | |||
+ | ==== TypeScript REST-API-Server auf Basis von HAPI ==== | ||
+ | |||
+ | Siehe | ||
+ | * https://hapi.dev/ | ||
+ | * https://hapi.dev/tutorials/?lang=en_US | ||
+ | * https://www.prisma.io/blog/backend-prisma-typescript-orm-with-postgresql-rest-api-validation-dcba1ps7kip3 | ||
+ | |||
+ | ==== mit Authentifizierung ==== | ||
+ | |||
+ | Siehe | ||
+ | * https://auth0.com/blog/use-typescript-to-create-a-secure-api-with-nodejs-and-express-getting-started/ | ||
+ | |||
+ | ==== TypeScript API from PostgresDB ==== | ||
+ | |||
+ | Siehe | ||
+ | * https://thin.dev/ | ||
+ | |||
+ | === TypeScript API erstellen === | ||
+ | |||
+ | Siehe | ||
+ | * https://trpc.io/ | ||
+ | * https://tawaldevuniverse.hashnode.dev/some-tips-when-using-t3-stack-unit-testing-with-trpc-procedures-environment-setup | ||
+ | * https://docs.stepci.com/guides/testing-trpc.html | ||
== Weiterführendes == | == Weiterführendes == | ||
Zeile 37: | Zeile 232: | ||
* [[React]] | * [[React]] | ||
* [[Jest]] | * [[Jest]] | ||
+ | * Blogs | ||
+ | ** [https://fettblog.eu/slides/the-typescript-converging-point/ fettblog.eu] - Einsatz von literal types | ||
-------- | -------- |
Aktuelle Version vom 18. Mai 2024, 19:56 Uhr
TypeScript ist eine JavaScript-Weiterentwicklung, die Typsicherheit bietet. TypeScript wird in JavaScript übersetzt.
TypeScript und Node.js
Allgemein
Siehe
- https://basarat.gitbooks.io/typescript/docs/quick/nodejs.html
- Beispielprojekt mit TypeScript, Node.js und PostgresSQL mit pg-promise
- TypeScript Compiler Optionen
- Debugging TypeScript auf Node.js
Bauen eines npm-Moduls mit TypeScript
Siehe
- https://medium.com/cameron-nokes/the-30-second-guide-to-publishing-a-typescript-package-to-npm-89d93ff7bccd
- https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c
TypeScript und Jest
npm install --save-dev jest ts-jest @types/jest npx ts-jest config:init
Außerdem muss man in der tsconfig.json
in compilerOptions => types noch "jest" aufnehmen. Das kann dann so aussehen:
"types": ["node","jest"],
Siehe
- https://jestjs.io/docs/getting-started#using-typescript
- React zur Frontend-Entwicklung mit Jest
- Jest für TypeScript, basiert auf ts-jest
- Vorschlag für Projektstruktur mit Jest
- Einfaches Boilerplate für TypeScript-Backend mit Jest-Tests
TypeScript und einzelne Anwendungsfelder
TypeScript und Node.js
Das Aufsetzen eines Nodejs-Projekts mit TypeScript wird bei Khalil Stemmer geschildert.
Wie man eine Library mit TypeScript baut wird von Mean geschildert.
Ein Kommandozeilen-Script in TypeScript auf Basis von Node.js zeigt
- https://itnext.io/how-to-create-your-own-typescript-cli-with-node-js-1faf7095ef89
- https://dev.to/raphaelmansuy/boost-your-productivity-by-creating-your-own-cli-command-with-typescript-part-1-5g37
- https://medium.com/geekculture/building-a-node-js-cli-with-typescript-packaged-and-distributed-via-homebrew-15ba2fadcb81.
Beispiel für Library in Typescript
Siehe
- https://itnext.io/how-to-create-your-own-typescript-cli-with-node-js-1faf7095ef89
- TypeScript#TypeScript_und_Jest
Im Terminal:
mkdir $PROJEKT_VERZEICHNIS cd $PROJEKT_VERZEICHNIS npm init npm install --save-dev ts-jest typescript jest @types/jest ts-node npx tsc --init
Anpassen von package.json
"main":"./dist/index.js", "scripts": { "test": "jest", "test:watch": "jest --watch", "build": "tsc" },
Anpassen von tsconfig.json
"rootDir": "./src", "types": ["jest"], "declaration": true, "declarationMap": true, "outDir": "./dist",
Im Terminal
npx ts-jest config:init
In jest.config.js folgende Zeile in module.exports={
einfügen:
testPathIgnorePatterns:["/node_modules/","/dist/"],
Einrichten von git. Erzeugen der Datei .gitignore
im Projektverzeichnis:
node_modules/ dist/
Initialisierung und erster Commit:
git init git status git add . git commit
Beispiel für Kommandozeilen-Programm in Typescript
Zuerst Schritte ausführen wie in TypeScript#Beispiel_f.C3.BCr_Library_in_Typescript.
Dann commander installieren
npm install --save commander @commander-js/extra-typings
nodemon installieren:
npm install --save-dev nodemon @types/node
In package.json
"bin": { "APPNAME":"./dist/index.js" }, "scripts": { "test": "jest", "test:watch": "jest --watch", "build": "tsc", "dev:version": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' 'src/index.ts' -- '--version'" },
APPNAME muss dabei durch den Namen des Kommandozeilenprogramms ersetzt werden.
In src/index.ts
#!/usr/bin/env node import { program } from "commander"; const pkg = require("../package.json"); program .name(pkg.name) .version(pkg.version) .description(pkg.description) .action(()=>{ console.log("hi") }) .parse();
In tsconfig.json
:
"types": ["jest","node"],
Statt commander kann man z.B. auch
- https://www.npmjs.com/package/@rushstack/ts-command-line
- yargs
- soly, sehr gute TypeScript-Unterstützung, aber wohl nicht gepflegt
nutzen
TypeScript literals ohne einen bestimmten String
Siehe
typensicherer Event-Handling
Siehe
TypeScript und PostgreSQL
TypeScript kann jedes JavaScript/Node.js-Framework für den Zugriff auf PostgreSQL nutzen. Darüber hinaus gibt es weitere Bibliotheken:
- https://www.npmjs.com/package/ts-postgres
- Postgres-Typescript - ein Generator, der SQL-Code in TypeScript-Code transformiert.
- Schemats erlaubt typensicheren Zugriffe auf SQL-Datenbanken
- pg-query-parser ermöglicht das Parsen einer SQL-Anweisung und anschließendes Bearbeiten mittels TypeScript/JavaScript.
- Prisma, an ORM for TypeScript
- Slonik nutzt neuere Features von ES6 und kann daher auch gut mit TypeScript genutzt werden.
- Darauf aufbauend ermöglicht @slonik/typegen automatisch TypeScript-Interfaces zu erzeugen, mit deren Hilfe das Ergebnis von SELECT-Querys typsicher verwendet werden kann.
- Beispielanwendung mit Slonik, TypeScript und Express
TypeScript - Laufzeit-Typ-Überprüfung
Type Script kann zur Kompilierzeit Typensicherheit sicherstellen. Verschiedene Tools können auf Basis von TypeScript-Typen Prüfmethoden erstellen, um zur Laufzeit z.B. ein in JSON eingelesenen Typ auf Übereinstimmung mit dem TypeScript-Typ abzugleichen:
Eine Möglichkeit ist typescript-json-validator:
npm install --save-dev typescript-json-validator
In src/types/types.ts
werden die zu validierenden Typen exportiert.
In der package.json wird unter "scripts" folgender Eintrag hinzugefügt:
"build:validators": "typescript-json-validator --defaultProps=false --useNamedExport --collection src/types/types.ts && sed -i -e \"s/export {/export type {/\" -e s/\\\"format\\\":\\\"fast\\\",// -e s/\\\"nullable\\\":true,// -e s/\\\"uniqueItems\\\":true,// -e s/\\\"unicode\\\":true,// src/types/types.validator.ts",
Der sed
-Befehl sollte folgende Fehler vermeiden:
- "Das Argument vom Typ \"{ allErrors: true; coerceTypes: false; format: string; nullable: boolean; unicode: true; uniqueItems: boolean; useDefaults: false; }\" kann dem Parameter vom Typ \"Options\" nicht zugewiesen werden.\n Das Objektliteral kann nur bekannte Eigenschaften angeben, und \"\"format\"\" ist im Typ \"Options\" nicht vorhanden.",
- Das erneute Exportieren eines Typs erfordert bei Festlegung des Flags \"--isolatedModules\" die Verwendung von \"export type\".",
Siehe auch
- tAPIDuck
- tRPC
- ts-auto-guard
- typescript-json-validator
- benützt ajv und typescript-json-schema-generator
- Anleitung auf emasuriano.com
- Ajv prüft JSON gegen JSON Schema und JSON Type Definition. JSON Schema kann aus TypeScript-erstellt werden:
- https://github.com/woutervh-/typescript-is
- https://github.com/fabiandev/ts-runtime
- https://github.com/pelotom/runtypes
Siehe auch
- https://learning-notes.mistermicheels.com/javascript/typescript/runtime-type-checking/
- https://www.typescriptneedstypes.com/
- https://tsoa-community.github.io/docs/ Type safe rest APIs
TypeScript REST-API
TypeScript REST-API-Server auf Basis von HAPI
Siehe
- https://hapi.dev/
- https://hapi.dev/tutorials/?lang=en_US
- https://www.prisma.io/blog/backend-prisma-typescript-orm-with-postgresql-rest-api-validation-dcba1ps7kip3
mit Authentifizierung
Siehe
TypeScript API from PostgresDB
Siehe
TypeScript API erstellen
Siehe
- https://trpc.io/
- https://tawaldevuniverse.hashnode.dev/some-tips-when-using-t3-stack-unit-testing-with-trpc-procedures-environment-setup
- https://docs.stepci.com/guides/testing-trpc.html
Weiterführendes
Siehe auch
- React
- Jest
- Blogs
- fettblog.eu - Einsatz von literal types