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

TypeScriptのstaticアクセス修飾子を使う時理解する4つの事

More than 3 years have passed since last update.

TypeScriptのstaticアクセス修飾子を理解する4つの事

publicとprivateはなんとなくわかるのですが、たまーにstaticってどういう役割なんだっけなって(ちょっと恥ずかしいけど)なるので(protectはいいや)
この際意識の上に上げる。。

下記ようなコードを書きました。
Errorです

やりたい事

「インスタンスメソッド経由でstaticメソッドを呼び出し別のstaticメンバの値を取得すること」

※このコードのどこが悪いかお気付きの方はさようなら。東京行っても頑張ってください。

下記のコード:TypeScriptPlayground

class Faa {
    static named : string = 'eee';
    constructor(private name?: string){
    }
    get getName() : string{
        return this.name
    }
    set getName(name:string){
        this.name = name;
    }
    static main(){
        alert(Faa.named)
    }
}
Faa.main()//ok //e.g
var h1 = new Faa()
h1.main()//Error
//typescript compile Error → property 'main' does not exist on type of Faa 
//consoleError → "h1.main is not a function" 

getter、setterとかはダミーです

static

①クラスに紐づくメンバ(静的メンバ)
②アクセスは「Class名.メンバ名」。非static内からの呼び出す場合もこの記述
③static内からstaticなメンバにアクセスするには「this.メンバ名」
④静的メンバは型引数を参照できない

staticだと何が嬉しいのか

・インスタンスを生成しなくても静的メソッドを実行できる(上のコードの「//ok //e.g」部分)
・同じクラスから生成されたインスタンスが静的メンバを共有できる(下で説明)

つまり僕はこうしなくてはいけなかったんです。
下記のコード:TypeScriptPlayground

class Faa {
    static named : string = 'eee';
    constructor(private name?: string){
    }
    get getName() : string{
        return this.name
    }
    set getName(name:string){
        this.name = name;
    }
//追加/////////
    public main(){//インスタンスメソッド経由で呼び出す
        Faa.main()
    }
//////////////
    static main(){
        alert(Faa.named)
    }
}
var h1 = new Faa()
h1.main()

パブリックなインスタンスメンバを経由して静的メンバへアクセスする。
なんかget,setに似てる。。

生成されたJSをみると紐づくオブジェクトが違うね

    Faa.prototype.main = function () {//public
        Faa.main();
    };
    Faa.main = function () {//static
        alert(Faa.named);
    };

「同じクラスから生成されたインスタンスが静的メンバを共有できる」ってなあに?

こうだよ
下記のコード:TypeScriptPlayground

interface Iman{
    giveManey(): number;
}
class Man<T> implements Iman{
    static saifcontent :number = 0;
    static giveManey<T>(maney:number){
        this.saifcontent += maney;
    }
    public giveManey<T>(){
        return Man.saifcontent;
    }
}
Man.giveManey(1000);//1000
var dd = new Man<number>()
console.log(dd.giveManey())//別インスタンスでもこの時点でstatic財布を共有している。1000
Man.giveManey(2000);//3000
var cc = new Man();
console.log(cc.giveManey())//別インスタンスでもこの時点でstatic財布を共有しているので3000
Man.giveManey(500);//3500

alert(Man.saifcontent);

同じ親クラスから派生したインスタンスが変化する親クラスのstaticの値を共有していることがわかります。

「静的メンバは型引数を参照できない」ってなあに?

なるほど。。

class X<T>{
  static a:T;//static menbers cannot reference class type paramerters
}

staticなメンバーはclass型のパラメーターを参照できないってエラーでます。
staticにこういうことはやりませんよね。

まとめ(TypeScriptのstaticアクセス修飾子を理解する4つの事)

①クラスに紐づくメンバ(静的メンバ)
②アクセスは「Class名.メンバ名」。非static内からの呼び出す場合もこの記述
③static内からstaticなメンバにアクセスするには「this.メンバ名」
④静的メンバは型引数を参照できない

最後に

staticをマヨつけて食べたい

M-ISO
先輩芸人の運転手していた29歳の頃、芸人の中でも何か一芸を身に付けたいと思い、初海外単身インドへ、その後世界から発信したいと思いWebを習い始める。そのうちJavaScriptが好きになり...React/Redux/TypeScript/vim/JavaScript/Apollo/株式会社TerraceTech代表取締役/フロントエンドエンジニア
https://kenjimorita.jp/aboutme/
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
ユーザーは見つかりませんでした