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
TypeScriptで幸せになろう
Search
puku0x
February 26, 2018
Technology
0
240
TypeScriptで幸せになろう
FukuokaJS #2 LT
puku0x
February 26, 2018
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
570
Angularコーディングスタイルガイドはいいぞ
puku0x
1
270
Nx CloudでCIを爆速にした話
puku0x
0
780
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
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.7k
AIエージェント入門
minorun365
PRO
33
19k
Pwned Labsのすゝめ
ken5scal
2
570
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
530
E2Eテスト自動化入門
devops_vtj
1
120
Two Blades, One Journey: Engineering While Managing
ohbarye
4
2.6k
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
220
開発者体験を定量的に把握する手法と活用事例
ham0215
0
120
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
220
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
3.2k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
240
Featured
See All Featured
KATA
mclloyd
29
14k
For a Future-Friendly Web
brad_frost
176
9.6k
Building Adaptive Systems
keathley
40
2.4k
Become a Pro
speakerdeck
PRO
26
5.2k
Designing for humans not robots
tammielis
250
25k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Done Done
chrislema
182
16k
Building an army of robots
kneath
303
45k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Transcript
TypeScriptͰͤʹͳΖ͏ FukuokaJS #2 2018/02/23
(ג)Ϩεί ΤϯδχΞ ng-fukuokaද ৽ٓါ !QVLVY
JavaScriptॻ͍ͯ·͔͢ʁ
var a = 1; a = a + ‘1’; console.log(a
/ 2); // 5.5
None
ʮܕʯཉ͍͠ʂ
None
TypeScript • MSͷAltJS • ੩తܕ͚ + ES201xͷߏจ ES6 TS ES5
੩తܕ͚ • ม • ؔ text: string function value(): number
let a: number; a = 100; // OK a = ‘100’; // Error !! ίϯύΠϧ࣌ ʹఆ
ϓϦϛςΟϒܕ • จࣈྻʢstringʣ • ʢnumberʣ • ਅِʢbooleanʣ nullͱ͔undefinedͱ͔͋Δ
Anyܕ • ैདྷͷJSͰͬͯͨͭ • ઃఆͰېࢭ͢Δ͜ͱग़དྷΔ value: any
AnyܕԿͰ͋ΓͳͷͰ ཚ༻͠ͳ͍ͰͶ
TypeScriptͰ ͤʹͳΖ͏
classॻ͍ͯ·͔͢ʁ
Ϋϥε • ES2017൛ class Person { constructor(name) { this.name =
name; } } Ҿ૿͑Δͱ Կॻ͘ͷ໘…
ίϯετϥΫλ ؆୯ʹॻ͖͍ͨ
Ϋϥε • TypeScript൛ class Person { constructor(public name?: string) {}
} ͋Γ͕ͱ͏ΞΫηεम০ࢠʂ ʢͱΦϓγϣφϧʣ
ΦϒδΣΫτͷೖ
ΦϒδΣΫτͷೖ • ES2017൛ let person = new Person(); person =
{ name: ‘ςετଠ’, gender: ‘MALE’, // উखʹՃ }; มͳΦϒδΣΫτ ೖͬͨΓ͠ͳ͍͔ͳ…
ಛఆͷΦϒδΣΫτ ͷΈೖ͍ͤͨ͞
ΦϒδΣΫτͷೖ • TypeScript൛ ͪΌΜͱ͍ͯ͘ΕΔʂ let person = new Person(); person
= {ɹ name: ‘ςετଠ’, gender: ‘MALE’, // Error };
ΦϒδΣΫτͷೖ • ΠϯλʔϑΣʔεΛͬͨ߹ interface IPerson { name: string; } const
person: IPerson = {ɹ name: ‘ςετଠ’, gender: ‘MALE’, // Error }; ͋Γ͕ͱ͏ΠϯλʔϑΣʔεʂ
ͷೖ
ͷೖ • ES2017൛ class Person { gender; // ‘MALE’ or
‘FEMALE’ } มͳ͕ ೖͬͨΓ͠ͳ͍͔ͳ…
ಛఆͷͷΈ ೖ͍ͤͨ͞
ͷೖ • TypeScript൛ class Person { gender: ‘MALE’ | ‘FEMALE’;
} ͋Γ͕ͱ͏ڞ༻ܕʂ EnumͰ͍͍Αʂ
Union Typeʢڞ༻ܕʣ • Ϧςϥϧ • จࣈྻϦςϥϧ type Grade = 1
| 2 | 3 | 4 | 5; type Gender = ‘MALE’ | ‘FEMALE’;
ʮܕʯ͍͍ͬͯΑͶ
TypeScript ͡ΊͯΈ·ͤΜ͔ʁ
ڥͷ༻ҙ $ npm install -g typescript $ tsc -—init $
tsc —-watch • ίϯύΠϥͷΠϯετʔϧ
ओཁFWTSରԠ • Angularʢඪ४ʣ • ReactʢTSXʣ • Vue.jsʢv2.5ʙʣ
IUUQTBOHVMBSKQ AngularΑΖ͘͠Ͷʂ
TypeScriptͰ ͤʹͳΖ͏ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