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.7k
TypeScriptとVue
関西Node学園#5の登壇資料です!
jiko21
February 01, 2019
Tweet
Share
More Decks by jiko21
See All by jiko21
Array Grouping will soon be arriving at TypeScript
jiko21
0
23
Copying Array Methods arrived at TypeScript
jiko21
1
350
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
81
node:test will replace Jest?
jiko21
0
49
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
240
NestJS a progressive web framework
jiko21
3
1.8k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.4k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Composition API TypeScriptはVue.jsの夢を見るか?
jiko21
1
950
Other Decks in Programming
See All in Programming
Cloudflare Workersの環境を再現することについて
yusukebe
5
730
メール認証とRuby
uvb_76
0
110
before_rails_girls_after_rails_girls
maimux2x
0
300
Deep Dive into the Symfony Security Component
hhamon
1
180
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
840
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
Catch Up with Swift 5.10
ojun9
1
450
『データ可視化学入門』をPythonからRに翻訳した話(増強版)
bob3bob3
0
280
Faster, greener, and happier- why Quarkus should be your next tech stack
hollycummins
0
130
ADRを一年運用してみた/our_story_about_adr
hanhan1978
3
1.1k
decksh - a little language for decks
ajstarks
4
18k
iOS / Android ネイティブ 実装アプリの Flutter 化事例
mthiroshi
0
650
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Done Done
chrislema
178
15k
What's in a price? How to price your products and services
michaelherold
236
11k
Why You Should Never Use an ORM
jnunemaker
PRO
50
8.5k
Become a Pro
speakerdeck
PRO
8
4.2k
Designing with Data
zakiwarfel
94
4.8k
Ruby is Unlike a Banana
tanoku
95
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
319
20k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
The Power of CSS Pseudo Elements
geoffreycrofte
58
4.9k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
KATA
mclloyd
14
11k
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 !