Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TypeScript

Recruit
August 19, 2021

 TypeScript

2021年度リクルート エンジニアコース新人研修の講義資料です

Recruit

August 19, 2021
Tweet

More Decks by Recruit

Other Decks in Technology

Transcript

  1. ߨࢣͦͷ1 - ໊শɿ૔ݟ༸ี ʢ@Quramy / ͘ΒΈʔ ͱݺ͹ΕΕΔ͜ͱ͕ଟ͍ʣ - ॴଐɿԣஅΤϯδχΞϦϯά෦ ASG

    - ৬ྺɿϦΫϧʔτʹདྷͨͷ͸2020/2݄ɻ ࠃ಺SIer -> Webܥϕϯνϟʔ2ࣾʹ͍·ͨ͠
  2. TakepepeͱTypeScript - ʮ࣮ફTypeScriptʯͱ͍͏ຊΛաڈॻ͖·ͨ͠ɻ - TypeScript ͕ΒΈͷͪΐͬͱͨ͠ΞΠσΟΞͳͲ΋ npm publish ͨ͠Γͯ͠·͢ -

    TypeScript ͸͡Ίͨͷ͸ Conditional Types ͕͖͔͚ͬ - Conditional Types ͗͢͢͝໘ന͍ʂ - ͨ·ͨ·ٕज़ॻయʹग़ల͢ΔػձͱॏͳΔ - ͨ·ͨ·ٕज़ॻయͰग़൛ࣾͷਓͷ໨ʹͱ·Δ - ࣥච͢Δ͜ͱʹͳͬͨ - ࠷ۙ͸ಉਓࢽ͸ॻ͍͍ͯͳ͍Ͱ͕͢ɺͨ·ʹ React ΍ TS ͷهࣄΛ zenn ʹ౤ߘͨ͠Γͯ͠·͢
  3. ໨࣍ 1. TypeScript is Կ 2. TypeScriptʹ৮ΕΔ ※ 3. ܕͷૢ࡞

    ※ 4. ϥΠϒϥϦͷܕఆٛ 5. TypeScriptͱϞδϡʔϧ 6. TypeScriptͱϏϧυΤίγεςϜ
  4. ͍ͬͺ͍͋ΔͧAltJS - AltJS͍Ζ͍Ζ - Flow Type, CoffeeScript, Dart, Reason, Hexa,

    Elm, JSX (not React) , ScalaJS, ClojureScript, asm.js, GopherJS, GWT, etc… - ϒϥ΢βͰಈ͔ͤΔݴޠ͸جຊతʹJavaScript͚ͩͳͷͰ※1 ɺੈͷதʹ͸ ͍ͬͺ͍Alt JS͕͋Γ·͢ - ※1 ࠷ۙ͸WebAssembly΋͋Δ͚ͲɺͦΕ͸আ֎ͨ͠ͱͯ͠ - Ұ࣌ظ͸Ӎޙͷ஛ͷࢠͷ͝ͱ͘ཚཱ͍ͯ͠·͕ͨ͠ɺ࠷ۙ͸TypeScriptʹ ܉഑্͕͕Γͭͭ͋Δؾ഑ 13
  5. ͦͦ͜͜ਓؾ΋͋Δ Developers who are developing with the language or technology

    and have expressed interest in continuing to develop with it 14 https://insights.stackoverflow.com/survey/2020#technology-most-loved-dreaded-and-wanted-languages
  6. ·ͣ͸৮ͬͯΈΑ͏ - TypeScript Playground ʹ͓खܰ؀ڥ͕͋Γ·͢ - ৮ͬͯΈΑ͏Playgroundɿ - Run /

    LogsͰ࣮ߦΛ֬ೝ͠Α͏ - JSλϒ͔ΒτϥϯεύΠϧ͞ΕͨJavaScriptίʔυΛ֬ೝ͠Α͏ 16
  7. ܕνΣοΫ͕Ͱ͖Δ - JavaScript͸ಈతܕ෇ݴޠ - ࣮ߦ͢Δ·ͰΘ͔Βͳ͍͜ͱ͕͍ͬͺ͍ 😇 🤔 hoge͸είʔϓʹఆٛ͞Εͨม਺ ʁ 🤔

    hoge͸objectͰɺfooͱ͍͏ϓϩύςΟ͕ଘࡏ͍ͯ͠Δʁ 🤔 hoge.foo͸ؔ਺ͱ࣮ͯ͠ߦͰ͖Δʁ console.log(hoge.foo()); 18
  8. ܕνΣοΫ͸બ΂Δ - TypeScript as ઴࣍తܕ෇ͷΑ͍ͱ͜Ζɿ - طଘͷJavaScript͚ͩͰॻ͔ΕͨιʔείʔυʹঃʑʹܕΛ෇͚͍͚ͯΔ - ৽نϓϩδΣΫτͰ͸ɺ࠷ॳ͔Β੩తܕ෇ݴޠͱಉ͡Α͏ʹ࢖͏͜ͱ΋ Ͱ͖Δ

    - TypeScript as ઴࣍తܕ෇ͷ஫ҙ఺ɿ - ॴḨ͸ޙ෇ͷػߏɻJavaScriptͷࣗ༝౓ͱ૬൓͢ΔՕॴ΋͋Δ͠ɺӕͭ ͍ͯܕγεςϜ͕ὃ͞ΕΔ͜ͱ͢Β͋Γಘ·͢ 20
  9. ஫ऍͰ͖Δͱ͜Ζ - ଞʹ΋ : ܕ໊ Ͱ஫ऍͰ͖Δͱ͜Ζ͸৭ʑ͋Γ·͢ const a: string =

    "hoge"; let b: string; var c: string; function d(): string { return "hoge"; } class MyClass { e: string = ""; } 34
  10. Primitive types - ਺஋Ҏ֎ʹ΋ɺจࣈྻ΍ਅِ஋ͳͲ΋primitive typeͱͯ͠༻ҙ͞Ε͍ͯ ·͢ const bool: boolean =

    true; const num: number = 100; const str: string = "hogehoge"; const nullObj: null = null; const undefVal: undefined = undefined; 36
  11. Object / Array type const obj: { name: string, age:

    number } = { name: "Bob", age: 20, }; const arr: number[] = [1, 2, 3]; 38
  12. ϛχԋश - 📝 ҎԼΛຬͨ͢ GetUser ͱ͍͏ؔ਺ܕΛॻ͍ͯΈͯ - input: จࣈྻܕ -

    output: ࣍ͷߏ଄Ͱఆٛ͞ΕΔΑ͏ͳUserܕ id จࣈྻ name จࣈྻ age ਺஋ isMarried ਅِ஋ 40
  13. Class type TodoItem = { name: string; }; interface Service

    { getTodos(): TodoItem[]; } class ConcreteService implements Service { private _todos: TodoItem[]; constructor(initialTodos: TodoItem[]) { this._todos = initialTodos; } getTodos() { return this._todos; } } 42
  14. JavaScriptͷClassʹແ͍ػೳ - ϑΟʔϧυɾϝιουʹՄࢹੑ͕ઃఆͰ͖Δ - private / protected / public -

    ※ TypeScriptʹ͓͚Δprivateߏจ͸Soft PrivateɻͦͷؾʹͳΕ͹ΞΫ ηεͰ͖Δ - ந৅Ϋϥε / ந৅ϝιουΛఆٛͰ͖Δ - InterfaceΛ࣮૷Ͱ͖Δ 43
  15. ୅ೖՄೳͱ͸Կ͔ - assignableͷྫ: - showMessageؔ਺͸ɺจࣈྻܕͰ͋Δmessageͱ͍͏ϑΟʔϧυΛ ࣋ͬͨܕͰ͋Ε͹ɺԿͰ΋୅ೖՄೳ type SomeType = {

    message: string; }; function showMessage(obj: SomeType) { console.log(obj.message); } showMessage({ message: “Hello!" }); 48
  16. Interface v.s. Type alias - ϑΟʔϧυ΍ϝιουΛ࣋ͭΦϒδΣΫτͷܕΛఆٛͰ͖Δͱ͍͏ҙຯ Ͱɺtype aliasͱinterfaceʹ͸ػೳͷॏෳ͕͋Γ·͢ interface IHoge

    { message: string; onChangeMessage(cb: (msg: string) => void): void; } type HogeType = { message: string; onChangeMessage(cb: (msg: string) => void): void; }; let hoge1: IHoge; let hoge2: HogeType; /* IHogeͱHogeType͸૒ํʹassignable */ hoge1 = hoge2; hoge2 = hoge1; 51
  17. Interface v.s. Type alias - 📝 લϖʔδͷ IHoge interface ͱ

    HogeType ʹ͍ͭͯɺPlayground্Ͱ ͷҧ͍Λ୳ͯ͠Έͯ - 📝 લϖʔδͷྫʹɺԼهΛ௥هͨ͠ͱ͖ʹͲ͏ͳΔ͔֬ೝͯ͠Έͯ interface IHoge { errorCode: number; } 52
  18. Type error - JavaScriptͷϓϩάϥϜͰ΋ͬͱ΋සൟʹੜ͡Δόά͸ɺnull ·ͨ͸ະ ఆٛͷม਺ʹରͯ͠ɺ஋͕ଘࡏ͢ΔલఏͰΞΫηεͯ͠͠·͏έʔεͰ ͢ - ʢ༨ஊʣTony Hoare

    ᐌ͘ʮNullࢀর͸࠷େͷޡΓͩͬͨɻίϯύΠϧ Ͱ͢΂ͯνΣοΫͰ͖ΔΑ͏ʹ͔ͨͬͨ͠ʯ - https://www.infoq.com/presentations/Null-References-The-Billion-Dollar-Mistake-Tony- Hoare/ 60 Uncaught TypeError: Cannot read property ‘hoge' of undefined
  19. Optional - ΦϓγϣϯͷstrictNullCheck͕trueͷ৔߹ɺOptionalͳ஋Λ͍͖ͳΓૢ ࡞͠Α͏ͱ͢ΔͱTypeScript͕ίϯύΠϧΤϥʔʹͯ͘͠Ε·͢ ʢίϯύΠϧΤϥʔ͸͝๙ඒͩͱࢥ͍·͠ΐ͏ʣ function fn(args: { message?: string})

    { // ࣄલʹargs.messageͷଘࡏΛνΣοΫ͢Δඞཁ͕͋Δ if (!args.message) return ""; return args.message.toLowerCase(); } fn({}); // messageΛলུՄೳ 62
  20. ͦͷଞͷOptionalදݱ - ϓϩύςΟ໊ޙͷ ? Ҏ֎ʹ΋Optionalม਺Λදݱ͢Δํ๏͕͋Γ·͢ - ※ ύΠϓه߸ͷҙຯ͸ޙड़͠·͢ // ؔ਺ͷoptionalҾ਺

    function hoge(a: number, b?: number) { } // null ΍ undefined ͱͷUnion type X = string | undefined; type Y = string | null;
  21. strictNullCheck ʹ͍ͭͯ - strictNullChecks͸ɺࢀর͍ͯ͠Δ஋ͷܕʹnull ·ͨ͸ undefined͕୅ೖ Մೳͳ৔߹ʹɺͦͷ஋ͷૢ࡞Λ੍ݶ͢ΔػೳͰ͢ - TypeScriptͷσϑΥϧτઃఆͰ͸ɺstrictNullCheck͸ONͰ͢ -

    جຊతʹ͸༗ޮʹ͓͍ͯͨ͠ํ͕ྑ͍ػೳͰ͕͢ɺطଘͷJavaScriptϓ ϩδΣΫτʹޙ෇ͰTypeScriptΛಋೖ͢Δ৔߹͸ɺҰ୴offʹ͢Δͷ΋Ξ ϦͰ͢ 64
  22. Literal type - ਺஋/จࣈྻ/ਅِ஋ܕ͸ɺͦΕͧΕͷ஋ͦͷ΋ͷΛܕͱͯ͠࢖͏͜ͱ͕ Ͱ͖·͢ɻ͜ΕΛLiteral Typeͱݺͼ·͢ type SomeString = "some

    string"; type SomeNumber = 1; type True = true; function fn(str: SomeString) { return str.trim(); } fn("some string"); // OK fn("other string"): // Error 66
  23. Union type - ෳ਺ͷܕΛύΠϓه߸ʢ | ʣͰ۠੾Δ͜ͱͰɺUnion Typeʢ࿨ܕ, ڞ༻ମ ܕͱ΋ʣΛએݴ͠·͢ -

    String Literal Typeͱซ༻͢ΔͱɺྻڍܕͷΑ͏ʹѻ͏͜ͱ΋Ͱ͖·͢ ʢTypeScriptʹ΋enumߏจ͕༻ҙ͞Ε͍ͯ·͕͢ɺ͋·Γར༻͞Ε·ͤΜʣ type NumOrStr = string | number; type MaybeStr = string | null | undefined; type Colors = "red" | "blue" | "green" | "yellow"; 67
  24. ܕͷߜΓࠐΈ - Union Type͸ɺifจ΍switchจͰ஋ΛνΣοΫ͍ͯ͘͜͠ͱͰɺΑΓৄࡉ ͳܕ΁ߜΓࠐΉ͜ͱ͕Ͱ͖·͢ɻ͜ΕΛType GuardͱΑͼ·͢ - strictNullCheckͰઆ໌ͨ͠ifจʹΑΔߜΓࠐΈ΋Type GuardͷҰछͰ͢ function

    fn(input: string | number) { console.log(input.toString()); if (typeof input === "number") { console.log(200 * input); } else { console.log(input.trim()); } } 68
  25. Type Guardͷछྨ - ͍͔ͭ͘ͷߏจ͕Type Guardͱͯ͠ར༻Ͱ͖·͢ɿ - typeof x === “string”,

    x instanceof HogeClass - Literal typeʹ͓͚Δಉ஋֬ೝʢ if (x === “some message”) ʣ - obj.x ΍ obj[“x”] ΍ x in objͳͲͷଘࡏ֬ೝ - User Defined Type Guard function: function fn(x: any): x is { msg: string } { return !!x.msg && typeof x.msg === "string"; } 69
  26. ϛχԋश̍ - 📝 ҎԼͷؔ਺͸ type ʹԠͯ͡ɺpayload ͷܕ͕ҟͳΓ·͢ɻ ίϯύΠϧ͕௨ΔΑ͏ʹɺAction ͷܕΛߟ͑ͯΈͯ 70

    function reduce(state = [100], action: Action) { switch (action.type) { case “CONCAT": // payload: number[] return state.concat(action.payload); case “REMOVE": // payload: number return state.filter(val => val !== action.payload); default: return state; } };
  27. ϛχԋश̎ - 📝 ࣍ͷίʔυ͸੺Լઢ෦෼ͰίϯύΠϧΤϥʔͱ͞Εͯ͠·͍·͢ɻԿ ނͰ͠ΐ͏͔ʁ const prices = [1000, 500];

    type Item = { price?: number; }; function fn(item: Item): boolean { if (item.price == null) return false; return prices.some( p => item.price > p, ); } 71
  28. Ωϟετ - จࣈྻͷLiteral Type͸stringܕʹ୅ೖՄೳͰ͕͢ɺ stringܕ͸จࣈྻͷLiteral Typeʹ͸୅ೖͰ͖·ͤΜ - ʮ୅ೖՄೳʯ͸ɺSub Typeʢ۩৅ʣˠ Supar

    Typeʢந৅ͳܕʣͷํ޲ ʹݶఆ͞ΕΔ͔ΒͰ͢ type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z: SomeString = y; Supar type Sub type type SomeString string
  29. Ωϟετ - ͜ͷΑ͏ͳ৔߹ɺม਺ͷޙΖʹ as ܕ໊ Λ෇༩͢Δ͜ͱͰܕΛม׵Ͱ͖ ·͢ʢਖ਼ࣜʹ͸ ΩϟετͰ͸ͳ͘ɺType Assertion ͱݺ͹ΕΔػೳʣ

    Supar type Sub type type SomeString string type SomeString = "some string"; const x: SomeString = "some string"; const y: string = x; const z = y as SomeString;
  30. asͷ੍໿ - asͰม׵Ͱ͖Δͷ͸ɺSupar Type → Sub Type ͷ৚͕݅ຬͨ͞ΕΔͱ͖ ͷΈͰ͢ -

    e.g. numberܕ͸stringܕʹม׵Ͱ͖·ͤΜ Supar type Sub type type SomeString string
  31. Generics type List<T> = T[]; function getLength<T>(list: List<T>) { list.length;

    } interface IFoo<T> { list: ReadonlyArray<T>; } class Foo<T> implements IFoo<T> { constructor(public readonly list: T[]){ } get size() { return getLength(this.list); } } const foo = new Foo<string>([""]); 81
  32. Generics // ໭Γ஋͕Promise<{ id: number; name: string; }> function getTodo()

    { return Promise.resolve({ id: 100, name: "hoge", }); } const index = new Map<number, string>(); index.set(1, "hoge"); index.has(1); const colors: ReadonlyArray<string> = [ "red", "green", "blue", ]; colors.sort(); // ഁյૢ࡞͸ېࢭ
  33. Advanced type - ࠓ೔͸ׂѪ͠·͕͢ɺܕγεςϜʹ͸ΑΓߴ౓ͳػೳ΋༻ҙ͞Ε͍ͯ· ͢ - Mapped Type: objectܕͷkeyΛ࠶ར༻ͯ͠ผͷܕΛ࡞Δ -

    Conditional Type: ୅ೖՄೳੑͰܕΛύλʔϯϚον - Type Inference in Conditional Type: ύλʔϯϚονͨ͠ܕͷ࠶ར༻ - Template Literal Type: จࣈྻϦςϥϧͷܕԋࢉ 89
  34. Advanced type interface Observable<T> { subscribe(cb: (v: T) => void):

    void; } type Unboxing<T> = T extends Observable<infer S> ? S : never; declare function combineLatest<U extends Observable<any>[]>( ...args: U ): Observable< { [P in keyof U]: Unboxing<U[P]>; } >; declare const s1: Observable<string>; declare const s2: Observable<number>; declare const s3: Observable<boolean>; combineLatest(s1, s2, s3).subscribe(([v1, v2, v3]) => { });
  35. 1. NPM ύοέʔδʹܕఆ͕ٛಉ ࠝ͞Ε͍ͯΔ - npm install (ϥΠϒϥϦ໊) Λ࣮ߦ͢Δ͚ͩͰܕఆ͕ٛར༻ՄೳʹͳΓ· ͢

    - ͜ͷखͷ΍ͭ͸ɺϥΠϒϥϦͷpackage.jsonʹ “types”: “index.d.ts” ͱ ͍ͬͨهड़͕͋Γ·͢ 98
  36. ES2015 Ϟδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ import { add }

    from “./add.js”; console.log(add(1, 2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ export function add(a, b) { return a + b; }
  37. CommonJSͷϞδϡʔϧ // calc.js // ϞδϡʔϧΛར༻͢Δଆ const add = require("./add"); console.log(add(1,

    2)); // add.js // ϞδϡʔϧΛఆٛ͢Δଆ function add(a, b) { return a + b; } module.exports = add;
  38. ʢ༨ஊʣଞͷ--moduleୡ - --module ʹ͸ “amd” / “umd” / “system” ͷ஋΋બ୒ՄೳͰ͢ɻ…͕໓ଟ

    ʹ࢖͏͜ͱ͸ͳ͍Ͱ͢ - ڵຯ͕͋ͬͨΒɺ“RequireJS” ͱ͔ “SystemJS” Ͱௐ΂ͯΈΔͱྑ͍ͱࢥ ͍·͢ 111
  39. TypeScriptͱͯ͠ͷϞδϡʔϧ - Ϟδϡʔϧͱͯ͠ղऍ͞ΕΔ.tsϑΝΠϧ - ϞδϡʔϧʹͳΒͳ͍.tsϑΝΠϧ /* types.ts */ // Todo

    ΠϯλʔϑΣΠε͸Ͳ͔͜ΒͰ΋ࢀরՄೳ interface Todo { name: string; } /* types.ts */ // Todo ΠϯλʔϑΣΠε import ͠ͳ͍ͱࢀরͰ͖ͳ͍ export interface Todo { name: string; } 113
  40. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… -

    ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 117
  41. Ϗϧυπʔϧͷཚཱ - Ϟδϡʔϧϩʔμʔ - CommonJS (Node.js) ελΠϧ, RequireJSελΠϧ, etc… -

    ϏϧυγεςϜ - Grant, Gulp, etc… - ѹॖʢ೉ಡԽʣπʔϧ - YUI Compressor, ClosureCompiler, UglifyJS, etc… 118 ͱʹ͔͘৭ʑ͋ͬͨʂ
  42. tscࣗମͷศརػೳ - TypeScriptຊମʹ෇ଐ͍ͯ͠Δ tsc ͱ͍͏πʔϧࣗମʹ΋ศརػೳ͕උ Θ͍ͬͯ·͢ - --noEmit : .jsϑΝΠϧ΁ͷग़ྗΛߦΘͳͣʹɺܕνΣοΫͷΈΛ࣮ߦ

    ͢ΔΦϓγϣϯ. CIʹ૊ΈࠐΉͱศར - --noUnusedLocals, --noUnusedParameters: ར༻͞Ε͍ͯͳ͍ม਺Λ ݕ஌ͯ͠Τϥʔʹ͢ΔΦϓγϣϯ. ৑௕ͳίʔυͷ࡟ݮʹͳΔ - ͦͷଞʹ΋ɺtscʹ͸༷ʑͳΦϓγϣϯ͕༻ҙ͞Ε͍ͯ·͢ɻެࣜυΩϡ ϝϯτΛݟͯΈΔͱΑ͍Ͱ͠ΐ͏
  43. ESLint - ESLint ͸ASTʢந৅ߏจ໦ʣΛ༻͍ͨίʔυͷνΣοΫπʔϧͰ͢ɻې ࢭ͍ͨ͠ίʔυύλʔϯΛϧʔϧͱͯ͠ొ࿥ͯ͠ར༻͠·͢ - ϧʔϧͷྫ: - consoleΛ࢖Θͳ͍͜ͱ -

    ࠶୅ೖ͠ͳ͍ม਺ʹ͸letͰ͸ͳ͘constΛ༻͍Δ͜ͱ - TypeScriptͱESLintΛซ༻͢Δ৔߹ɺhttps://github.com/typescript- eslint/typescript-eslint Λ࢖͍·͢
  44. ͓ΘΓʹ - ࠓ೔͸ԼهͳͲΛத৺ʹֶΜͰ͖·ͨ͠ - TypeScriptͷجຊจ๏ - طଘͷJavaScriptίʔυʹܕΛಋೖ͢Δํ๏ - ܕͷந৅Խ <->

    ۩ମԽͱɺͦΕʹԠͨ͡ॲཧ੍ޚํ๏ - ࣌ؒͷ౎߹্ɺ৮Ε͍ͯͳ͍τϐοΫ΋·ͩ୔ࢁ͋Γ·͢ɻؾʹͳΔ ςʔϚ͕͋ͬͨΒɺੋඇࣗ෼Ͱௐ΂ɺʢՄೳͰ͋Ε͹ʣखΛಈ͔ͯ͠Έ ͍ͯͩ͘͞