Polymer with TypeScript

Transcript

1. Polymer with TypeScript
   

2. Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔ
   AI Messenger Blog

   http://abcdef.gets.b6n.ch/ Twitter https://twitter.com/brn227 GitHub https://github.com/brn

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

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

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

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";! }!

7. Decorators
   ֿ׿זdecoratorָ֮׷״
   

8. @property({notify: true})! foo: number = 42;! ! @property({reflectToAttribute: true})! reflectFoo:

   string = 'opened';! ! @property({readOnly: true})! readOnlyBar: number;! ! @property()! bar: string = 'yes';!

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

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}`);! }!

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

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

13. tsconfig.json
    

14. {! "compilerOptions": {! "target": "ES6",! "emitDecoratorMetadata": true,! "experimentalDecorators": true,! "module":

    "ESNext",! "importHelpers": false,! "lib": [! "dom",! "es5",! "es2015",! "es2016",! "es2017"! ]! }! }!

15. pakcage.json
    

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

    "tsc -p tsconfig.json --watch",! "serve": "polymer serve",! "debug": "run-p watch serve"! }!

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

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

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

20. // a.ts! const someValue = 1;! ! // b.ts! const

    someValue = 2; ! // cannot redclared block-scope variable!

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

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

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

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

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

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

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

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