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
TypeScriptでマルいJavaScriptを型くする
Search
Takeru Ichii
December 16, 2015
Programming
0
190
TypeScriptでマルいJavaScriptを型くする
初めてのTypeScriptネタ。間違ってたら優しく教えて下さい。
Takeru Ichii
December 16, 2015
Tweet
Share
More Decks by Takeru Ichii
See All by Takeru Ichii
KPTのかわいそうな Keepちゃんを救い隊
takeru_ichii_0901
0
35
効果的なチームワークを体験するワークショップ
takeru_ichii_0901
3
620
Rails on Kubernetes -どうする?〇〇-
takeru_ichii_0901
3
7.8k
2015-11-30_dockerでドッカンドッカンする話
takeru_ichii_0901
1
360
20151208 IoTイントロダクション
takeru_ichii_0901
0
200
MS Officeの便利な使い方 - VBAで始めるプログラミングのススメ
takeru_ichii_0901
0
600
Other Decks in Programming
See All in Programming
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
630
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
330
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
120
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
270
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
450
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
530
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
1.5k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
200
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
410
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
5つのアンチパターンから学ぶLT設計
narihara
1
130
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Done Done
chrislema
184
16k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Speed Design
sergeychernyshev
32
1k
Making Projects Easy
brettharned
116
6.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Invisible Side of Design
smashingmag
300
51k
Transcript
で いJavaScriptを くする 2015-12-16 Takeru Ichii 型
おしながき • JavaScriptとは • JavaScriptつらい • TypeScriptとは • ちょっとやってみる
JavaScriptとは • いわゆる ECMA-262 5.1 edition で規定されている言語仕様 • 元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化 するために作られたもの
• 弱い動的型付けのマルチパラダイムプログラミング言語
JavaScriptとは • いわゆる ECMA-262 5.1 edition で規定されている言語仕様 • 元々はブラウザ等で各々の仕様が異なるJavaScriptを共通化 するために作られたもの
• 弱い動的型付けのマルチパラダイムプログラミング言語 JavaScriptつらい!!!!
JavaScriptつらい • ダックタイピングな言語はソースが巨大化した時に何がデータ として挿入されるかわからない • オブジェクト指向言語でもあるが、プロトタイプベース • クラスベースになれた人にとっては表現がしづらい ダックタイピング: 「もしもそれがアヒルのように歩き、アヒルのように鳴くのなら、それはアヒルである」な感じ
TypeScriptとは • JavaScriptに以下の要素を付加した言語(またはAltJS) • ECMAScript6の機能先取り • class/lambda/デフォルト引数/let/const etc… • ECMAScript7(策定中)のデコレーター機能
• 型注釈/型推論の充実 • インターフェイスの記述 https://ja.wikipedia.org/wiki/TypeScript http://www.buildinsider.net/language/quicktypescript/01#type-inference
ちょっとやってみる • TypeScript公式にPlaygroundが用意されている • TypeScriptを書いたらそのJavaScriptコンパイル結果と実行ができる • URLで独自コードをいつでも参照可能 • デモコードのURLはノートに記載 •
以下のデモをご用意 • 型注釈/型推論/インターフェイス/デフォルト引数/const/let • アロー関数/テンプレート文字列 • クラスベースオブジェクト指向言語
ちょっとやってみる 型注釈 /* * 1 Type annotation *
1.1 String */ var sampleStr: string; sampleStr = "string"; //success sampleStr = 1; //Type mismatch error /* * 1.2 number */ var sampleNum: number; sampleNum = 1; //integer sampleNum = 1.2; //float? sampleNum = -‐1.234; //float? sampleNum = ""; //Type mismatch error /* * 1.3 boolean */ var sampleBool: boolean; sampleBool = true; //success sampleBool = false; //success sampleBool = ""; //Type mismatch error sampleBool = 1; //Type mismatch error • 型注釈によって変数の型を束縛 • プリミティブ型として3つを用意 • string • number • boolean
ちょっとやってみる 型推論 /* * 2 Type inference */
var sampleInfer1 = 1; alert(typeof sampleInfer1); //number var sampleInfer2 = "hoge"; alert(typeof sampleInfer2); //string • 変数宣言時に特に型宣言をしない場合、 適当な型を選択 • 一度宣言したら、再代入時に型を一致 させる必要がある
ちょっとやってみる インターフェイス /* * 3 Interface */
interface sampleInterface { name: string; // required parameter -‐? ":" sex?: string; // optional parameter -‐> "?:" age: number; } function getUserSuccess1(): sampleInterface { return { name: "takeru", sex: "male", age: 24 } } function getUserSuccess2(): sampleInterface { // omit optional parameter "sex" return { name: "takeru", age: 24 } } function getUserError(): sampleInterface { // Error: required parmeter "age" is not defined return { name: "takeru" } } • インターフェイスを宣言できる • 省略可能な要素は”?:”を使う
ちょっとやってみる デフォルト引数 /* * 4 default argument */
function sampleFunc1(inputString: string = "default argument"): void{ alert(inputString); } sampleFunc1("hogehoge"); // alert "hogehoge" sampleFunc1(); // alert "default argument” JavaScriptではできなかった関数等のデフォルト引数を設定できる
ちょっとやってみる const/let /* * 5 const */
const constVar = "const"; constVar = "cannot reassign const var"; /* * 6 let */ function sampleLet1(): void { for(var i: number = 1; i<10; i++){ continue; } alert(i);//10 } function sampleLet2(): void { for(let i: number = 1; i<10; i++){ continue; } alert(i); //undefined } Const • 定数宣言できる。 • 再代入は不可 • 型推論可能 Let • 変数のスコープを縛ることができる
ちょっとやってみる アロー関数/テンプレート文字列 /* * 7 allow function */
//JavaScript like var addJs = function(a,b){ return a + b; } alert(addJs(1,2));//3 //arrow function var addType = (a: number, b:number): number => a + b; alert(addType(1,2))//3 /* * 8 template literals */ alert("今日は${Math.random() < 0.5 ? '良い' : '悪い'}日だ。"); アロー関数 • 例ではJavaScriptとTypeScriptの 比較を行っている 文字列テンプレート • 文字列中に”${}”を入れることに よって変数挿入したりできる
ちょっとやってみる クラスベースオブジェクト指向言語 /* * 9 class base object-‐oriented programming
*/ interface Data { name: string; age: number; } class sampleClass { private data: Data; constructor() { this.data = { name: "takeru", age: 38 } } get name(): string { return this.name; } } var sampleInstance = new sampleClass; alert(sampleInstance.name); JavaScriptではプロトタイプベース のみのサポートだったが、 TypeScriptによってクラスベースオ ブジェクト指向の記述が可能に
ちょっとやってみる デモコードURL http://www.typescriptlang.org/Playground#src=%0A%2F*%0A%20*%201%20Type%20annotation%0A%20*%201.1%20String%0A%20*%2F%0Avar%20sampleStr%3A%20string%3B%0AsampleStr%20%3D%20%22string%22%3B%20%2F%2Fsuccess%0AsampleStr%20%3D%201%3B %20%20%20%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20*%201.2%20number%0A%20*%2F%0Avar%20sampleNum%3A%20number%3B%0AsampleNum%20%3D%201%3B%20%20%20%20%20%20%2F%2Finteger%0AsampleNum%20%3D%201.2%3B%20%20%20%20%2F %2Ffloat%3F%0AsampleNum%20%3D%20-1.234%3B%20%2F%2Ffloat%3F%0AsampleNum%20%3D%20%22%22%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%0A%2F*%0A%20*%201.3%20boolean%0A%20*%2F%0Avar%20sampleBool%3A%20boolean%3B%0AsampleBool%20%3D %20true%3B%20%20%2F%2Fsuccess%0AsampleBool%20%3D%20false%3B%20%2F%2Fsuccess%0AsampleBool%20%3D%20%22%22%3B%20%20%20%20%2F%2FType%20mismatch%20error%0AsampleBool%20%3D%201%3B%20%20%20%20%20%2F%2FType%20mismatch%20error%0A%0A%2F*%0A%20* %202%20Type%20inference%0A%20*%2F%0Avar%20sampleInfer1%20%3D%201%3B%0Aalert(typeof%20sampleInfer1)%3B%20%2F%2Fnumber%0A%0Avar%20sampleInfer2%20%3D%20%22hoge%22%3B%0Aalert(typeof%20sampleInfer2)%3B%20%2F%2Fstring%0A%0A%2F*%0A%20*%203%20Interface%0A%20* %2F%0Ainterface%20sampleInterface%20%7B%0A%09name%3A%20string%3B%20%2F%2F%20required%20parameter%20-%3F%20%22%3A%22%0A%09sex%3F%3A%20string%3B%20%2F%2F%20optional%20parameter%20-%3E%20%22%3F%3A%22%0A%09age%3A%20number%3B%0A%7D%0A%0Afunction %20getUserSuccess1()%3A%20sampleInterface%20%7B%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09sex%3A%20%22male%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserSuccess2()%3A%20sampleInterface%20%7B%0A%09%2F%2F %20omit%20optional%20parameter%20%22sex%22%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%2C%0A%09%09age%3A%2024%0A%09%7D%0A%7D%0A%0Afunction%20getUserError()%3A%20sampleInterface%20%7B%0A%09%2F%2F%20Error%3A%20required%20parmeter%20%22age
%22%20is%20not%20defined%0A%09return%20%7B%0A%09%09name%3A%20%22takeru%22%0A%09%7D%0A%7D%0A%0A%2F*%0A%20*%204%20default%20argument%0A%20*%2F%0Afunction%20sampleFunc1(inputString%3A%20string%20%3D%20%22default%20argument%22)%3A%20void%7B%0A %09alert(inputString)%3B%0A%7D%0A%0AsampleFunc1(%22hogehoge%22)%3B%20%2F%2F%20alert%20%22hogehoge%22%0AsampleFunc1()%3B%20%2F%2F%20alert%20%22default%20argument%22%0A%0A%2F*%0A%20*%205%20const%0A%20*%2F%0Aconst%20constVar%20%3D%20%22const%22%3B %0AconstVar%20%3D%20%22cannnot%20reassign%20const%20var%22%3B%0A%0A%2F*%0A%20*%206%20let%0A%20*%2F%0Afunction%20sampleLet1()%3A%20void%20%7B%0A%09for(var%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A %09alert(i)%3B%2F%2F10%0A%7D%0A%0Afunction%20sampleLet2()%3A%20void%20%7B%0A%09for(let%20i%3A%20number%20%3D%201%3B%20i%3C10%3B%20i%2B%2B)%7B%0A%09%09continue%3B%0A%09%7D%0A%09alert(i)%3B%20%2F%2Fundefind%0A%7D http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%207%20allow%20function%0A%20*%2F%0A%0A%2F%2FJavaScript%20like%0Avar%20addJs%20%3D%20function(a%2Cb)%7B%0A%09return%20a%20%2B%20b%3B%0A%7D%0Aalert(addJs(1%2C2))%3B%2F%2F3%0A%0A%2F%2Farrow%20function %0Avar%20addType%20%3D%20(a%3A%20number%2C%20b%3Anumber)%3A%20number%20%3D%3E%20a%20%2B%20b%3B%0Aalert(addType(1%2C2))%2F%2F3%0A%0A%2F*%0A%20*%208%20template%20literals%0A%20*%2F%0A%0Aalert(%22%E4%BB%8A%E6%97%A5%E3%81%AF %24%7BMath.random()%20%3C%200.5%20%3F%20'%E8%89%AF%E3%81%84'%20%3A%20'%E6%82%AA%E3%81%84'%7D%E6%97%A5%E3%81%A0%E3%80%82%22)%3B%0A http://www.typescriptlang.org/Playground#src=%2F*%0A%20*%209%20class%20base%20object-oriented%20programming%20%0A%20*%2F%0Ainterface%20Data%20%7B%0A%09name%3A%20string%3B%0A%09age%3A%20number%3B%0A%7D%0A%0Aclass%20sampleClass%20%7B%0A%09private%20data%3A %20Data%3B%0A%09%0A%09constructor()%20%7B%0A%09%09this.data%20%3D%20%7B%0A%09%09%09name%3A%20%22takeru%22%2C%0A%09%09%09age%3A%2038%0A%09%09%7D%0A%09%7D%0A%09%0A%09get%20name()%3A%20string%20%7B%0A%09%09return%20this.name%3B%0A%09%7D %0A%7D%0A%0Avar%20sampleInstance%20%3D%20new%20sampleClass%3B%0Aalert(sampleInstance.name)%3B • アロー関数/テンプレート文字列 • 型注釈/型推論/インターフェイス/デフォルト引数/const/let • クラスベースオブジェクト指向言語