Polymer with TypeScript

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Decorators ֿ׿זdecoratorָ֮׷״

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

tsconfig.json

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

pakcage.json

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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