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
660
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
13
9.1k
JSON & Object Tips
brn
1
440
CA 1Day Youth Bootcamp for Frontend LT
brn
0
870
Modern TypeScript
brn
2
770
javascript - behind the scene
brn
3
710
tc39 proposals
brn
0
830
プロダクト開発とTypeScript
brn
8
2.9k
React-Springでリッチなアニメーション
brn
1
650
Other Decks in Programming
See All in Programming
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
2.2k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
950
Jakarta EE meets AI
ivargrimstad
0
150
2025.2.14_Developers Summit 2025_登壇資料
0101unite
0
130
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
Ruby on cygwin 2025-02
fd0
0
170
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
880
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
280
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
技術を改善し続ける
gumioji
0
100
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
410
Unity Android XR入門
sakutama_11
0
170
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.4k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Code Review Best Practice
trishagee
67
18k
Unsuck your backbone
ammeep
669
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Thoughts on Productivity
jonyablonski
69
4.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Building Adaptive Systems
keathley
40
2.4k
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