BETA

[動画視聴ログ] TypeScript の概要と Language Server Protocol #1

投稿日:2018-11-08
最終更新:2018-11-08

動画:TypeScript の概要と Language Server Protocol

TypeScriptとは?

  • JavaやC#に近い感覚のプログラミング言語
  • コンパイルすると、JavaScriptのコードになる
  • オープンソース
  • JavaScriptと異なり「型 (Type)」が利用できる
  • TypeScriptはECMAScriptのsuperset
    • 構文にほぼ完全な互換性がある
    • 全てのJSコードはTSコードとして正しい

TypeScriptのメリットとは?

型が利用できる

  • 静的に解析できる範囲がとても増える
    • 実行せずにわかることがたくさんある
    • 早期のバグ検出によりデバッグの時間がへり、開発が増える

IDEやエディタがが使いやすくなる

  • コード間の関係性が明確
    • 引数, 返り値, 関数, 変数がすぐわかる
  • 定義へジャンプや正確な入力補完
  • 楽に開発を進められる

TypeScriptの前は?

  • ECMAScript5は非常に使いづらかった
    • JavaとかC#とは異なる形でオブジェクト指向でしんどかった
  • to JSの何か(Alternative JS)で軽減したい
    • CoffeeScript
    • Dart
    • TypeScript
    • Babel & Flowtype

一番優しいAltJSは?

  • CoffeeScriptはES5よりマシ
    • でもバグが多い (型が無い)
    • 型に頼って生きている人には辛い
  • Dart
    • コンパイル後のJSが人間には読めなかった
    • 継続性に確信が持てない → 会社での採用が怖かった (ロックインが怖かった)
  • TypeScript登場
    • ロックイン怖くない! なぜなら、コンパイルするとJSコードになるから → 即採用

ClassをTSで書く

TypeScript (変換前)

export abstract class Animal {
    abstract bark(): string;
    }

export class Cat extends Animal {
    bark(): string {
        return 'にゃん';
    }
}

const cat = new Cat();
console.log(cat.bark());

JavaScript (変換後)

export class Animal {
}

export class Cat extends Animal {
    bark() {
        return 'にゃん';
    }
}
const cat = new Cat();
console.log(cat.bark());

違い

Abstractや型宣言はJSで使えないので、そこが変わっている

型情報ふんだんに利用したコードをコンパイルすると?

Genericsが腑に落ちぬ。。 TODO:調査

Donwpile

function* ってなんだろう。。 TODO:調査

最近の情勢

  • Google社内の標準言語としてTypeScriptが承認される
  • SlackがTypeScriptに移行
    • バグ検出に効果があり

JSとの構文比較

変数に対する型注釈

// 変数名の後に : 型名
let str: string = "";
// 型に反する値を入れるとコンパイルエラー
str = 1;

// 設定次第でnullやundefinedもチェック可能
str = null;
str = undefined;

let = num = 1;
// 値から型推論されるのでnumber以外はダメ
num = "string";

// 配列とかunion型とか
let array: (number | string)[] = [1, "str"];

関数に対する型注釈

// 仮引数の後に : 型名 & 返り値の型名
let twice: (num: number) => number;
twice = num => num * 2;
console.log(twice(2));

// 省略可能引数
let helloA = (word? : string) => {
    word = word || "world";
    return `Hello, ${word}`;
};
console.log(helloA());

// デフォルト値付き引数 (ES2015)
let helloB = (word: string = "world") => {
    return `Hello, ${word}`;
};
console.log(helloB());

構造的部分型

class SampleA {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

interface SampleB {
    name: string;
}

let objA: SampleA = new SampleA("A");
let objB: SampleB = { name: "B" };

// コンパイルエラーにならない!
// SampleAとSampleBは同じ性質を満たすので互換性がある
objA = objB

TypeScriptのVersion Upの歩み

  • 2012/10/01 v0.8.0
  • 2014/04/02 v1.0.0
  • 2016/09/22 v2.0.3
    • ほぼ完成形?
  • 2017/04/28 v2.3.2

2.0以降のTypeScript

  • 型の柔軟さの拡大
  • downpileの対応範囲拡大
  • Quick Fixの拡充
    • async/awaitのサポート
    • generatorのdownpile
    • Babelならできるのにが、ついに解消!

vs Babel

  • 結局どっちを採用すべき?
    • チーム次第
  • TSをオススメする人
    • IDEやリッチなエディタが欲しい
    • JavaやC#が欲しい
    • 安全なリファクタリング

vs 生JavaScript

  • IE11いつ切るの問題
    • 案件の偉い人がIE11 ><...

TypeScript 導入編

  • npm init --yes
  • npm install -D typescript
  • tsc --init
  • npm-scripts
    • "biuld": "tsc"

次のログでようやく、Language Server Protocol について!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@t29mato'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!