Help us understand the problem. What is going on with this article?

TypeScript初心者が知っておくと嬉しいこと

TypeScript初心者が知っておくと嬉しいこと

記事の概要

TypeScriptを学ぶ前に知っているともっとスムーズに理解できたな〜と思ったことを中心にまとめました。

TypeScriptって何?

TypeScriptのコードはコンパイルするとJavaScriptになります。
TypeScriptはJavaScriptとは全く違う言語というわけではありません。
TypeScriptはJavaScriptの構文なので普通のJavaScriptと共存することができます。
静的型付け言語です。

コンストラクタ

TypeScriptはコンストラクタを設定することができます。
コンストラクタは簡単に言うとインスタンスを作成したタイミングで実行されるメソッドのことです。
もう少し具体的に言うとクラスをnewした瞬間に実行される関数のことです。
コンストラクタの詳しい説明は下記のサイトを参考にするとわかりやすいと思います。
コンストラクタの詳しい説明
実際のコードはこんな感じです。

constructor.ts
class User {
    name: string;
    //インスタンス化するとこのcounstructor()が実行されてthis.nameにTaroが入る。
    constructor(name: string){
        this.name = name;
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。

ちなみにコンストラクタの書き方が少し違うのですが、
このconstructor2.tsは上のconstructor.tsと同じ意味になります。

constructor2.ts
class User {
    constructor(public name: string) {
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。

private

コンストラクターの引数にprivate修飾子をつけるとクラス内からは呼ぶことができますが、他のクラスもしくはインスタンスから呼ぶことができなくなります。
private修飾子の変数の名前はわかりやすいようにアンダーバーをつけます。(例 _name)
先ほど紹介したコンストラクタの書き方をふまえてprivateを使ってみます。
具体的なコードはこんな感じです。

constructor.ts
class User {
    constructor(private _name: string) {
    }
}

var taro = new User("Taro");
console.log(taro._name); //「_nameはprivateが付いているからclassの中でしか使えないよ」とエラーが出る。

ゲッターとセッター

「コンストラクタの引数にprivateつけてもclassの外から触りたい!」
「値の設定とか値の取り出しくらいはさせてよー」
というときに使うのがゲッターとセッターです。
TypeScriptはゲッターとセッターを設定することができます。
ゲッターとセッターに関する詳しい説明は下記のサイトを参考にするとわかりやすいと思います。
ゲッターとセッターの詳しい説明
先ほどのconstructor.tsに続いて書いて行きます。

constructor.ts
class User {
    constructor(private _name: string) {
    }

    //ゲッター
    //ゲッターは値を排出します。
    get name() {
        return this._name;
    }

    //セッター
    set name(value: string) {
        this._name = value;
    }
}

var taro = new User("Taro");
console.log(taro.name); //Taroが出力される。
taro.name = "yamada"; //セッターを使ってyamadaを代入。
console.log(taro.name); //yamadaが出力される。

インターフェイス

インターフェイスとは簡単に言うとオブジェクトに名前をつける機能です。

下のコードの例ではResultというインターフェイスを作っています。
するとResult型ができます。Result型はaとbを持っていないとダメということになります。
aとbどちらか一方でも持っていないとエラーが出ます。

具体的なコードはこんな感じです。

interface.ts
//インターフェイスを定義
interface Result {
    a: number;
    b: number;
}

//sum(result: Result)と書くことで引数resultは必ずaとb持たなければならない。
function sum(result: Result) {
    return result.a + result.b;
}

var result = {
    a: 30,
    b: 20
};

console.log(sum(result)); //50が出力される。

この

function sum(result: Result){...}

はResult型のresultという引数だよという意味です。

kotaonaga
武蔵野美術大学の学生をやっています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした