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
120
Array Grouping will soon be arriving at TypeScript
jiko21
0
120
Copying Array Methods arrived at TypeScript
jiko21
1
630
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
84
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
360
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
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
980
Team operations that are not burdened by SRE
kazatohiei
1
210
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
540
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
190
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
430
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
410
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
450
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.8k
Practical Orchestrator
shlominoach
188
11k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How to train your dragon (web standard)
notwaldorf
93
6.1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Documentation Writing (for coders)
carmenintech
72
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Bash Introduction
62gerente
614
210k
Site-Speed That Sticks
csswizardry
10
660
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Raft: Consensus for Rubyists
vanstee
140
7k
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 !