Web Design Leaves

interface Promise<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): Promise<TResult1 | TResult2>;

    /**
     * Attaches a callback for only the rejection of the Promise.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of the callback.
     */
    catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult>;
}

then<TResult1 = T, TResult2 = never>(
  onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>)| undefined| null,
  onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>)| undefined| null
): Promise<TResult1 | TResult2>;

Promise<string>.then<string, never>(
  onfulfilled?: ((value: string) => string | PromiseLike<string>) |null|undefined,
  onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined
): Promise<string | never>

catch<TResult = never>(
  onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null
): Promise<T | TResult>;

// 文字列を結果に持つ Promise を返す関数
function hello(delay: number) {
  return new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve(`Hello (delay: ${delay}ms)`);
    }, delay);
  });
}

// 数値を結果に持つ Promise を返す関数
function randomNum(delay: number) {
  return new Promise<number>((resolve) => {
    setTimeout(() => {
      const rand = Math.floor( Math.random() * 10 );
      resolve(rand);
    }, delay);
  });
}

// それぞれの then メソッドのコールバックの引数の型は自動的に推論される
hello(500).then((result)=> { // result は string 型
  console.log(result.length); // 20（結果の文字列の文字数）
  return hello(1000);
}).then((result)=> { // result は string 型
  console.log(result.toUpperCase());  // HELLO (DELAY: 1000MS)
  return randomNum(1000);
}).then((result)=> { // result は number 型
  console.log(result * 3);  // randomNum(1000)の値 *3
  return false;
}).then((result)=> { // result は boolean 型
  console.log(result); // false
});

// then メソッドの戻り値の型を指定する例
hello(500).then<string>((result)=> {
  console.log(result.length);
  return hello(1000);  // string 型の結果を持つ Promise を返す
}).then<number>((result)=> { // result は string
  console.log(result.toUpperCase());
  return randomNum(1000);  // number 型の結果を持つ Promise を返す
}).then<boolean>((result)=> { // result は number
  console.log(result * 3);
  return false; // boolean 型の結果を持つ Promise を返す
}).then<void>((result)=> { // result は boolean
  console.log(result); // 何も返さない
});

function hello(delay: number) {
  return new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve(`Hello (delay: ${delay}ms)`);
    }, delay);
  });
}

// thenメソッドの戻り値の型 <string | number> を指定しないとコンパイルエラーになる例
hello(500).then<string | number>((result)=> {
  const length = result.length;
  if(length > 5) {
    return hello(1000);
  }else{
    return length;
  }
}).then((result)=> {  // result は string | number
  if(typeof result === "string") {
    console.log(result.toUpperCase());
  }else{
    console.log(result * 10);
  }
});

// 関数の戻り値に型注釈を指定
function getEvenNum(delay:number): Promise<number> {
  // Promise オブジェクトを生成して返す
  return new Promise((resolve, reject) => {
    // 非同期処理
    setTimeout(() => {
      const rand = Math.floor( Math.random() * 10 );
      if(rand % 2 === 0) {
        // 処理が成功した場合
        resolve(rand);
      }else{
        // 処理が失敗した場合
        reject(new Error(`偶数ではありません。値：${rand}`))
      }
    }, delay);
  });
}

// value は number 型と推論される
getEvenNum(300)
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.warn(error.message);
  });

function getEvenNum(delay:number) {
  // Promise のインスタンスを生成する際に型を指定
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      const rand = Math.floor( Math.random() * 10 );
      if(rand % 2 === 0) {
        resolve(rand);
      }else{
        reject(new Error(`偶数ではありません。値：${rand}`))
      }
    }, delay);
  });
}

// 関数の戻り値に型注釈を指定
const getEvenNum = (delay:number): Promise<number> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const rand = Math.floor( Math.random() * 10 );
      if(rand % 2 === 0) {
        resolve(rand);
      }else{
        reject(new Error(`偶数ではありません。値：${rand}`))
      }
    }, delay);
  });
}

// Promise のインスタンスを生成する際に型を指定
const getEvenNum = (delay:number) => {
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      const rand = Math.floor( Math.random() * 10 );
      if(rand % 2 === 0) {
        resolve(rand);
      }else{
        reject(new Error(`偶数ではありません。値：${rand}`))
      }
    }, delay);
  });
}

