Es muss nicht immer TypeScript sein
Warum TypeScript?
„Javascript ist doof“
- Javascript ist voller unerklärlicher Verhalten und Bugs
- Javascript hat ein schwache Typisierung - was zu Bugs führt
- Javascript mit einem dynamischem Typ-System zu versehen war ein Fehler
WAT??
[] + [] // => '' (leerer String)
[] + {} // => '[object Object]'
{} + [] // => 0
Array(6).join('wat' - 1) + ' Batman!'
// "NaNNaNNaNNaNNaN Batman!"
CUZ
[] + []
// Besseres Beispiel
[1,2] + [3,4]
[1,2].toString() + [3,4].toString()
[1,2].join(',') + [3,4].join(',')
'1,2' + '3,4' // => '1,23,4'
CUZ
[] + {}
[].toString() + {}.toString()
'' + '[object Object]' // => '[object Object]'
CUZ
{} + []
+[]
+([].join(','))
Number('')
Number(false) // => 0
CUZ
Array(6).join('wat' - 1) + ' Batman!'
Array(6).join(NaN) + ' Batman!'
Array(6).join(NaN.toString()) + ' Batman!'
Array(6).join('NaN') + ' Batman!'
// "NaNNaNNaNNaNNaN Batman!"
NaN.toString().repeat(6) + ' Batman!'
// "NaNNaNNaNNaNNaN Batman!"
I don’t think we need to “fix” types in JS (like TypeScript or Flow), I think we just need to understand them better and more clearly communicate our types in JS.
Ich denke nicht, dass wir Typen in JS "reparieren" müssen (wie TypeScript oder Flow), ich denke, wir müssen sie nur besser verstehen und unsere Typen in JS klarer kommunizieren.
Warum TypeScript?
„TypeScript verhindert Bugs“
Whilst not conclusive, the lack of evidence in the charts that more advanced type languages are going to save us from writing bugs is very disturbing.
Obwohl dies nicht abschließend ist, ist der Mangel an Beweisen in den Diagrammen, dass fortgeschrittenere typisierte Sprachen uns vor dem Schreiben von Fehlern bewahren, sehr verstörend.
Die Wahrheit
- In Bezug auf Fehlerdichte und Code-Qualität scheint Typensicherheit keinen großen Unterschied zu machen.[1]
- Dynamische Typen bedeuten nicht das es keine Typprüfung gibt[2]
- Die Typkorrektheit garantiert nicht die Programmkorrektheit.[3]
- TypeScript ist in der Lage nur 20% aller "Public-Bugs" zufinden[4]
Test Driven Development
- The Springer: Fehlerdichte nimmt zwischen 40% und 90% ab.[1]
- IEEE: Fehlerdichte nimmt zwischen 40% und 80% ab[2]
- IEEE: Produktivität wird um bis zu 30% gesteigert[2]
Was TypeScript schwierig macht
„TypeScript ist doof“
- TypeScript ist nicht vollständig kompatibel zu idiomatischem Javascript
- Type Overhead
- Syntax Noise
Typescript felt like the obvious answer to a problem only backend devs, who were begrudgingly having to do far more frontend code, had.
Typescript schien die offensichtliche Antwort auf ein Problem zu sein, das nur Backend-Entwickler hatten, die widerwillig viel mehr Frontend-Code schreiben mussten.
Warum TypeScript?
- Dokumentation
- Tools! Tools! .... TOOLS!
- Developer Experience
Typechecks ohne TypeScript aber mit Typescript
- Typescript-Kompiler und Javascript-Dateien
- JSDoc
- Typings anlegen
Javascript-Dateien
// @ts-check
$ tsc src/*.js --allowJs --checkJs
// jsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"checkJs": true,
},
"exclude": ["node_modules"]
}
TS-Check
JSDoc
// Inline types
/** @type {number} */
const count = 12;
/** @enum {number} */
const HTTPStatusCodes = {
ok: 200,
forbidden: 403,
notFound: 404,
}
// Defining functions
/**
* @param {string} url
* @returns {Promise<JSON>}
*/
function loadData(url) {
return fetch(url).then(({ json }) => json());
}
// Defining objects
/** @type {{id: string, firstname: string, lastname: string, vita: string, gender: string}} */
const aPerson = {
id: '67asdga67td',
firstname: 'Max',
lastname: 'Mustermann',
vita: 'lorem',
gender: 'm',
};
JSDoc
- Generics
- typeof
- Klassen erweitern
Typings
$ npm install @types/jsdom
$ npm install jsdom
/** @type {JSDOM} */
const dom = new JSDOM('<!doctype html><html><body></body></html>');
Eigene Typings
// person.d.ts
export type Person = {
id: string;
firstname: string;
lastname: string;
vita: string;
gender: string;
}
/** @typedef { import('./types/person.d') } Person */
/** @type {Person} */
const aPerson = {
id: '67asdga67td',
firstname: 'Max',
lastname: 'Mustermann',
vita: 'lorem',
gender: 'm',
};
// person.d.ts
declare namespace App {
export type Person = {
id: string;
firstname: string;
lastname: string;
vita: string;
gender: string;
}
}
/** @type {App.Person} */
const aPerson = {
id: '67asdga67td',
firstname: 'Max',
lastname: 'Mustermann',
vita: 'lorem',
gender: 'm',
};
Using TypeScript in VS @code via jsconfig and JSDoc comments is more than just for transitional use. I could see this becoming the preferred way to use TypeScript for many devs because you effectively just write ES X code and in many cases don’t even need a compilation step.
Die Verwendung von TypeScript in VS @code über jsconfig und JSDoc-Kommentare ist mehr als nur eine vorübergehende Verwendung. Ich denke, dass dies für viele Entwickler die bevorzugte Art ist, TypeScript zu verwenden, da Sie effektiv nur ES X-Code schreiben und in vielen Fällen nicht einmal einen Kompilierungsschritt benötigen.
