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
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
170
ファインディでのGitHub Actions活用事例
puku0x
9
3k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
410
Findyの開発生産性を上げるためにやったこと
puku0x
1
560
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
760
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
790
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.6k
Other Decks in Technology
See All in Technology
管理者しか知らないOutlookの裏側のAIを覗く#AzureTravelers
hirotomotaguchi
2
240
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
Culture Deck
optfit
0
330
事業継続を支える自動テストの考え方
tsuemura
0
300
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Writing Fast Ruby
sferik
628
61k
Unsuck your backbone
ammeep
669
57k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
GraphQLとの向き合い方2022年版
quramy
44
13k
Side Projects
sachag
452
42k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building Your Own Lightsaber
phodgson
104
6.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.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