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
360
AngularではじめるTypeScript
FukuokaJS #8
https://fukuokajs.connpass.com/event/129155/
puku0x
May 15, 2019
Tweet
Share
More Decks by puku0x
See All by puku0x
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
200
ファインディでのGitHub Actions活用事例
puku0x
9
3.3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
430
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
330
Nx CloudでCIを爆速にした話
puku0x
0
850
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
850
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.8k
Other Decks in Technology
See All in Technology
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
3
170
初めてのAzure FunctionsをClaude Codeで作ってみた / My first Azure Functions using Claude Code
hideakiaoyagi
1
180
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
1.1k
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.2k
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
120
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.3k
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
coosuke
PRO
1
320
IIWレポートからみるID業界で話題のMCP
fujie
0
700
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
10
3.5k
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
170
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.1k
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
360
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
920
Rails Girls Zürich Keynote
gr2m
94
14k
Optimizing for Happiness
mojombo
379
70k
How STYLIGHT went responsive
nonsquared
100
5.6k
Done Done
chrislema
184
16k
Producing Creativity
orderedlist
PRO
346
40k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
What's in a price? How to price your products and services
michaelherold
245
12k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
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