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
350
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
420
Findyの開発生産性を上げるためにやったこと
puku0x
1
590
Angularコーディングスタイルガイドはいいぞ
puku0x
1
320
Nx CloudでCIを爆速にした話
puku0x
0
840
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
840
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.7k
Other Decks in Technology
See All in Technology
SFTPコンテナからファイルをダウンロードする
dip
0
110
TODAY 看世界(?) 是我們在看扣啦!
line_developers_tw
PRO
0
150
API の仕様から紐解く「MCP 入門」 ~MCP の「コンテキスト」って何だ?~
cdataj
0
150
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
280
自分を理解するAI時代の準備 〜マイプロフィールMCPの実装〜
edo_m18
0
100
讓測試不再 BB! 從 BDD 到 CI/CD, 不靠人力也能 MVP
line_developers_tw
PRO
0
140
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
300
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
belongadmin
2
140
OCI Oracle Database Services新機能アップデート(2025/03-2025/05)
oracle4engineer
PRO
1
140
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん!HCP Terraformって何?
mnakabayashi
0
120
産業機械をElixirで制御する
kikuyuta
0
160
新規プロダクト開発、AIでどう変わった? #デザインエンジニアMeetup
bengo4com
0
440
Featured
See All Featured
A designer walks into a library…
pauljervisheath
206
24k
Music & Morning Musume
bryan
46
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
BBQ
matthewcrist
89
9.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.8k
Into the Great Unknown - MozCon
thekraken
39
1.8k
Typedesign – Prime Four
hannesfritz
42
2.7k
Navigating Team Friction
lara
186
15k
Unsuck your backbone
ammeep
671
58k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
690
Side Projects
sachag
454
42k
Building Applications with DynamoDB
mza
95
6.4k
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