Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
TypeScriptはいいぞ （TypeScriptはいいぞ）
Slide 2
Slide 2 text
https://www.itmedia.co.jp/news/articles/2012/07/news146.html
Slide 3
Slide 3 text
こんな人たちに届いて欲しい JavaScriptを知っているけど、TypeScriptは良くわかってない TypeScriptを聞いたことある人 サーバーサイドメインでフロントあんまり興味ない人
Slide 4
Slide 4 text
自己紹介
Slide 5
Slide 5 text
koz (こじ/こず) @kozzzzz4 TOPGATE - 普段はフロント側 - Angular頑張ってます - サクナヒメ（？）やってます
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
こんな経験ありませんか？
Slide 8
Slide 8 text
Uncaught ReferenceError: hoge is not defined
Slide 9
Slide 9 text
Uncaught TypeError: Cannot read property 'fuga' of undefined
Slide 10
Slide 10 text
Uncaught ReferenceError: hoge is not defined
Slide 11
Slide 11 text
TypeScriptって何？
Slide 12
Slide 12 text
JavaScript 型
Slide 13
Slide 13 text
完全に理解した！ やったね！
Slide 14
Slide 14 text
TypeScriptはあなたを救います
Slide 15
Slide 15 text
救われる３つの内容 ● 型安全性 （バグが減らせる） ● 開発効率が上がる ● 開発のアプローチが変わる
Slide 16
Slide 16 text
型安全性 型安全性とは、型検査によって不正なプログラムが混入するのを防ぐこと。 つまり、「型安全性 ≒ バグが減る」。
Slide 17
Slide 17 text
開発効率が上がる IDEによるコード補完が効きます。 これもTypeScriptを使用することによる恩恵です。 つまらないタイプミスとはおさらばです。
Slide 18
Slide 18 text
アプローチが変わる 型を考える→ロジックを組む。 JavaScriptを使用していた時ではありえませんでした。 型を意識してコードを書くので、無理やりなコードは産まれにくいです。
Slide 19
Slide 19 text
全然難しくない型
Slide 20
Slide 20 text
（最初は）難しい型は使う必要無し type Pick = { [P in K]: T[P]; };
Slide 21
Slide 21 text
引数の型と戻り値を書くだけ function sum(a: number, b: number): number { return a + b; }
Slide 22
Slide 22 text
インターフェースを定義するだけ interface Person { name: string; age: number; married: boolean; } const person: Person = { name: 'xxx', age: 20, married: false };
Slide 23
Slide 23 text
ね？簡単でしょう？
Slide 24
Slide 24 text
これだけは守って欲しい
Slide 25
Slide 25 text
非any三原則 ※非any三原則（ひanyさんげんそく）とは、「 anyをもたない、つくらない、もちこまない」という三つの原則からな る、日本の国是。[要出典]
Slide 26
Slide 26 text
anyを指定した例 const a: any = 1; const b: any = 'b'; // コンパイラさんが仕事を放棄 const c = a * b;
Slide 27
Slide 27 text
any = コンパイラがエラーをだす仕事を放棄する anyは我々を救わない anyは危険 anyは闇の魔術 メーデー！メーデー！
Slide 28
Slide 28 text
闇の魔術に対する防衛術
Slide 29
Slide 29 text
ソースコードの平和を守ろう // tsconfig.json { "compilerOptions": { "strict": true, } }
Slide 30
Slide 30 text
tsconfig.jsonとは TypeScriptを使用したプロジェクトのルートディレクトリに配置されてるやつ。 コンパイルオプションなどを設定できる。 先ほどの例では、コンパイルオプションで”strict: true”を指定している。 { "compilerOptions": { "strict": true, }
Slide 31
Slide 31 text
strict: true ? “strict: true”は複数のコンパイルオプションが設定される。 特に”noImplicitAny”がまじエクスペクトパトローナム。
Slide 32
Slide 32 text
noImplicitAny ? 暗黙的なanyの混入を防いでくれる。 明示的にanyしているのを発見したら、レビューで弾こう！
Slide 33
Slide 33 text
因みにAngularでやるなら Strict Modeが用意されてます。 ng new [project-name] --stricta Angular用のコンパイルオプションも有効化されます。
Slide 34
Slide 34 text
完全に興味が湧いた後は？
Slide 35
Slide 35 text
まずは触ってみよう! https://www.typescriptlang.org/play
Slide 36
Slide 36 text
調べてみよう！ ● 公式サイト（https://www.typescriptlang.org/） ● TypeScript Deep Dive（https://basarat.gitbook.io/typescript/） ● サバイバルTypeScript（https://book.yyts.org/） ● TypeScriptの型入門（https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a）
Slide 37
Slide 37 text
書籍で学ぼう！ https://www.oreilly.co.jp/books/9784873119045/
Slide 38
Slide 38 text
おしまい。