Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularJS + Typescript === <3
Search
paul souche
January 29, 2015
Programming
0
340
AngularJS + Typescript === <3
My presentation @ngparis on angular + typescript
paul souche
January 29, 2015
Tweet
Share
More Decks by paul souche
See All by paul souche
Une API from scratch avec NestJS
paulsouche
0
160
Unit test in deno
paulsouche
0
140
One spec to rule them all
paulsouche
1
280
Analytics reverse engineering
paulsouche
0
140
TypeScript + lerna + yarn monorepos FTW
paulsouche
1
1.9k
Test like a boss with TypeScript
paulsouche
0
210
The internal modules strike back
paulsouche
0
120
Ma caisse enregistreuse en NodeJS
paulsouche
0
540
Other Decks in Programming
See All in Programming
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
540
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
Claude Codeの使い方
ttnyt8701
1
130
Benchmark
sysong
0
220
CursorはMCPを使った方が良いぞ
taigakono
0
130
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
240
SODA - FACT BOOK
sodainc
1
1.1k
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
120
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
190
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
770
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
280
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
It's Worth the Effort
3n
184
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Documentation Writing (for coders)
carmenintech
71
4.9k
Writing Fast Ruby
sferik
628
61k
Transcript
AngularJS + Typescript === <3
Me Myself & I Paul Souche Développeur Front-end @ @paulsouche
https://github.com/paulsouche
JavaScript types... NaN === NaN //false 0.1 + 0.2 ===
0.3 //false '' == [] //true '' //false, [] true [] + [] --> '' {} + [] --> '[object Object]' [] + {} --> 0 {} + {} --> NaN ...
JavaScript types... 6 types “undefined” “boolean” “string” “number” “object” “function”
6 falsy type undefined “undefined” false “boolean” ‘’ “string” 0 “number” null “object” NaN “number”
in AngularJS You can use : • isDefined • isUndefined
• isString • isNumber • isObject • isDate • isArray • isElement • isFunction • isPrototypeOf and...
Classes types methods : • contructor • toString.call() • stackOverflow
Conclusion No strong typings in JavaScript and won’t be better
in ES6
OK Typescript
OK Typescript how do you work ? function greeter(person: string)
{ return "Hello, " + person; } var user = "Jane User"; var universalAnswer = 42; document.body.innerHTML = greeter(user); document.body.innerHTML = greeter(universalAnswer); //throw
OK Typescript how do I strong type ? interface Person
{ firstname: string; lastname: string; } function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname; } var user = {firstname: "Jane", lastname: "User"}; document.body.innerHTML = greeter(user);
OK Typescript what about es6 classes ? class Student {
fullname : string; constructor(public firstname, public middleinitial, public lastname) { this.fullname = firstname + " " + middleinitial + " " + lastname; } } interface Person { firstname: string; lastname: string; } function greeter(person : Person) { return "Hello, " + person.firstname + " " + person.lastname; } var user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
OK Typescript what about es6 modules ? module Validation {
export interface StringValidator { isAcceptable(s: string): boolean; } var lettersRegexp = /^[A-Za-z]+$/; var numberRegexp = /^[0-9]+$/; export class LettersOnlyValidator implements StringValidator { isAcceptable(s: string) { return lettersRegexp.test(s); } } export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } }
OK Typescript how do I get the compiler ? npm
install -g typescript
OK Typescript how do I watch my code ? lint
: https://github.com/palantir/tslint https://github.com/palantir/grunt-tslint https://github.com/panuhorsmalahti/gulp-tslint compile : https://github.com/k-maru/grunt-typescript https://github.com/ivogabe/gulp-typescript
OK Typescript and my dependencies ? DefinitelyTyped Interfaces : •
AngularJS • ng-route • ng-resource • ng-animate • ng-cookies • angular-ui-router & ui-bootstrap • Underscore / Lodash / Jquery ...
Un peu de code ?
OK Typescript what’s wrong with you ?
OK Typescript what’s wrong with you ?
Q & A Special thanks : ng-paris David Rousset @Davrous
L’équipe ADEO AngularJS 1.6.5 You