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
160
ファインディでのGitHub Actions活用事例
puku0x
9
2.9k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
400
Findyの開発生産性を上げるためにやったこと
puku0x
1
550
Angularコーディングスタイルガイドはいいぞ
puku0x
1
250
Nx CloudでCIを爆速にした話
puku0x
0
740
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.7k
最高の開発体験を目指して 〜Findyのフロントエンド設計刷新〜
puku0x
0
780
VSCode GraphQL + GraphQL Code Generator による快適なフロントエンド開発
puku0x
0
2.5k
Other Decks in Technology
See All in Technology
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
2.2k
WantedlyでのKotlin Multiplatformの導入と課題 / Kotlin Multiplatform Implementation and Challenges at Wantedly
kubode
0
240
embedパッケージを深掘りする / Deep Dive into embed Package in Go
task4233
1
210
Godot Engineについて調べてみた
unsoluble_sugar
0
380
Azureの開発で辛いところ
re3turn
0
240
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
140
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
150
駆け出しリーダーとしての第一歩〜開発チームとの新しい関わり方〜 / Beginning Journey as Team Leader
kaonavi
0
120
2025年のARグラスの潮流
kotauchisunsun
0
790
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
520
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Building Your Own Lightsaber
phodgson
104
6.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Language of Interfaces
destraynor
155
24k
Gamification - CAS2011
davidbonilla
80
5.1k
Why Our Code Smells
bkeepers
PRO
335
57k
What's in a price? How to price your products and services
michaelherold
244
12k
Navigating Team Friction
lara
183
15k
How to train your dragon (web standard)
notwaldorf
89
5.8k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Producing Creativity
orderedlist
PRO
343
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.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