Slide 1
Slide 1 text
TypeScript
Vue
@Daikids2
Slide 2
Slide 2 text
H G (Daiki Kojima)
• 2 JG N
• P ),
• : 2 , :
• 2 FDC
• @ 2
• ( ) :
Slide 3
Slide 3 text
https://bit.ly/2MQ1qLL
!!
Slide 4
Slide 4 text
Topics…
• Vue
• TypeScript
• VueTypeScript
…
Slide 5
Slide 5 text
Vue
Slide 6
Slide 6 text
…
• vue-clideprecated (#"&)
!
• !%$
vue+vuex
…
•
!
npm install -g @vue/cli
Slide 7
Slide 7 text
vue-cli
• $"!
!
• TypeScriptscss
• $"
#%
•
!
• Class Component…
• UI mode
…
Slide 8
Slide 8 text
UI mode...
•
UI(
)
!
Slide 9
Slide 9 text
vue-cli
• $"!
!
• TypeScriptscss
• $"
#%
•
!
• Class Component…
• UI mode
…
Slide 10
Slide 10 text
TypeScript
…
Slide 11
Slide 11 text
TypeScript?
Slide 12
Slide 12 text
TypeScript?
• MicrosoftaltJS
•
•
• Interface(Java
)
•
…
Slide 13
Slide 13 text
• JS =>
•
TypeScript
!
Slide 14
Slide 14 text
•
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]
Slide 15
Slide 15 text
…
• add(a, b): ‘1string’()
• 1string
• mul(a, b): ‘NaN’ ()
• 1 * ‘string’
…
Slide 16
Slide 16 text
• 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]
Slide 17
Slide 17 text
…
• add(a, b): ‘11’()
• 1string
• mul(a, b): 1
•
1
number!
• !
Slide 18
Slide 18 text
! …
• add(a, b): ‘11’()
• 1string
• mul(a, b): 1
•
1
number!
• !
Slide 19
Slide 19 text
…
•
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));
Slide 20
Slide 20 text
Interface
• Javainterface +1
./
• Java*()%!'$ ,
TypeScript,
• “
%!'$&"#$0-?”
!
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
VueTypeScript
…
Slide 23
Slide 23 text
…
https://jp.vuejs.org/v2/guide/typescript.html
Slide 24
Slide 24 text
…
• TypeScriptVue
!!
Slide 25
Slide 25 text
!!
Slide 26
Slide 26 text
1: class-style component syntax
• Vue:
• Object
!
• Class-styleVue:
•
!!
• Class-style
TypeScript! ()
Slide 27
Slide 27 text
export default {
name: 'HelloWorld’,
props: {
msg: String
}
}
Slide 28
Slide 28 text
Class-Style…
@Component
export default class HelloWorld extends Vue {
@Prop() private msg!: string;
}
Slide 29
Slide 29 text
• TypeScript
!
•
Component
String, Number
Vue
…
Slide 30
Slide 30 text
Interface
• Props
•
@Component({
props: {
members: {
type: Object as () => Member[]
},
},
})
Slide 31
Slide 31 text
Class Style…
•
…
@Component
export default class MemberList extends Vue {
@Prop() private members!: Member[]
}
Slide 32
Slide 32 text
Vuex
?
Slide 33
Slide 33 text
• Tree<>vuex
Store
!
• Vuexmodule
!
Slide 34
Slide 34 text
Action…
• Action"(Interface)
!
• #
!!!
doSignin({ commit }, userInfo: SigninForm) {
services.singInWithUser(userInfo,
(user: firebase.User) => {
_procToken(commit, user);
});
},
Slide 35
Slide 35 text
Mutation…
•
!
!!
• StateComponentProps
!
getMembers(state: State): Member[] {
return state.members;
},
Slide 36
Slide 36 text
…
Slide 37
Slide 37 text
…
•
Vue
TypeScript
• Class-Style Component!
Slide 38
Slide 38 text
TypeScript
!