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
時計仕掛けのCompose
mkeeda
1
310
Spring gRPC について / About Spring gRPC
mackey0225
0
230
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
740
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.1k
Rails アプリ地図考 Flush Cut
makicamel
1
120
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
230
sappoRo.R #12 初心者セッション
kosugitti
0
260
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
160
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
800
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Open source software: how to live long and go far
gaelvaroquaux
0
650
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
The Cult of Friendly URLs
andyhume
78
6.2k
Gamification - CAS2011
davidbonilla
80
5.1k
Designing Experiences People Love
moore
140
23k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Building an army of robots
kneath
303
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
How STYLIGHT went responsive
nonsquared
98
5.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
560
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