Slide 1
Slide 1 text
TypeScriptͰͤʹͳΖ͏
FukuokaJS #2
2018/02/23
Slide 2
Slide 2 text
(ג)Ϩεί ΤϯδχΞ
ng-fukuokaද
৽ٓါ
!QVLVY
Slide 3
Slide 3 text
JavaScriptॻ͍ͯ·͔͢ʁ
Slide 4
Slide 4 text
var a = 1;
a = a + ‘1’;
console.log(a / 2); // 5.5
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
ʮܕʯཉ͍͠ʂ
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
TypeScript
• MSͷAltJS
• ੩తܕ͚ + ES201xͷߏจ
ES6
TS
ES5
Slide 9
Slide 9 text
੩తܕ͚
• ม
• ؔ
text: string
function value(): number
let a: number;
a = 100; // OK
a = ‘100’; // Error !!
ίϯύΠϧ࣌
ʹఆ
Slide 10
Slide 10 text
ϓϦϛςΟϒܕ
• จࣈྻʢstringʣ
• ʢnumberʣ
• ਅِʢbooleanʣ
nullͱ͔undefinedͱ͔͋Δ
Slide 11
Slide 11 text
Anyܕ
• ैདྷͷJSͰͬͯͨͭ
• ઃఆͰېࢭ͢Δ͜ͱग़དྷΔ
value: any
Slide 12
Slide 12 text
AnyܕԿͰ͋ΓͳͷͰ
ཚ༻͠ͳ͍ͰͶ
Slide 13
Slide 13 text
TypeScriptͰ
ͤʹͳΖ͏
Slide 14
Slide 14 text
classॻ͍ͯ·͔͢ʁ
Slide 15
Slide 15 text
Ϋϥε
• ES2017൛
class Person {
constructor(name) {
this.name = name;
}
}
Ҿ૿͑Δͱ
Կॻ͘ͷ໘…
Slide 16
Slide 16 text
ίϯετϥΫλ
؆୯ʹॻ͖͍ͨ
Slide 17
Slide 17 text
Ϋϥε
• TypeScript൛
class Person {
constructor(public name?: string) {}
}
͋Γ͕ͱ͏ΞΫηεम০ࢠʂ
ʢͱΦϓγϣφϧʣ
Slide 18
Slide 18 text
ΦϒδΣΫτͷೖ
Slide 19
Slide 19 text
ΦϒδΣΫτͷೖ
• ES2017൛
let person = new Person();
person = {
name: ‘ςετଠ’,
gender: ‘MALE’, // উखʹՃ
};
มͳΦϒδΣΫτ
ೖͬͨΓ͠ͳ͍͔ͳ…
Slide 20
Slide 20 text
ಛఆͷΦϒδΣΫτ
ͷΈೖ͍ͤͨ͞
Slide 21
Slide 21 text
ΦϒδΣΫτͷೖ
• TypeScript൛
ͪΌΜͱ͍ͯ͘ΕΔʂ
let person = new Person();
person = {ɹ
name: ‘ςετଠ’,
gender: ‘MALE’, // Error
};
Slide 22
Slide 22 text
ΦϒδΣΫτͷೖ
• ΠϯλʔϑΣʔεΛͬͨ߹
interface IPerson {
name: string;
}
const person: IPerson = {ɹ
name: ‘ςετଠ’,
gender: ‘MALE’, // Error
};
͋Γ͕ͱ͏ΠϯλʔϑΣʔεʂ
Slide 23
Slide 23 text
ͷೖ
Slide 24
Slide 24 text
ͷೖ
• ES2017൛
class Person {
gender; // ‘MALE’ or ‘FEMALE’
}
มͳ͕
ೖͬͨΓ͠ͳ͍͔ͳ…
Slide 25
Slide 25 text
ಛఆͷͷΈ
ೖ͍ͤͨ͞
Slide 26
Slide 26 text
ͷೖ
• TypeScript൛
class Person {
gender: ‘MALE’ | ‘FEMALE’;
}
͋Γ͕ͱ͏ڞ༻ܕʂ
EnumͰ͍͍Αʂ
Slide 27
Slide 27 text
Union Typeʢڞ༻ܕʣ
• Ϧςϥϧ
• จࣈྻϦςϥϧ
type Grade = 1 | 2 | 3 | 4 | 5;
type Gender = ‘MALE’ | ‘FEMALE’;
Slide 28
Slide 28 text
ʮܕʯ͍͍ͬͯΑͶ
Slide 29
Slide 29 text
TypeScript
͡ΊͯΈ·ͤΜ͔ʁ
Slide 30
Slide 30 text
ڥͷ༻ҙ
$ npm install -g typescript
$ tsc -—init
$ tsc —-watch
• ίϯύΠϥͷΠϯετʔϧ
Slide 31
Slide 31 text
ओཁFWTSରԠ
• Angularʢඪ४ʣ
• ReactʢTSXʣ
• Vue.jsʢv2.5ʙʣ
Slide 32
Slide 32 text
IUUQTBOHVMBSKQ
AngularΑΖ͘͠Ͷʂ
Slide 33
Slide 33 text
TypeScriptͰ
ͤʹͳΖ͏ʂ
Slide 34
Slide 34 text
͝ਗ਼ௌ
͋Γ͕ͱ͏͍͟͝·ͨ͠