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
130
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
Is Xcode slowly dying out in 2025?
uetyo
1
260
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
350
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
210
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
350
技術同人誌をMCP Serverにしてみた
74th
1
630
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
11
2.9k
PicoRuby on Rails
makicamel
2
130
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
640
生成AI時代のコンポーネントライブラリの作り方
touyou
1
170
ふつうの技術スタックでアート作品を作ってみる
akira888
1
490
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Embracing the Ebb and Flow
colly
86
4.7k
Done Done
chrislema
184
16k
Agile that works and the tools we love
rasmusluckow
329
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Adopting Sorbet at Scale
ufuk
77
9.4k
Optimizing for Happiness
mojombo
379
70k
Bash Introduction
62gerente
614
210k
How to train your dragon (web standard)
notwaldorf
94
6.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
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 !