TypeScriptに興味を持って欲しいスライド

タグ typescript
スライド概要

<https://easy2.connpass.com/event/197872/> で発表したやつ。
TypeScriptはいいぞっていう気持ちを伝えるための資料。
元々は社内向けだったものを、社外向けにリメイクした。

profile-image

koz

@koz

作者について:

お試し!

スライド一覧
シェア
埋め込む

作成日

2021-03-09 21:24:57

各ページのテキスト

1. TypeScriptはいいぞ (TypeScriptはいいぞ)

2. https://www.itmedia.co.jp/news/articles/2012/07/news146.html

3. こんな人たちに届いて欲しい JavaScriptを知っているけど、TypeScriptは良くわかってない TypeScriptを聞いたことある人 サーバーサイドメインでフロントあんまり興味ない人

4. 自己紹介

5. - koz (こじ/こず) @kozzzzz4 普段はフロント側 Angular頑張ってます🔰 サクナヒメ(?)やってます

6.

7. こんな経験ありませんか?

8. Uncaught ReferenceError: hoge is not defined

9. Uncaught TypeError: Cannot read property 'fuga' of undefined

10. Uncaught ReferenceError: hoge is not defined

11. TypeScriptって何?

12. JavaScript 型

13. 完全に理解した! やったね!

14. TypeScriptはあなたを救います

15. 救われる3つの内容 ● 型安全性 (バグが減らせる) ● 開発効率が上がる ● 開発のアプローチが変わる

16. 型安全性 型安全性とは、型検査によって不正なプログラムが混入するのを防ぐこと。 つまり、「型安全性 ≒ バグが減る」。

17. 開発効率が上がる IDEによるコード補完が効きます。 これもTypeScriptを使用することによる恩恵です。 つまらないタイプミスとはおさらばです。

18. アプローチが変わる 型を考える→ロジックを組む。 JavaScriptを使用していた時ではありえませんでした。 型を意識してコードを書くので、無理やりなコードは産まれにくいです。

19. 全然難しくない型

20. (最初は)難しい型は使う必要無し type Pick<T, K extends keyof T> = { [P in K]: T[P]; };

21. 引数の型と戻り値を書くだけ function sum(a: number, b: number): number { return a + b; }

22. インターフェースを定義するだけ interface Person { name: string; age: number; married: boolean; } const person: Person = { name: 'xxx', age: 20, married: false };

23. ね?簡単でしょう?

24. これだけは守って欲しい

25. 非any三原則 ※非any三原則(ひanyさんげんそく)とは、「 anyをもたない、つくらない、もちこまない」という三つの原則からな る、日本の国是。 [要出典]

26. anyを指定した例 const a: any = 1; const b: any = 'b'; // コンパイラさんが仕事を放棄 const c = a * b;

27. メーデー!メーデー! any = コンパイラがエラーをだす仕事を放棄する anyは我々を救わない anyは危険 anyは闇の魔術

28. 闇の魔術に対する防衛術

29. ソースコードの平和を守ろう // tsconfig.json { "compilerOptions": { "strict": true, } }

30. tsconfig.jsonとは TypeScriptを使用したプロジェクトのルートディレクトリに配置されてるやつ。 コンパイルオプションなどを設定できる。 先ほどの例では、コンパイルオプションで”strict: true”を指定している。 { "compilerOptions": { "strict": true, }

31. strict: true ? “strict: true”は複数のコンパイルオプションが設定される。 特に”noImplicitAny”がまじエクスペクトパトローナム。

32. noImplicitAny ? 暗黙的なanyの混入を防いでくれる。 明示的にanyしているのを発見したら、レビューで弾こう!👮

33. 因みにAngularでやるなら Strict Modeが用意されてます。 ng new [project-name] --stricta Angular用のコンパイルオプションも有効化されます。

34. 完全に興味が湧いた後は?

35. まずは触ってみよう! https://www.typescriptlang.org/play

36. 調べてみよう! ● 公式サイト(https://www.typescriptlang.org/) ● TypeScript Deep Dive(https://basarat.gitbook.io/typescript/) ● サバイバルTypeScript(https://book.yyts.org/) ● TypeScriptの型入門(https://qiita.com/uhyo/items/e2fdef2d3236b9bfe74a)

37. 書籍で学ぼう! https://www.oreilly.co.jp/books/9784873119045/

38. おしまい。