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

Polymer with TypeScript

Polymer with TypeScript

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

More Decks by Taketoshi Aono(青野健利 a.k.a brn)

Other Decks in Programming

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