Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Polymer with TypeScript
Taketoshi Aono(青野健利 a.k.a brn)
November 04, 2017
Programming
3
620
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)
CA 1Day Youth Bootcamp for Frontend LT
brn
0
230
Modern TypeScript
brn
2
540
javascript - behind the scene
brn
3
450
tc39 proposals
brn
0
470
プロダクト開発とTypeScript
brn
8
2.4k
React-Springでリッチなアニメーション
brn
1
410
javascript internationalization API
brn
0
490
How V8 executes WASM
brn
3
1.3k
memory_in_javascript.pdf
brn
0
650
Other Decks in Programming
See All in Programming
大規模プロダクトにLinterを導入し運用している話
hirokiotsuka
0
240
Reactは何を提供するLibraryなのか?
taro28
3
560
Lancersをコンテナへ本番移行する取り組み
rvirus0817
1
410
Node.jsデザインパターンを読んで
mmmommm
0
2.8k
UI Testing of Jetpack Compose Apps, AppDevCon
alexzhukovich
0
170
Node-RED 3.0 新機能紹介
utaani
0
140
Scrum Fest Osaka 2022/5年で200人になったスタートアップの アジャイル開発の歴史とリアル
atamaplus
1
960
IE Graduation Certificate
jxck
6
4.8k
データ分析やAIの "運用" について考える
mmorito
0
150
Running Laravel/PHP on AWS (AWS Builders Day Taiwan 2022)
dwchiang
0
170
シェーダー氷山発掘記
logilabo
0
150
Java初心者が知っておくべきプログラミングのこと - JJUG CCC 2022 Spring
kishida
5
560
Featured
See All Featured
Making Projects Easy
brettharned
98
4.3k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Statistics for Hackers
jakevdp
781
210k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Designing with Data
zakiwarfel
91
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
5
510
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.7k
The Web Native Designer (August 2011)
paulrobertlloyd
74
1.9k
Optimizing for Happiness
mojombo
365
63k
KATA
mclloyd
7
8.7k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
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