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
150
Array Grouping will soon be arriving at TypeScript
jiko21
0
130
Copying Array Methods arrived at TypeScript
jiko21
1
680
SSRで動的に OGP画像を生成したい! 〜Cloudflare Workersから@vercel/og移行編〜
jiko21
0
130
node:test will replace Jest?
jiko21
0
90
どこでも動かすために… TypeScriptでライブラリ開発の すゝめ
jiko21
2
390
NestJS a progressive web framework
jiko21
3
2.2k
レガシーなフロントエンドをリプレイスする
jiko21
5
1.5k
Deep Dive Into Vue Composition API
jiko21
0
3.2k
Other Decks in Programming
See All in Programming
チームの境界をブチ抜いていけ
tokai235
0
230
iOSでSVG画像を扱う
kishikawakatsumi
0
170
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
310
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
320
CSC509 Lecture 06
javiergs
PRO
0
270
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
7
3.6k
理論と実務のギャップを超える
eycjur
0
180
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.2k
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
980
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
A better future with KSS
kneath
239
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
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 !