Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Polymer with TypeScript
Search
Taketoshi Aono(青野健利 a.k.a brn)
November 04, 2017
Programming
3
650
Polymer with TypeScript
PolymerでTypeScriptを使うためのあれこれ
Polymer Meetup#1
Taketoshi Aono(青野健利 a.k.a brn)
November 04, 2017
Tweet
Share
More Decks by Taketoshi Aono(青野健利 a.k.a brn)
See All by Taketoshi Aono(青野健利 a.k.a brn)
document.write再考
brn
6
2.6k
Parsing Javascript
brn
12
7.2k
JSON & Object Tips
brn
1
300
CA 1Day Youth Bootcamp for Frontend LT
brn
0
680
Modern TypeScript
brn
2
680
javascript - behind the scene
brn
3
600
tc39 proposals
brn
0
650
プロダクト開発とTypeScript
brn
8
2.7k
React-Springでリッチなアニメーション
brn
1
500
Other Decks in Programming
See All in Programming
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
SIMD Parallel Programming with the Vector API
josepaumard
0
180
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
920
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
Ruby Function Composition
bkuhlmann
1
330
Fast JSX: Don't clone props object #28768
yossydev
1
120
What We Can Learn From OSS
inouehi
0
420
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
ttskch
43
19k
エンターテイメント業界で利用されるAWS
demuyan
0
210
Milestoner
bkuhlmann
1
410
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
73
5.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
BBQ
matthewcrist
80
8.8k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Gamification - CAS2011
davidbonilla
76
4.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building Your Own Lightsaber
phodgson
99
5.7k
It's Worth the Effort
3n
180
27k
Statistics for Hackers
jakevdp
789
220k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Transcript
Polymer with TypeScript
Name @brn (ꫬꅿ⨳ⵃ) Occupation ؿٗٝزؒٝسؒٝآص،٥ط؎ذ؍ـؒٝآص، Company Cyberagent ،سذؙأةآؔAI Messenger Blog
http://abcdef.gets.b6n.ch/ Twitter https://twitter.com/brn227 GitHub https://github.com/brn
11/25-26 涫㠡׃תׅ V8חאְג涪邌׃תׅ ז勻גי
We Need Type Polymerד㘗ָ妜׃ְׄׯ TypeScript⢪ְת׃׳ֲկ FlowTypeך✲כ䘌תׅկ
polymer-decorators Polymerַ䲿⣘ׁגְծ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穈さׇ
Dependencies npm-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/Export TypeScriptךimport/exportכpolymerהtscֽדכ⹛ַזְկ וֲ׃גTypeScriptד㢩鿇ٌآُ٦ٕٗ٦س׃ְ㜥さכծ WebpackדTypeScriptغٝسַٕׅծ ِ٦ذ؍ٔذ؍תהhtml-module⡲կ
Scopes TypeScriptכٌآُ٦ٕⰻחimportַexportךStatementsָזְ㜥 さכծךٌآُ٦ٕmoduleדכזֻscriptה׃ג䪔ֲךדծ ➭ךؿ؋؎ٕהずׄأ؝٦فחזկ
// a.ts! const someValue = 1;! ! // b.ts! const
someValue = 2; ! // cannot redclared block-scope variable!
Namespace namespace⢪ֲֿהדהִ֮׆أ؝٦فכⴓⶴדֹկ
// a.ts! namespace a {! const someValue = 1;! }!
! // b.ts! namespace b {! const someValue = 2;! }!
Webpack Webpackדوٕثة٦حزדぐhtml嫣ח؝ٝػ؎ٕׅלِ٦ ذ؍ٔذ؍ؙٓأimportדֹկ ׃ծずׄؿ؋؎ٕ⡦䏝铣鴥✲חזךד搀꼽ָ㢳ְկ
HTML-Module ِ٦ذ؍ٔذ؍ؙٓأWebComponents⻉׃גծ ؚٗ٦غٕؔـآؙؑزחכאֽկ ☓ؚٗ٦غٕ寅厩
Polymer3 ESMָ⢪ִךד⹛ֲָֹծ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- overview https://github.com/Polymer/polymer-decorators https://github.com/brn/polymer-meetup-1