- 日時
2017-09-10
- 作
@voluntas
- バージョン
0.3.0
- URL
突っ込みは Twitter @voluntas まで。
この資料は WebRTC の TypeScript 対応が色々しんどいこともあり、頓挫しています。半年後くらいにまた触ろうと思います。
以前 React を触ってみた時に Babel を体験してみた。自分が 10 年以上前に学んだ JavaScript はもう過去のものだと実感した。
今回は TypeScript がとても良いという話をよく見るようになったので、実際に体験してみようと考えた。なにより体験しておくことでフロントエンドを担当する技術者の話すが少しでもわかるようになるだろうと考えたからだ。
TypeScript は Microsoft が開発しており VSCode との相性もとても良いという話だったというのも興味を惹かれた一つである。
また、簡単に調べてみた所 TypeScript と React を組み合わせるというのもありといえばありらしい。そのうち触ってみるのも良さそう。
- JavaScript はよくわからない
- Node.JS はよくわからない
- TypeScript は名前だけ聞いたことがる
- Bable を 1 週間だけ触った
- React を 1 週間だけ触った
- webpack を 1 日だけ触った
- WebRTC API はほとんどわからない
- VIM を日常的に使っている
- VSCode はインストールしただけ
つまり著者自身。
node と npm のバージョンはどれを使うのがいいのかわからないという最大の課題にぶち当たったので、よくわからないけど、最新版を使うという方針で行くことにした。
$ node --version
v8.4.0
$ npm --version
5.4.0npm でインストールしたのはこの辺。一旦ローカルインストールする。
$ mkdir ts-dojo
$ cd ts-dojo
$ npm init -y
Wrote to /path/to/ts-dojo/package.json:
{
"name": "ts-dojo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"eslint": "^4.6.1",
"tslint": "^5.7.0",
"typescript": "^2.5.2"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
$ npm install --save-dev typescript tslint eslint
npm notice save eslint is being moved from dependencies to devDependencies
npm notice save tslint is being moved from dependencies to devDependencies
npm notice save typescript is being moved from dependencies to devDependencies
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ts-dojo@1.0.0 No description
npm WARN ts-dojo@1.0.0 No repository field.
+ eslint@4.6.1
+ tslint@5.7.0
+ typescript@2.5.2
added 150 packages in 4.302s
$ ./node_modules/typescript/bin/tsc --init
message TS6071: Successfully created a tsconfig.json file.普段は VIM を利用しているが、今回は Visual Studio Code (VSCode) を使ってみることにした。
乗り換えるということは特になく TypeScript は VSCode の相性がとてもいいことと、 VSCode の VIM キーバインドモードが不満が少ないという話を聞いていたからだ。
- ESLint
- TSLint
- Vim
まずはプロダクション向けというよりは TypeScript を使うとどのくらい何が嬉しいのかを実感しておきたい。
- WebRTC MediaChannel を使って通信するサンプルを書いてみる
- WebRTC DataChannel を使って通信するサンプルを書いてみる
- VSCode の TypeScript 補完などを体感しておく
- webpack と TypeScript の連携を体感しておく
- React と TypeScript の連携を体感しておく
tsconfig の設定はよくわからないので strictNullChecks を true にしただけ。お勧めとかは後で調べることにした。
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"strictNullChecks": true
}
}https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
チュートリアルを読みながら書いていったコードがこれ。
class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string, public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);何となく分かる。そして greeter.html を生成してうまく動いたのでよし。
さっそく DataChannel を動かしてみることにする。
WebRTC の定義ファイルは DataChannel が考慮されていないので、 WebRTC の定義ファイルを持ってくる。
$ npm install --save-dev @types/webrtc
npm WARN ts-dojo@1.0.0 No description
npm WARN ts-dojo@1.0.0 No repository field.
+ @types/webrtc@0.0.21
added 1 package in 2.102sが、これだと既存とぶつかるらしい。というかこれバグなのでは。
DefinitelyTyped/DefinitelyTyped#16509
ということで、無視しろという仕組みらしい。ヒドイ、これ解決しようよ ... 。
とりあえず先程の Issues の tsconfig.json をぱくる:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"rootDir": "src",
"outDir": ".code",
"newLine": "LF",
"lib": [
"es2015",
"es2016",
"es2017",
"dom",
"scripthost"
],
"moduleResolution": "node",
"importHelpers": true,
"declaration": true,
"pretty": true,
"sourceMap": true,
"inlineSources": true,
"noUnusedLocals": true,
"skipLibCheck": true
}
}その後、まずは TypeScript と意識せずに書いて見る。
let peerConnection : RTCPeerConnection;
peerConnection = new RTCPeerConnection({});
let dataChannelOptions = {
ordered: true,
maxRetransmitTime: 3000,
};
let dataChannel = peerConnection.createDataChannel("spam", dataChannelOptions);
dataChannel.onerror = function(error: ErrorEvent) {
};
dataChannel.onmessage = function (event : MessageEvent) {
};
dataChannel.onopen = function () {
};
dataChannel.onclose = function () {
};
peerConnection.createOffer()
.then(offer => {
console.log(offer);
peerConnection.setLocalDescription(offer)
})
.catch();無事 offer の SDP を生成できたことを確認した。
- var より let を使う
- document.getElementById の型ではまった
let localVideo = <HTMLMediaElement> document.getElementById('localVideo');とか書く- http://qiita.com/Sekky0905/items/a88721f2af41050c93f2
- checked が見つからない
let cpuOveruseDetection = (<HTMLInputElement>document.getElementById('cpuOveruseDetection')).checked;- https://stackoverflow.com/questions/12686927/typescript-casting-htmlelement