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
36
効果的なチームワークを体験するワークショップ
takeru_ichii_0901
3
640
Rails on Kubernetes -どうする?〇〇-
takeru_ichii_0901
3
8k
2015-11-30_dockerでドッカンドッカンする話
takeru_ichii_0901
1
370
20151208 IoTイントロダクション
takeru_ichii_0901
0
210
MS Officeの便利な使い方 - VBAで始めるプログラミングのススメ
takeru_ichii_0901
0
600
Other Decks in Programming
See All in Programming
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
930
Swift Concurrency - 状態監視の罠
objectiveaudio
2
470
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
200
Advance Your Career with Open Source
ivargrimstad
0
350
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
570
CSC509 Lecture 05
javiergs
PRO
0
300
フロントエンド開発に役立つクライアントプログラム共通のノウハウ / Universal client-side programming best practices for frontend development
nrslib
7
3.9k
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
130
止められない医療アプリ、そっと Swift 6 へ
medley
1
120
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
10k
Rails Girls Zürich Keynote
gr2m
95
14k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Building Applications with DynamoDB
mza
96
6.6k
Bash Introduction
62gerente
615
210k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Building Adaptive Systems
keathley
43
2.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
890
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 • クラスベースオブジェクト指向言語