Strengthen Your Code With Types
#f2e18-ts-workshop
Senior Web Applications Engineer
SBSEG - Counterpart Portal*
Web Technology Enthusiast
var C = {
pronounce: function(language) {
if (language === 'Turkish') {
return 'J';
}
}
};
function pronounceThisGuysName(lang) {
return C.pronounce(lang) + 'a' + 'n';
}
pronounceThisGuysName('Turkish');
Senior Web Applications Engineer
SBSEG - Counterpart Portal*
A Brief History on JavaScript*
* Source: auth0.com
A Brief History on JavaScript*
* Source: auth0.com
General Purpose Language!
General Purpose Language - Wannabe
Simple
Interactions
SaaS
SPAs
Servers & Systems
Interoperability
Maybe we do need a general purpose language...
Also...
Maybe we do need a general purpose language...
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
Source: https://www.typescriptlang.org/
ECMAScript**
Frequent Releases
Nightly Builds (@typescript/next)
// intro_samples_js.js
function greet(name) {
return 'Welcome to the Front-End Summit, ' + name + '!';
}
// intro_samples_ts.ts
function greet(name: string): string {
return `Welcome to the Front-End Summit, ${name}!`;
}
Transpiled (target ECMAScript 5)
Transpiled (target ECMAScript 2015)
// intro_samples_ts.ts
function greet(name: string): string {
return `Welcome to the Front-End Summit, ${name}!`;
}
"use strict";
// intro_samples_ts.ts
function greet(name) {
return "Welcome to the Front-End Summit, " + name + "!";
}
"use strict";
// intro_samples_ts.ts
function greet(name) {
return `Welcome to the Front-End Summit, ${name}!`;
}
Fine, you can annotate types... So, what?
Well,
Catch Errors
Especially in complicated repos
Investigate Code
Automated static type checking
Example please...
OK, let's see it then
function greet(name: string): string {
return `Welcome to the Front-End Summit, ${name}!`;
}
greet(false);
16:01 $ tsc
intro_samples_ts.ts(10,7): error TS2345: Argument of type 'false' is not assignable to
parameter of type 'string'.
Dependencies
Dependencies
npm install -g typescript
tsc -v
cd ~/dev/FrontEndSummit2018
mkdir TypeScriptWorkshop
mkdir simple_examples
tsc --init