6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

TypeScriptが優秀だと気付いた瞬間〜IDEとの相性抜群〜

Posted at

はじめに

TypeScriptが優秀だと気付いた瞬間の2つ目です。

1つ目はこちら。
TypeScriptが優秀だと気付いた瞬間〜WebAPIが限りなくシンプルに〜

私はIDEにIntelliJを使っていますが、TypeScriptで書いていて非常に使いやすいなと感じる場面があります。そのいくつかを紹介します。
ちなみにこれはIntelliJに限ったことではなく、他のIDEやエディタでも可能だと思います。

コード補完ができる

こういったUserクラスがあるとします。

User.ts
export default class User {
    constructor(
        private _name: string,
        private _age: number,
    ){}

    get name(): string {
        return this._name;
    }

    get age(): number {
        return this._age;
    }
    
    public logName(): void {
        console.log(`name is ${this._name}`);
    }
}

関数sendUserがあるとします。
引数のuserに型定義をしておくと、userのコード補完が行われ、入力が楽になりタイポがなくなります。
qiita_20180909.gif

さらに、コード補完の副次的な効果として、入力が面倒だからという理由で、変数名、メソッド名に適当な短い名前がつけられることが少なくなリます。その結果、必要十分な情報を含む適切な名前付けがされるようになり、コードの可読性が上がります。

リファクタリングしやすい

型定義してあることで、名前の変更がしやすくなります。
下記はIntelliJのRename機能を使って関数名を変更した例です。
参照先全ての名前も適切に変更されます。

qiita_20180909_2.gif

こういった変更が安全にできることで、変数の意味や関数、クラスの振る舞いが変わった時、すぐに適切な名前に変更することができ、読みやすいコードが維持されます。

参照元参照先に飛べる

型定義していると、参照元や参照先にワンクリックで飛べます。
qiita_20180909_3.gif
IntelliJだと、型定義していない場合、同名の関数が他にあると、そちらに飛ばされたり、候補に表示されてしまうことがあります。
それを嫌って、プロジェクト内でユニークになるよう冗長な関数名をつけてしまっては、可読性の下がるコードになってしまいます。

まとめ

IDEを使ったコード補完とリネーム、参照移動の例を紹介しました。
コーディング作業が楽になるという単純なメリットだけでなく、読みやすいコードを保つ働きをするというところが大きいメリットだと私は思います。
型付き言語なら当たり前の機能ですが、型のないJavaScriptではこれができません。
TypeScriptを使うことで可能になるのです。

関連

TypeScriptが優秀だと気付いた瞬間〜WebAPIが限りなくシンプルに〜

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?