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
260
TypeScriptで幸せになろう
FukuokaJS #2 LT
puku0x
February 26, 2018
Tweet
Share
More Decks by puku0x
See All by puku0x
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
1.6k
Nx × AI によるモノレポ活用 〜コードジェネレーター編〜
puku0x
0
1.3k
ファインディにおけるフロントエンド技術選定の歴史
puku0x
2
240
ファインディでのGitHub Actions活用事例
puku0x
9
3.5k
Findyの開発生産性向上への取り組み ~Findyフロントエンドの場合~
puku0x
0
440
Findyの開発生産性を上げるためにやったこと
puku0x
1
610
Angularコーディングスタイルガイドはいいぞ
puku0x
1
370
Nx CloudでCIを爆速にした話
puku0x
0
890
Findyのフロントエンド設計刷新を通して得られた技術的負債との向き合い方
puku0x
1
1.8k
Other Decks in Technology
See All in Technology
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
310
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
Node.js 2025: What's new and what's next
ruyadorno
0
620
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
150
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
OAuthからOIDCへ ― 認可の仕組みが認証に拡張されるまで
yamatai1212
0
140
組織改革から開発効率向上まで! - 成功事例から見えたAI活用のポイント - / 20251016 Tetsuharu Kokaki
shift_evolve
PRO
1
170
ソースを読むプロセスの例
sat
PRO
15
9.4k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
670
[Codex Meetup Japan #1] Codex-Powered Mobile Apps Development
korodroid
2
1k
Featured
See All Featured
KATA
mclloyd
PRO
32
15k
Why Our Code Smells
bkeepers
PRO
340
57k
A designer walks into a library…
pauljervisheath
209
24k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
A better future with KSS
kneath
239
18k
For a Future-Friendly Web
brad_frost
180
10k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Scaling GitHub
holman
463
140k
Faster Mobile Websites
deanohume
310
31k
Typedesign – Prime Four
hannesfritz
42
2.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
The Language of Interfaces
destraynor
162
25k
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Ͱ ͤʹͳΖ͏ʂ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