function loadimage(src: string) {
  // Promise オブジェクトを生成し返す
  return new Promise<HTMLImageElement>((resolve, reject) => {
    const img = document.createElement('img');
    img.src = src;
    // 画像のロードに成功した場合：resolve を呼び出して結果（img）を引数に渡す
    img.onload = () => resolve(img);
    // 失敗した場合：reject を呼び出してエラーオブジェクトを引数に渡す
    img.onerror = () => reject(new Error(`Error: Image Not Found "${src}".`));
  });
}

//then メソッドを使用
loadimage('images/sample.jpg').then(
  // img: HTMLImageElement
  (img) => {console.log(`height:${img.height} / width:${img.width}`)}
).catch((error) => {
  // error: any
  console.warn(error.message);
});

async function asyncDouble(x: number): Promise<number> {
  return x * 2;
}

const promise = asyncDouble(3); // 確認のため async 関数の戻り値を変数に代入
console.log(promise);  // Promise {<fulfilled>: 6}

promise.then(result => {
  console.log(`result: ${result}`);  // result: 6
});

async function asyncDouble(x: number) {
  return Promise.resolve(x * 2);
}

async function asyncDouble(x: number) {
  return new Promise<number>((resolve) => {
    resolve(x * 2);
  })
}

async function asyncDouble(x: number): Promise<number>  {
  return new Promise((resolve) => {
    resolve(x * 2);
  })
}

// 関数宣言
async function asyncDouble(x: number): Promise<number> {
  return x * 2;
}

// 関数式
const asyncDouble = async function(x: number): Promise<number> {
  return x * 2;
}

// アロー関数
const asyncDouble = async (x: number): Promise<number> => {
  return x * 2;
}

class AsyncCalc {
  // async メソッド（戻り値の型注釈は省略可能）
  async double(x: number): Promise<number> {
    return x * 2;
  }
}

const asyncCalc = new AsyncCalc(); // インスタンスを作成
const promise = asyncCalc.double(3); // 確認のため async メソッドの戻り値を変数に代入
console.log(promise);  // Promise {<fulfilled>: 6}

promise.then(result => {
  console.log(`result: ${result}`);  // result: 6
});

class AsyncCalc {
  // アクセス修飾子は async の前に付ける
  public async double(x: number): Promise<number> {
    return x * 2;
  }
}

async function throwError() {
  throw new Error('Error !!!');
}

const promise = throwError(); // 確認のため async 関数の戻り値を変数に代入
console.log(promise); // Promise {<rejected>: Error: Error !!! ...}

promise.catch((e: Error) => {
  console.log(e.message);  // Error !!!
});

// 以下でも同じ
promise.then( undefined, (e: Error) => {
  console.log(e.message); // Error !!!
});

async function asyncFunc(): Promise<void> {
  // 何も値を返さない
  console.log('hello');  // 同期的なタイミングで出力される
}

const promise = asyncFunc();
console.log(promise);  // Promise {<fulfilled>: undefined}

promise.then(value => {
  console.log(value); // undefined
});

// 指定された秒数後に文字列を結果に持ち成功する Promise を返す関数
function delayed_hello(delay: number) {
  return new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve(`Hello! ${delay}ms passed `);
    }, delay)
  })
}

// async 関数
async function asyncFunc(delay: number): Promise<void> {
  // await を指定（非同期処理が完了したら結果の値が返される）
  const result = await delayed_hello(delay) ;
  // 上記の処理が完了したら以下が実行される
  console.log(result);
}

asyncFunc(2000);  // Hello! 2000ms passed

function delayedDouble(x: number, delay: number) {
  return new Promise<number>((resolve) => {
    setTimeout(() => {
      resolve(x * 2);
    }, delay)
  })
}

async function main(): Promise<number> {
  const result1 = await delayedDouble(1, 1000);
  console.log(`result1: ${result1}`);  // result1: 2（1秒後）
  const result2 = await delayedDouble(2, 2000);
  console.log(`result2: ${result2}`);  // result2: 4（3秒後）
  const result3 = await delayedDouble(3, 3000);
  console.log(`result3: ${result3}`);  // result3: 6（6秒後）
  // 数値を返す（数値を結果に持つ Promise が返される）
  return result1 + result2 + result3;
}

