PolymerでTypeScriptを使うためのあれこれ Polymer Meetup#1
PolymerwithTypeScript
View Slide
Name@brn (ꫬꅿ⨳ⵃ)Occupationؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص،CompanyCyberagent ،سذؙأةآؔAI MessengerBloghttp://abcdef.gets.b6n.ch/Twitterhttps://twitter.com/brn227GitHubhttps://github.com/brn
11/25-26涫㠡׃תׅV8חאְג涪邌׃תׅז勻גי
We Need TypePolymerד㘗ָ妜׃ְׄׯTypeScript⢪ְת׃׳ֲկFlowTypeך✲כ䘌תׅկ
polymer-decoratorsPolymerַ䲿⣘ׁגְծTypeScriptぢֽךر؝ٖ٦ة꧊կֿ⢪ֲהTypeScriptךؙٓأ㹀纏ַCustomElement⡲תׅ!
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";!}!
Decorators ֿזdecoratorָ֮״
@property({notify: true})!foo: number = 42;!!@property({reflectToAttribute: true})!reflectFoo: string = 'opened';!!@property({readOnly: true})!readOnlyBar: number;!!@property()!bar: string = 'yes';!
@query('h1')!header: HTMLHeadingElement;!!@queryAll('input')!allInputs: HTMLInputElement[];!
@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}`);!}!
Build Config tscהpolymer-cli穈さׇ
Dependenciesnpm-run-allהtypescriptכ䗳갭polymer-cliכbabelכ㹋遤׃גָֻծtsc㹋遤ׅׅץָזְךדծnpm scriptדpolymer肔➿ׅկ
tsconfig.json
{!"compilerOptions": {!"target": "ES6",!"emitDecoratorMetadata": true,!"experimentalDecorators": true,!"module": "ESNext",!"importHelpers": false,!"lib": [!"dom",!"es5",!"es2015",!"es2016",!"es2017"!]!}!}!
pakcage.json
"scripts": {!"test": "polymer test",!"ts": "tsc -p tsconfig.json",!"watch": "tsc -p tsconfig.json --watch",!"serve": "polymer serve",!"debug": "run-p watch serve"!}!
Cautions• TypeScriptⰻדimport/export⢪欽׃זְ• import/exportָ⢪ִזְךדծTypeScriptךⰋؿ؋؎ٕכずׄأ؝٦ف䪔ְחז• TargetES5ח׃זְ
Import/ExportTypeScriptךimport/exportכpolymerהtscֽדכ⹛ַזְկוֲ׃גTypeScriptד㢩鿇ٌآُ٦ٕٗ٦س׃ְ㜥さכծWebpackדTypeScriptغٝسַٕׅծِ٦ذ؍ٔذ؍תהhtml-module⡲կ
ScopesTypeScriptכٌآُ٦ٕⰻחimportַexportךStatementsָזְ㜥さכծךٌآُ٦ٕmoduleדכזֻscriptה׃ג䪔ֲךדծ➭ךؿ؋؎ٕהずׄأ؝٦فחזկ
// a.ts!const someValue = 1;!!// b.ts!const someValue = 2; !// cannot redclared block-scope variable!
Namespacenamespace⢪ֲֿהדהִ֮׆أ؝٦فכⴓⶴדֹկ
// a.ts!namespace a {!const someValue = 1;!}!!// b.ts!namespace b {!const someValue = 2;!}!
WebpackWebpackדوٕثة٦حزדぐhtml嫣ח؝ٝػ؎ٕׅלِ٦ذ؍ٔذ؍ؙٓأimportדֹկ׃ծずׄؿ؋؎ٕ⡦䏝铣鴥✲חזךד搀꼽ָ㢳ְկ
HTML-Moduleِ٦ذ؍ٔذ؍ؙٓأWebComponents⻉׃גծؚٗ٦غٕؔـآؙؑزחכאֽկ☓ؚٗ٦غٕ寅厩
Polymer3ESMָ⢪ִךד⹛ֲָֹծTypeScriptךimportכ䭁䓸㶨אֽֿהָדֹזְկתزٓٝأػ؎ٕ穠卓ח䭁䓸㶨אֽגֻזְךדծESMךٌآُ٦ٕה׃ג铣鴥תׇֿהכךתתה♶〳腉կ♧䘔issueכ֮ךָ㼎䘔כֲ׳ְ⯓חזֲկ
תה植朐כTypeScriptכWebpack⢪גغٝسٕ׃זְהծv2/v3חַַ׆אְկWebpackדjsחִׁ㢌䳔דֹל֮הכPolymer-cliך䛷䜋ח֮׆ךד갹䓸ֲկ؟ٝفٕכ⟃♴ךRepositoryח֮תׅկhttps://github.com/brn/polymer-meetup-1
项俱https://www.polymer-project.org/2.0/docs/devguide/feature-overviewhttps://github.com/Polymer/polymer-decoratorshttps://github.com/brn/polymer-meetup-1