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
330
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
110
One spec to rule them all
paulsouche
1
230
Analytics reverse engineering
paulsouche
0
130
TypeScript + lerna + yarn monorepos FTW
paulsouche
1
1.8k
Test like a boss with TypeScript
paulsouche
0
200
The internal modules strike back
paulsouche
0
110
Ma caisse enregistreuse en NodeJS
paulsouche
0
510
Other Decks in Programming
See All in Programming
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
120
Compose Multiplatform과 Ktor로 플랫폼의 경계를 넘어보자
kwakeuijin
0
220
複数プロダクトの技術改善・クラウド移行に向き合うチームのフレキシブルなペア・モブプログラミングの実践 / Flexible Pair Programming And Mob Programming
honyanya
0
150
M5Stack に色々な M5ユニットをつないで扱う為の新たなアプローチ
gob
0
200
CSC509 Lecture 02
javiergs
PRO
0
160
AWS CDKを用いたセキュアなCI/CDパイプラインの構築 / Build a secure CI/CD pipeline using AWS CDK
seike460
PRO
3
500
What is TDD?
urakawa_jinsei
1
200
sqlcを利用してsqlに型付けを
kamiyam
0
230
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
4
140
Vue :: Better Testing 2024
up1
1
370
NEWTにおけるiOS18対応の進め方
ryu1sazae
0
180
為醫療加裝Python的引擎
cclai999
0
270
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
263
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
48k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
Producing Creativity
orderedlist
PRO
341
39k
Docker and Python
trallard
40
3k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Building Your Own Lightsaber
phodgson
102
6k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
We Have a Design System, Now What?
morganepeng
49
7.1k
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