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
680
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
3k
Parsing Javascript
brn
14
9.3k
JSON & Object Tips
brn
1
510
CA 1Day Youth Bootcamp for Frontend LT
brn
0
970
Modern TypeScript
brn
2
820
javascript - behind the scene
brn
3
750
tc39 proposals
brn
0
890
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
710
Other Decks in Programming
See All in Programming
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
520
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
print("Hello, World")
eddie
2
530
楽して成果を出すためのセルフリソース管理
clipnote
0
190
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.5k
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Rancher と Terraform
fufuhu
2
550
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
Ruby Parser progress report 2025
yui_knk
1
460
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
4 Signs Your Business is Dying
shpigford
184
22k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Invisible Side of Design
smashingmag
301
51k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
850
Visualization
eitanlees
148
16k
Designing for humans not robots
tammielis
253
25k
RailsConf 2023
tenderlove
30
1.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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