Skip to content

Instantly share code, notes, and snippets.

@voluntas

voluntas/typescript.rst

Last active August 29, 2023 20:34
Show Gist options
  • Save voluntas/107a764f1830fb8afd987dce5e0e88cd to your computer and use it in GitHub Desktop.
Save voluntas/107a764f1830fb8afd987dce5e0e88cd to your computer and use it in GitHub Desktop.
Download ZIP
TypeScript コトハジメ
Raw
typescript.rst

TypeScript コトハジメ

日時:2017-09-10
作:@voluntas
バージョン:0.3.0
URL:https://voluntas.githu.io/

突っ込みは Twitter @voluntas まで。

この資料は WebRTC の TypeScript 対応が色々しんどいこともあり、頓挫しています。半年後くらいにまた触ろうと思います。

Contents

概要

以前 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.0

npm でインストールしたのはこの辺。一旦ローカルインストールする。

$ 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.

VSCode

普段は VIM を利用しているが、今回は Visual Studio Code (VSCode) を使ってみることにした。

乗り換えるということは特になく TypeScript は VSCode の相性がとてもいいことと、 VSCode の VIM キーバインドモードが不満が少ないという話を聞いていたからだ。

VSCode に入れたプラグイン

  • 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
  }
}

まずは TypeScript ドキュメントを読む

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 を生成してうまく動いたのでよし。

WebRTC

さっそく 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 を生成できたことを確認した。

メモ

資料

TypeScript

DataChannel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment