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
500
Other Decks in Programming
See All in Programming
Playwrightから始めるVisual Regression Testingのススメ by とっと
totto2727
2
1.8k
私の考える初学者がBlazorできるまでの学習方法
tomokusaba
1
240
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
110
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
370
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
3
1.3k
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
240
Rubyのobject_id
qnighy
6
1.3k
座談会 「Strict ConcurrencyとSwift 6が開く新時代: 私たちはどう生きるか?」
shiz
4
2.9k
Regular Expressions, REXML, Automata Learning
makenowjust
0
180
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
BQ+dbt+Lookerを用いた、月間800億件以上の広告リクエストに対するデータモデリング
hanon52_
4
990
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
450
Featured
See All Featured
Clear Off the Table
cherdarchuk
90
320k
Bash Introduction
62gerente
608
210k
KATA
mclloyd
27
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
122
18k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building Your Own Lightsaber
phodgson
101
5.9k
Typedesign – Prime Four
hannesfritz
38
2.3k
Statistics for Hackers
jakevdp
793
220k
Web development in the modern age
philhawksworth
204
10k
[RailsConf 2023] Rails as a piece of cake
palkan
44
4.6k
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