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とVue
Search
jiko21
February 01, 2019
Programming
4
1.8k
TypeScriptとVue
関西Node学園#5の登壇資料です!
jiko21
February 01, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Creating a Next.js-style Framework with Bun and Hono
jiko21
0
95
Array Grouping will soon be arriving at TypeScript
jiko21
0
100
Copying Array Methods arrived at TypeScript
jiko21
1
580
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
120
node:test will replace Jest?
jiko21
0
75
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
330
NestJS a progressive web framework
jiko21
3
2.1k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Programming
See All in Programming
もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです
sublimer
0
140
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
130
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
130
The Price of Micro Frontends… and Your Alternatives @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
360
高セキュリティ・高耐障害性・サブシステム化。そして2億円
tasukulab280
2
490
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
150
Drawing Heighway’s Dragon- Recursive Function Rewrite- From Imperative Style in Pascal 64 To Functional Style in Scala 3
philipschwarz
PRO
0
210
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
6
2k
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
890
10년 개발한 프로젝트. 애자일 업무 조직에서 모듈화 했던 경험을 공유합니다.
winterlovedev
PRO
0
490
Generative AI for Beginners .NETの紹介
tomokusaba
1
220
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
5
2.5k
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Writing Fast Ruby
sferik
628
61k
A designer walks into a library…
pauljervisheath
205
24k
Typedesign – Prime Four
hannesfritz
41
2.5k
Docker and Python
trallard
44
3.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Building Your Own Lightsaber
phodgson
104
6.3k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Producing Creativity
orderedlist
PRO
344
40k
Optimizing for Happiness
mojombo
377
70k
Transcript
TypeScript Vue @Daikids2
H G (Daiki Kojima) • 2 JG N • P
), • : 2 , : • 2 FDC • @ 2 • ( ) :
https://bit.ly/2MQ1qLL !!
Topics… • Vue • TypeScript •
Vue TypeScript …
Vue
… • vue-clideprecated (#"&) ! • !%$ vue+vuex
… • ! npm install -g @vue/cli
vue-cli • $"! ! • TypeScriptscss
• $" #% • ! • Class Component… • UI mode …
UI mode... • UI( ) !
vue-cli • $"! ! • TypeScriptscss
• $" #% • ! • Class Component… • UI mode …
TypeScript …
TypeScript?
TypeScript? • MicrosoftaltJS • • •
Interface(Java ) • …
• JS => •
TypeScript !
• addmul
function add (a, b) { return a + b; } function mul (a, b) { return a * b; } const a = 1; const b = "string"; add(a, b); mul(a, b); [Node2019]
… • add(a, b): ‘1string’() • 1string • mul(a,
b): ‘NaN’ () • 1 * ‘string’ …
• b addmul
function add (a, b) { return a + b; } function mul (a, b) { return a * b; } const a = 1; const b = ”1"; add(a, b); mul(a, b); [Node2019]
… • add(a, b): ‘11’() • 1string • mul(a, b):
1 • 1 number ! • !
! … • add(a, b): ‘11’() • 1string • mul(a,
b): 1 • 1 number ! • !
… • string !
function add(a: number, b: number): number { return a + b; } function mul(a: number, b: number): number { return a * b; } const a = 1; const b = "1"; console.log(add(a, b)); console.log(mul(a, b));
Interface • Javainterface +1 . / • Java*()%!'$ ,
TypeScript, • “ %!'$&"#$0- ?” !
Interface interface Hoge { firstName: string, lastName: string, action: ()
=> void,// }; const hoge: Hoge = { firstName: 'Daiki’, lastName: 'Kojima’, action: () => { console.log('hogehoge’); }, }; function doHoge(hoge: Hoge) { hoge.action(); } doHoge(hoge);// hogehoge
VueTypeScript …
… https://jp.vuejs.org/v2/guide/typescript.html
… • TypeScript Vue !!
!!
1: class-style component syntax • Vue: • Object
! • Class-style Vue: • !! • Class-style TypeScript! ()
<script> export default { name: 'HelloWorld’, props: { msg:
String } } </script>
Class-Style… <script> @Component export default class HelloWorld extends Vue {
@Prop() private msg!: string; } </script>
• TypeScript ! • Component String, Number
Vue …
Interface • Props • @Component({ props: {
members: { type: Object as () => Member[] }, }, })
Class Style… • … @Component export default class MemberList
extends Vue { @Prop() private members!: Member[] }
Vuex ?
• Tree<> vuex Store ! • Vuexmodule
!
Action… • Action"(Interface) ! • #
! !! doSignin({ commit }, userInfo: SigninForm) { services.singInWithUser(userInfo, (user: firebase.User) => { _procToken(commit, user); }); },
Mutation… • ! !! • StateComponent
Props ! getMembers(state: State): Member[] { return state.members; },
…
… • Vue TypeScript
• Class-Style Component!
TypeScript !