const promise = main();  // 戻り値の Promise を確認するために変数に代入
console.log(promise);  // Promise の状態は時間の経過により変化

promise.then((total) => {
  console.log(`total: ${total}`); // total: 12（約6秒後）
});

function delayedDouble(x: number, delay: number) {
  return new Promise<number>((resolve) => {
    setTimeout(() => {
      resolve(x * 2);
    }, delay)
  })
}

let total = 0;
const promise = delayedDouble(1, 1000).then((result)=> {
  total += result;
  console.log(`result1: ${result}`);  // result1: 2（1秒後）
  return delayedDouble(2, 2000);
}).then((result)=> {
  total += result;
  console.log(`result2: ${result}`);  // result2: 4（3秒後）
  return delayedDouble(3, 3000);
}).then((result)=> {
  total += result;
  console.log(`result3: ${result}`);  // result3: 6（6秒後）
  return total;
}).then((total)=> {
  console.log(`total: ${total}`); // total: 12（約6秒後）
  return total; // promise の結果の値を 12 とする（指定しない場合は結果の値は undefined）
});

console.log(promise); // Promise の状態は時間の経過により変化

// アクセスする URL
const url = 'https://jsonplaceholder.typicode.com/posts/1';

// 取得するデータの型を定義
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
}

fetch(url).then((response) => {
  const result: Promise<Post> = response.json();
  return result;
})
.then((data) => {
  console.log(data.title);
})
//エラーの場合の処理
.catch((error: Error) => {
  console.log(error.message);
});

fetch(url).then((response) => {
  // ステータスが ok でなければ例外を投げる
  if(!response.ok) {
    throw new Error(`リクエスト失敗: ${response.status}`);
  }
  const result: Promise<Post> = response.json();
  return result;
})
.then((data) => {
  console.log(data.title);
})
//エラーの処理（ステータスが ok でない場合）
.catch((error) => {
  console.log(error.message);
});

async function fetchPost(url: string): Promise<Post> {
  const response = await fetch(url);
    // ステータスが ok でなない場合は例外を投げる
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    // ステータスが ok であればデータを取得して返す（戻り値の変数を Post 型に注釈）
    const data: Post = await response.json();
    return data;
}

fetchPost(url).then((data) => {
  // data は Post 型
  console.log(data.title);
})
//エラーの処理
.catch((error) => {
  console.log(error.message);
});

async function fetchPost(url: string): Promise<Post|undefined> {
  try {
    const response = await fetch(url);
    // ステータスが ok でなない場合は例外を投げる
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    // ステータスが ok であればデータを取得して返す
    const data: Post = await response.json();
    return data;
  } catch (error) {
    // エラーの処理
    if (error instanceof Error) { // error は unknown 型なので絞り込みが必要
      console.log(error.message);
    }
  }
}

// ステータスに関わらず成功時のコールバックが呼び出される
fetchPost(url).then((data) => {
  // data が undefined でなければ data にアクセス
  if(data) {
    console.log(data.title);
  }
  // 以下はステータスに関わらず必ず実行される
  console.log('完了');
});

async function fetchJsonData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`リクエスト失敗: ${response.status}`);
  }
  const data: T = await response.json();
  return data;
}

// アクセスする URL
const url = 'https://jsonplaceholder.typicode.com/todos/1';

// 取得するデータの型 Todo を定義
type Todo = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

// URL と取得するデータの型（Todo）を指定して then のコールバックで処理を定義
fetchJsonData<Todo>(url).then((data) => {
  // data は Todo 型の値
  console.log(`  id: ${data.id}
  title: ${data.title}
  completed: ${data.completed}
  User Id: ${data.userId}`);
}).catch((error) => {
  // エラー処理
  console.warn(error.message);
});;

/* 出力
id: 1
title: delectus aut autem
completed: false
User Id: 1
*/

async function fetchJsonData<T>(url: string): Promise<T | undefined> {
  // try-catch 構文を使って例外を捕捉
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    const data: T = await response.json();
    return data;
  } catch (error) {
    // error は unknown 型なので Error のインスタンスであることを確認
    if (error instanceof Error) {
      console.log(error.message);
    }
  }
}

// アクセスする URL
const url = "https://jsonplaceholder.typicode.com/posts/1";

// 取得するデータの型を定義
type Post = {
  userId: number;
  id: number;
  title: string;
  body: string;
};

