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
AngularではじめるTypeScript
Search
puku0x
May 15, 2019
Technology
2
340
AngularではじめるTypeScript
FukuokaJS #8
https://fukuokajs.connpass.com/event/129155/
puku0x
May 15, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディでのGitHub Actions活用事例
puku0x
9
1.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
390
Findyの開発生産性を上げるためにやったこと
puku0x
1
490
Angularコーディングスタイルガイドはいいぞ
puku0x
1
200
Nx CloudでCIを爆速にした話
puku0x
0
630
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.6k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
740
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.2k
Nxはいいぞ
puku0x
0
690
Other Decks in Technology
See All in Technology
20240906_JAWS_Yamanashi_#1_leap_beyond_the_AWS_all_certifications
tsumita
1
190
Datadog を使ったプロダクトとクラウドの セキュリティモニタリング
mrtc0
0
550
エンジニアリングマネージャーが紐解く、事業視点から組織文化まで、包括的アプローチの探求 / READYFOR
9ma3r
14
2.3k
Azure Cosmos DB での時系列ログの運用と改善
sansantech
PRO
0
200
日経電子版から始まった内製開発の現在地と向き合っている課題/inhouse
nishiuma
0
240
RAGHack: Kickoff and RAG 101
pamelafox
0
240
EitherT_with_Future
aoiroaoino
1
860
20分で分かるIAM全機能 (拡大版) / 20240903-jawsug-yokohama-iam
opelab
3
130
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
420
セキュリティ監視の内製化 効率とリスク
mixi_engineers
PRO
7
790
RAGHack: Building RAG apps in Python
pamelafox
0
120
エンジニア視点で見る、 組織で運用されるデザインシステムにするには
shunya078
1
260
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.8k
The Language of Interfaces
destraynor
153
23k
How GitHub (no longer) Works
holman
309
140k
Unsuck your backbone
ammeep
667
57k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
25
5k
Fashionably flexible responsive web design (full day workshop)
malarkey
400
65k
Designing with Data
zakiwarfel
98
5k
Transcript
Angular(あるいはNestJS) ではじめるTypeScript Fukuoka JS #8
Noriyuki Shinpuku ng-fukuoka organizer @puku0x 2 VEGA corporation Co., Ltd.
3
TypeScript • Superset of JavaScript • Type safety • Strong
tools 4 TypeScript ES201x ES5
5 https://speakerdeck.com/pirosikick/the-state-of-javascript-in-fecf-2018-number-fec-fukuoka
6 https://2018.stateofjs.com/javascript-flavors/typescript/
7
8 Angular
Angular A platform for building modern Web Apps • Move
faster • Scale better • Reach further https://angular.io/ 9
10 Angular Protractor Forms PWA Augury Language Services Router Elements
CDK Universal Karma Labs Compiler i18n Http Material Animations CLI Angular products
11
Type safety 12 function add(a: number, b: number) { return
a + b; } add(1, 2); // 3 add(1, '2'); // Argument of type '"2"' is not assignable to parameter of type 'number'.
Interfaces 13 export interface Todo { id: number; text: string;
enabled: boolean; } export interface OnInit { ngOnInit(): void; }
Example: Life cycle hooks 14 @Component({...}) export class AppComponent implements
OnInit, OnDestroy { ngOnInit() {...} ngOnDestroy() {...} }
Component @Component({ selector: 'app-root', template: `<p>Hello, {{ title }} !</p>`,
}) export class AppComponent { title = 'Angular'; } 15
Decorator 16 @Component({ selector: 'app-sample', template: `<p>Hello, {{ title }}
!</p>`, }) export class SampleComponent { title = 'Angular'; }
tsconfig.json 17 { "compilerOptions": { "target": "es5", "experimentalDecorators": true }
}
Decorators 18 • @Component • @Directive • @Pipe • @Injectable
• @Input / @Output
Generics 19 @Component({ selector: 'app-button', template: ` <button (click)="clickButton.emit(true)">Click</button> `
}) export class SampleComponent { @Output() clickButton = new EventEmitter<boolean>(); }
Example: Dependency injection 20 @Injectable() export class UserService { constructor(private
http: HttpClient) {} fetchUsers() { return this.http.get<User[]>('/users'); } }
Example: RxJS 21 const a: Todo = { id: 1,
text: 'aaa', enabled: false }; const b: Todo = { id: 2, text: 'bbb', enabled: true }; const todos$ = from([a, b]); // Observable<Todo> todos$.pipe( filter(todo => todo.enabled), map(todo => todo.text) ).subscribe(text => console.log(text)); // 'bbb'
22 https://next.angular.io/getting-started
for backend? 23
24 https://nestjs.com
25
Controller 26 @Controller('cats') export class CatsController { @Get() findAll(): string
{ return 'This action returns all cats'; } }
Entity (TypeORM) 27 @Entity() export class Photo { @PrimaryGeneratedColumn() id:
number; @Column({ length: 500 }) name: string; }
@puku0x Noriyuki Shinpuku ng-fukuoka organizer Thank you! 28