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
150
Unit test in deno
paulsouche
0
140
One spec to rule them all
paulsouche
1
270
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
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
JVM の仕組みを理解して PHP で実装してみよう
m3m0r7
PRO
1
240
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
360
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
6
1.6k
OpenNext + Hono on Cloudflare でイマドキWeb開発スタックを実現する
rokuosan
0
100
鯛変だったRubyKaigi 2025 ── それでも楽しかった!
pndcat
0
130
型安全なDrag and Dropの設計を考える
yudppp
5
640
がんばりすぎないコーディングルール運用術
tsukakei
1
120
ruby.wasmとWebSocketで遊ぼう!
lnit
0
150
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
530
Duke on CRaC with Jakarta EE
ivargrimstad
1
640
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
65
Done Done
chrislema
184
16k
The Cult of Friendly URLs
andyhume
78
6.4k
A better future with KSS
kneath
239
17k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Gamification - CAS2011
davidbonilla
81
5.3k
GraphQLとの向き合い方2022年版
quramy
46
14k
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