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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
puku0x
May 15, 2019
Technology
2
370
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
1.7k
生成AIではじめるテスト駆動開発
puku0x
0
960
実践!カスタムインストラクション&スラッシュコマンド
puku0x
2
2.8k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.5k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
280
ファインディでのGitHub Actions活用事例
puku0x
9
3.7k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
470
Findyの開発生産性を上げるためにやったこと
puku0x
1
640
Angularコーディングスタイルガイドはいいぞ
puku0x
1
410
Other Decks in Technology
See All in Technology
M&A 後の統合をどう進めるか ─ ナレッジワーク × Poetics が実践した組織とシステムの融合
kworkdev
PRO
1
460
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
Context Engineeringの取り組み
nutslove
0
360
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
13k
仕様書駆動AI開発の実践: Issue→Skill→PRテンプレで 再現性を作る
knishioka
2
670
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
15
93k
Tebiki Engineering Team Deck
tebiki
0
24k
こんなところでも(地味に)活躍するImage Modeさんを知ってるかい?- Image Mode for OpenShift -
tsukaman
0
140
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
430
Bill One 開発エンジニア 紹介資料
sansan33
PRO
5
17k
AI駆動開発を事業のコアに置く
tasukuonizawa
1
220
Cosmos World Foundation Model Platform for Physical AI
takmin
0
930
Featured
See All Featured
ラッコキーワード サービス紹介資料
rakko
1
2.3M
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
430
AI: The stuff that nobody shows you
jnunemaker
PRO
2
260
Test your architecture with Archunit
thirion
1
2.2k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
270
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
190
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
We Analyzed 250 Million AI Search Results: Here's What I Found
joshbly
1
730
Build your cross-platform service in a week with App Engine
jlugia
234
18k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
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