---

---

【TypeScript】グローバル関数のthisの型を指定する

投稿日：2020年12月25日

TypeScript、JavaScriptではグローバルな関数のthisが暗黙的に割り当てられるために注意が必要です。TypeScriptの型指定の機能を使うことでこのthisの割り当てを危険性の低いものに変えることができます。

---

実践

thisの問題点

function sendGreeting() {
    console.log(`Hello ${this.getFullName()}`);
}

class User {
    public readonly firstName: string;
    public readonly lastName: string;
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

function sendGreeting() {
    console.log(`Hello ${this.getFullName()}`);
}

let user = new User("mars", "quai");

// [ 1 ] callを使った呼び出し
sendGreeting.call(user);

// [ 2 ] applyを使った呼び出し
sendGreeting.apply(user);

// [ 3 ] bindを使った呼び出し
const userSendGreeting = sendGreeting.bind(user);
userSendGreeting();

sendGreeting(); // Error

thisの型指定

// Interfaceを定義
interface Person {
    firstName: string;
    lastName: string;
    getFullName(): string;
}

// Interfaceを継承
class User implements Person {
    public readonly firstName: string;
    public readonly lastName: string;
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    getFullName(): string {
        return `${this.firstName} ${this.lastName}`;
    }
}

// this
function sendGreeting(this: Person) {
    console.log(`Hello ${this.getFullName()}`);
}

sendGreeting();  // 型 'void' の 'this' コンテキストを型 'Person' のメソッドの 'this' に割り当てることはできません。ts(2684)

thisの型指定の強制

{
    "compilerOptions": {
        "noImplicitThis": true
    }
}

function sendGreeting() {
    console.log(`Hello ${this.getFullName()}`);  // [Error] 'this' は型として注釈を持たないため、暗黙的に型 'any' になります。
}

---

さいごに

参考URL

---

---

---