Polymer with TypeScript

PolymerでTypeScriptを使うためのあれこれ
Polymer Meetup#1

Transcript

1. Polymer
   with
   TypeScript
   

   View Slide

2. Name
   @brn (ꫬꅿ⨳ⵃ)
   Occupation
   ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،
   Company
   Cyberagent ،سذؙأةآؔAI Messenger
   Blog
   http://abcdef.gets.b6n.ch/
   Twitter
   https://twitter.com/brn227
   GitHub
   https://github.com/brn
   

   View Slide

3. 11/25-26
   涫㠡׃תׅ
   V8חאְג涪邌׃תׅ
   ׫׿ז勻גי
   

   View Slide

4. We Need Type
   Polymerד׮㘗ָ妜׃ְ׿ׄׯ
   TypeScript׾⢪ְת׃׳ֲկ
   FlowTypeך✲כ䘌׸תׅկ
   

   View Slide

5. polymer-decorators
   Polymerַ׵䲿⣘ׁ׸גְ׷ծTypeScriptぢֽךر؝ٖ٦ة꧊կ
   ֿ׸׾⢪ֲהTypeScriptךؙٓأ㹀纏ַ׵CustomElement⡲׸תׅ!
   

   View Slide

6. const { customElement, property, query,
   queryAll, observe } = Polymer.decorators;!
   !
   const { Element } = Polymer;!
   !
   @customElement("my-app")!
   export class MyApp extends Element {!
   constructor() {!
   super();!
   }!
   @property({ type: String })!
   private appName: string = "my-app";!
   }!
   

   View Slide

7. Decorators ֿ׿זdecoratorָ֮׷״
   

   View Slide

8. @property({notify: true})!
   foo: number = 42;!
   !
   @property({reflectToAttribute: true})!
   reflectFoo: string = 'opened';!
   !
   @property({readOnly: true})!
   readOnlyBar: number;!
   !
   @property()!
   bar: string = 'yes';!
   

   View Slide

9. @query('h1')!
   header: HTMLHeadingElement;!
   !
   @queryAll('input')!
   allInputs: HTMLInputElement[];!
   

   View Slide

10. @property({notify: true})!
    foo: number = 42;!
    !
    @observe('foo')!
    private _fooChanged(newValue: number) {!
    console.log(`foo is now: ${newValue}`);!
    }!
    !
    @observe(['foo', 'bar'])!
    private _fooBarChanged(newFoo: number, newBar: string) {!
    console!
    .log(`foo is now: ${newFoo}, bar is now ${newBar}`);!
    }!
    

    View Slide

11. Build Config tscהpolymer-cli׾穈׫さ׻ׇ׷
    

    View Slide

12. Dependencies
    npm-run-allהtypescriptכ䗳갭
    polymer-cliכbabelכ㹋遤׃גֻ׸׷ָծtsc׾㹋遤ׅ׷ׅץָזְ
    ךדծnpm scriptדpolymer׾肔➿׻׶ׅ׷կ
    

    View Slide

13. tsconfig.json
    

    View Slide

14. {!
    "compilerOptions": {!
    "target": "ES6",!
    "emitDecoratorMetadata": true,!
    "experimentalDecorators": true,!
    "module": "ESNext",!
    "importHelpers": false,!
    "lib": [!
    "dom",!
    "es5",!
    "es2015",!
    "es2016",!
    "es2017"!
    ]!
    }!
    }!
    

    View Slide

15. pakcage.json
    

    View Slide

16. "scripts": {!
    "test": "polymer test",!
    "ts": "tsc -p tsconfig.json",!
    "watch": "tsc -p tsconfig.json --watch",!
    "serve": "polymer serve",!
    "debug": "run-p watch serve"!
    }!
    

    View Slide

17. Cautions
    •  TypeScriptⰻדimport/export׾⢪欽׃זְ
    •  import/exportָ⢪ִזְךדծTypeScriptךⰋؿ؋؎ٕכずׄ
    أ؝٦ف䪔ְחז׷
    •  Target׾ES5ח׃זְ
    

    View Slide

18. Import/Export
    TypeScriptךimport/exportכpolymerהtsc׌ֽדכ⹛ַזְկ
    וֲ׃ג׮TypeScriptד㢩鿇ٌآُ٦ٕ׾ٗ٦س׃׋ְ㜥さכծ
    WebpackדTypeScript׾غٝسٕׅ׷ַծ
    ِ٦ذ؍ٔذ؍׾תה׭׋html-module׾⡲׷կ
    

    View Slide

19. Scopes
    TypeScriptכٌآُ٦ٕⰻחimportַexportךStatementsָזְ㜥
    さכծ׉ךٌآُ٦ٕ׾moduleדכזֻscriptה׃ג䪔ֲךדծ
    ➭ךؿ؋؎ٕהずׄأ؝٦فחז׷կ
    

    View Slide

20. // a.ts!
    const someValue = 1;!
    !
    // b.ts!
    const someValue = 2; !
    // cannot redclared block-scope variable!
    

    View Slide

21. Namespace
    namespace׾⢪ֲֿהדה׶ִ֮׆أ؝٦فכⴓⶴדֹ׷կ
    

    View Slide

22. // a.ts!
    namespace a {!
    const someValue = 1;!
    }!
    !
    // b.ts!
    namespace b {!
    const someValue = 2;!
    }!
    

    View Slide

23. Webpack
    Webpackדوٕثة٦؜حزדぐhtml嫣ח؝ٝػ؎ٕׅ׸לِ٦
    ذ؍ٔذ؍ؙٓأ׮importדֹ׷կ
    ׋׌׃ծずׄؿ؋؎ٕ׾⡦䏝׮铣׫鴥׬✲חז׷ךד搀꼽ָ㢳ְկ
    

    View Slide

24. HTML-Module
    ِ٦ذ؍ٔذ؍ؙٓأ׮WebComponents⻉׃גծ
    ؚٗ٦غٕؔـآؙؑزחכ׏אֽ׷կ
    ☓ؚٗ٦غٕ寅厩
    

    View Slide

25. Polymer3
    ESMָ⢪ִ׷ךד⹛ֹ׉ֲ׌ָծTypeScriptךimportכ䭁䓸㶨׾א
    ֽ׷ֿהָדֹזְկ
    ת׋زٓٝأػ؎ٕ穠卓ח׮䭁䓸㶨׾אֽגֻ׸זְךדծESMך
    ٌآُ٦ٕה׃ג铣׫鴥תׇ׷ֿהכ׉ךתת׌ה♶〳腉կ
    ♧䘔issueכ֮׷ך׌ָ㼎䘔כ׮ֲ׍׳ְ⯓חז׶׉ֲկ
    

    View Slide

26. תה׭
    植朐כTypeScriptכWebpack⢪׏גغٝسٕ׃זְהծv2/v3חַ
    ַ׻׵׆א׵ְկ
    Webpackדjsחִׁ㢌䳔דֹ׸ל֮הכPolymer-cliך䛷䜋ח֮׆׸
    ׷ךד갹䓸׹ֲկ
    ؟ٝفٕכ⟃♴ךRepositoryח֮׶תׅկ
    https://github.com/brn/polymer-meetup-1
    

    View Slide

27. 项俱
    https://www.polymer-project.org/2.0/docs/devguide/feature-
    overview
    https://github.com/Polymer/polymer-decorators
    https://github.com/brn/polymer-meetup-1
    

    View Slide