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