// URL と取得するデータの型を指定して then のコールバックで処理を定義
fetchJsonData<Post>(url).then((data) => {
  // data が undefined でなければ
  if (data) {
    // data は Post 型
    console.log(`title: ${data.title}
body: ${data.body}`);
  }
});

/* 出力
title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit
body: quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto
*/

// リクエストのURL
const url = "https://jsonplaceholder.typicode.com/posts";

// POST するデータ
const postData = {
  title: "foo",
  body: "Lorem ipsum dolor sit",
  userId: 1,
};

// Fetch オプションの設定（RequestInit はオプションのためのオブジェクト型）
const reqOptions: RequestInit = {
  // POST を設定
  method: "POST",
  headers: {
    // データの形式に合わせて Content-Type を設定
    "Content-Type": "application/json",
    // 他に必要なヘッダーがあれば追加
  },
  // データを JSON 形式の文字列に変換して設定
  body: JSON.stringify(postData),
};

// レスポンス（取得するデータ）の型
type ResType = {
  title: string;
  body: string;
  userId: number;
  id: number;
};

// fetch を使用して POST リクエストを送信
fetch(url, reqOptions)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    const result: Promise<ResType> = response.json(); // 応答をJSON形式で解析
    return result;
    // 上記の2行は return response.json() as Promise<ResType>; でもほぼ同じ
  })
  .then((data) => {
    console.log('Success:', data);
    console.log(data.title, "\n", data.body);
  })
  .catch((error) => {
    console.warn("Error:", error);
  });

/* 出力（擬似的なレスポンス）
Success: {title: 'foo', body: 'Lorem ipsum dolor sit', userId: 1, id: 101}
foo
Lorem ipsum dolor sit
*/

async function postData<T>(url:string, options:RequestInit):Promise<T | undefined> {
  try {
    const response = await fetch(url, options);
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    const data: T = await response.json();
    return data;
  } catch (error) {
    if (error instanceof Error) {
      console.log(error.message);
    }
  }
}

// 使用例
const url = "https://jsonplaceholder.typicode.com/posts";

// POST するデータ
const requestData = {
  title: "bar",
  body: "Recusandae voluptatem",
  userId: 2,
};

// Fetch オプションの設定
const reqOptions: RequestInit = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(requestData),
};

// レスポンス（取得するデータ）の型
type ResType = {
  title: string;
  body: string;
  userId: number;
  id: number;
};

// 定義した関数を実行
postData<ResType>(url, reqOptions).then((data) => {
  if(data) {
    console.log('Success:', data);
    console.log(data.title, "\n", data.body);
  }
});

/* 出力（擬似的なレスポンス）
Success: {title: 'bar', body: 'Recusandae voluptatem', userId: 2, id: 101}
bar
Recusandae voluptatem
*/

async function fetchData<T>(
  resource: RequestInfo, // 文字列または Request オブジェクト
  options?: RequestInit // オプショナル
): Promise<T | undefined> {
  try {
    const response = await fetch(resource, options);
    if (!response.ok) {
      throw new Error(`リクエスト失敗: ${response.status}`);
    }
    const data: T = await response.json();
    return data;
  } catch (error) {
    if (error instanceof Error) {
      console.log(error.message);
    }
  }
}

// レスポンスで取得するオブジェクトの型（レスポンスは配列）
type ResType = {
  title: string;
  body: string;
  userId: number;
  id: number;
};

// 第1引数に URL を指定してデータのみを取得する例（第2引数は省略）
fetchData<ResType[]>("https://jsonplaceholder.typicode.com/posts").then((data) => {
  if (data && data[0]) {
    console.log(data[0].title, "\n", data[0].body);
  }
});

// POST するデータ
const requestData = {
  title: "bar",
  body: "Recusandae voluptatem",
  userId: 2,
};

// Request オブジェクトを作成
const request = new Request("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(requestData),
});

// レスポンスで取得するオブジェクトの型
type ResType = {
  title: string;
  body: string;
  userId: number;
  id: number;
};

// Request オブジェクトを引数に指定して実行
fetchData<ResType>(request).then((data) => {
  if (data) {
    console.log("Success:", data);
    console.log(data.title, "\n", data.body);
  }
});

declare function fetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response>;