Save 37% off PRO during our Black Friday Sale! »

Polymer with TypeScript

Polymer with TypeScript

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

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