Web Design Leaves

function 関数名( 引数: 型 ): 戻り値の型 { 処理内容 }

function add(x: number, y: number): number {
  return x + y;
}

const result = add(3, 8);
console.log(result);  // 11

const result2 = add('a', 'b'); // コンパイルエラー
// Argument of type 'string' is not assignable to parameter of type 'number'.

const result3 = add(1); // コンパイルエラー
// An argument for 'y' was not provided.

function add(x: number, y: number): number {
  return `${x + y}`; // コンパイルエラー
  // error TS2322 Type 'string' is not assignable to type 'number'
}

function add(x: number, y: number): number {
  const result = x + y;
  return result;
}

const sum = add(12, 34);
console.log(sum -10);  // 36

function add(x: number, y: number): number {  // コンパイルエラー
  //A function whose declared type is neither 'undefined', 'void', nor 'any' must return a value.
  const result = x + y;
}

const sum = add(12, 34);
console.log(sum -10);  // NaN

function add(x: number, y: number) {
  const result = x + y;
}

const sum = add(12, 34);
console.log(sum -10);  // NaN（sum の部分にコンパイルエラーが表示される）
// The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

function divide(x: number, y: number) {
  if(y === 0) {
    return null;
  }
  return x / y;
}
console.log(divide(5,20));  // 0.25
console.log(divide(3,0));  // null

function printDivision(x: number, y: number):void {
  console.log(x / y);
}

function printDivision(x: number, y: number):void {
  return x / y; // number 型の値を返しているのでコンパイルエラー
  //  error TS2322: Type 'number' is not assignable to type 'void'.
}

function printDivision(x: number, y: number):void {
  if(y === 0) {
    // y が 0 であれば終了
    return;  // 早期リターン
  }
  console.log(x / y);
}

function 関数名( 引数: 型 ): 戻り値の型 { 処理内容 }

const 変数名 = function ( 引数: 型 ): 戻り値の型 { 処理内容 };

const add = function (x: number, y: number): void {
  console.log(x + y);
};

add(5, 8);  // 13

hello('foo');

function hello(name: string): void {
  console.log(name? 'hello ' + name: 'hello world');
}

hello('foo');  // エラー
// Uncaught ReferenceError: Cannot access 'hello' before initialization
// error TS2454: Variable 'hello' is used before being assigned.

const hello = function (name: string): void {
  console.log(name? 'hello ' + name: 'hello world');
}

const 変数名 = ( 引数: 型 ): 戻り値の型 => { 処理内容 };

const add =  (x: number, y: number): number => {
  return x + y;
};

console.log(add(5, 8)); 

type Rect = {
  width: number;
  height: number;
  color?: string;
}

const getArea = (rect: Rect): number => {
  return rect.width * rect.height;
}

const rect1: Rect = {
  width: 50,
  height:30,
}

const rectArea = getArea(rect1);

console.log(rectArea);  // 1500

const getArea = ({width, height}: Rect): number => {
  return width * height;
}

const getArea = ({width, height}: Rect): number => width * height;

type Rect = {
  width: number;
  height: number;
  color?: string;
}

// 戻り値のオブジェクトの型
type RectArea = {
  area: number;
}

const getArea = ({width, height}: Rect): RectArea => {
  return {area: width * height};
}

const rect1: Rect = {
  width: 50,
  height:30,
}

const rectArea = getArea(rect1);

console.log(rectArea); //{area: 1500}

// 以下はコンパイルエラー
const getArea = ({width, height}: Rect): RectArea => {area: width * height}; 

const getArea = ({width, height}: Rect): RectArea => ({area: width * height});

// 引数のカッコを省略すると、引数と戻り値のどちらも型注釈を書けない
const double = num => num * 2;  // 引数の型注釈を省略するとコンパイルエラー
// error TS7006: Parameter 'num' implicitly has an 'any' type. 

// 引数 val は number と推論される
const arr = [12, 7, 3, 24].filter( val => val < 10);
//const arr = [12, 7, 3, 24].filter((val: number): boolean => val < 10);//型注釈あり
console.log(arr); // [7, 3]

// 引数 elem は string と推論される
["foo", "bar", "baz"].forEach( elem => console.log(elem));  // foo bar baz
//["foo","bar","baz"].forEach((elem:string):void => console.log(elem));//型注釈あり

type User = {
  id: number;
  name: string;
};

const users: User[] = [
  {id:1, name:'foo'},
  {id:2, name:'bar'},
  {id:3, name:'baz'}
];

// 引数 user は User 型 と推論される
const names = users.map( user => user.name );
// const names = users.map((user:User):string => user.name); // 型注釈あり

console.log(names);  // (3) ['foo', 'bar', 'baz']

const obj = {
  double: function(num: number):number {
    return num * 2;
  },
  triple: (num: number):number => num * 3
};

console.log(obj.double(3));  // 6
console.log(obj.triple(3));  // 9

const obj = {
  double(num: number):number {
    return num * 2;
  },
  triple(num: number):number {
    return num * 3;
  }
};

console.log(obj.double(3));  // 6
console.log(obj.triple(3));  // 9

function sum(...params: number[]): number{
  let result = 0;
  for (const num of params) {
    result += num;
  }
  return result;
}

console.log(sum(1,2,3,4));  // 10

const sum = (print: boolean, ...params: number[]): number | void => {
  let result = 0;
  for (const num of params) {
    result += num;
  }
  if(print) {
    console.log(result);
  }else{
    return result;
  }
}

sum(true, 1,2,3);  // 6 と出力
console.log(sum(false, 1,2,3));  // 6

const sum = (...params: number[]): number => {
  let result = 0;
  for (const num of params) {
    result += num;
  }
  return result;
}
const nums: number[] = [1,2,3,4];

// スプレッド構文で引数を指定
console.log(sum(...nums));  // 10
console.log(sum(...nums, 10, ...nums));  // 30

const sumTree = (x: number, y: number, z: number): void => {
  console.log(x + y + z);
}

const nums: number[] = [1,2,3];  // または nums = [1,2,3];（自動推論で number[] 型）

sumTree(...nums);  //
//  error TS2556: A spread argument must either have a tuple type or be passed to a rest parameter.

const sumTree = (x: number, y: number, z: number): void => {
  console.log(x + y + z);
}

// タプル型（要素数が固定された配列）とする
const nums: [number, number, number]  = [1,2,3];
// または const nums = [1,2,3] as const;

sumTree(...nums);  // 6

const add = (x:number, y:number, print?:boolean): number | void => {
  const result = x + y;
  if(print) {
    // print が true であれば計算結果を出力
    console.log(result);
  }else{
    // print が false と判定されれば計算結果を返す
    return result;
  }
}

console.log(add(3, 5)); // 8
console.log(add(3, 5, false)); // 8
add(3, 5, true); // 8

const hello = (name?: string):void => {
  console.log("Hello " + name.toUpperCase); // コンパイルエラー
}
// error TS18048: 'name' is possibly 'undefined'.

const hello = (name?: string): void => {
  if(name) {
    console.log('Hello ', name.toUpperCase() );
  }else{
    console.log('Hello world');
  }
};

hello();  // Hello world
hello('foo');  // Hello FOO

// または以下のいずれでも同じ
const hello = (name?: string): void => {
  console.log(`Hello ${name? name.toUpperCase() : 'world'}`);
};

const hello = (name?: string): void => {
  if (typeof name === "undefined") {
    console.log("Hello world");
  } else {
    console.log("Hello ", name.toUpperCase());
  }
};

const greeting = (when?: string, who: string) => { 中略 } // コンパイルエラー
// error TS1016: A required parameter cannot follow an optional parameter.

const hello = (name: string = 'World'): void => {
  console.log("Hello " + name.toUpperCase());
};

hello();  // Hello WORLD（引数 name を省略した場合はデフォルト値が使われる）
hello('bar');  // Hello BAR

const hello = (name= 'World'): void => {
  console.log("Hello " + name.toUpperCase());
};

type 型の名前 = (引数名: 引数の型) => 戻り値の型;

type Add =  (x: number, y: number) => number;

type Add =  (x: number, y: number) => number;

// アロー関数の型注釈（引数と戻り値の型注釈は省略可能）
const add: Add = (x: number, y: number): number => {
  return x + y;
};

type Add =  (x: number, y: number) => number;

// 関数式の型注釈（引数と戻り値の型注釈は省略可能）
const add: Add = function (num1: number, num2: number): number {
  return num1 + num2;
};

// 関数の型宣言
type Add =  (x: number, y: number) => number;
// 上記で宣言した型をアロー関数の型注釈に使用（引数と戻り値の型注釈は省略）
const add: Add = (x,y) => {
  return x + y;
};

// 関数の型宣言
type Sum = (...args: number[]) => number;
// 上記で宣言した型を関数式の型注釈に使用（引数と戻り値の型注釈は省略）
const sum: Sum = function(...nums) {
  let result = 0;
  for (const num of nums) {
    result += num;
  }
  return result;
}

// 第3引数をオプショナル引数に設定
type Add =  (x: number, y: number, print?: boolean) => number| void;

// 実装側では第3引数にデフォルト引数を指定
const add: Add = (x,y, print=false) => {
  if(print) {
    console.log(x + y);
  }else{
    return x + y;
  }
};

console.log(add(1, 2));
add(3, 4, true);

type Add =  (x: number, y: number) => number;

const add: Add = (x: number, y: number): number => {
  return x + y;
};
console.log(add(1,2)); // 3

const add: (x: number, y: number) => number = (x: number, y: number): number => {
  return x + y;
};
console.log(add(1,2)); // 3

const add: (x: number, y: number) => number = (x, y) => {
  return x + y;
};
console.log(add(1,2)); // 3

type 型の名前 = {
  (引数名: 引数の型): 戻り値の型;
};

type Add = {
  (x: number, y: number): number;
}

const add: Add = (x, y) => x + y;
console.log(add(1,2));  // 3

// メソッド構文
type Add1 = {
  (x: number, y: number): number;
}

// 通常の関数の型宣言の構文
type Add2 = (x: number, y: number) => number;

interface Add {
  (x: number, y: number): number;
};

const add: Add = (x, y) => x + y;

// 関数の実装（関数式）
const add = (x: number, y: number):number  => {
  return x + y;
};

// 上記の実装から関数の型を取得して宣言
type Add = typeof add;

// 型注釈に上記で宣言した型を使用
const addDouble : Add = (x, y) => {
  return (x + y) *2;
}

console.log(addDouble(1,2));  // 6

// 関数の実装（関数宣言）
function add(x: number, y: number):number {
  return x + y;
}
// 上記の実装から関数の型を取得して宣言
type Add = typeof add;

function add(x: number, y: number):number {
  return x + y;
}
 // type 文の右辺の式で使う場合は TypeScript の typeof 型演算子
type Add = typeof add;

// 以下は JavaScript の typeof 演算子
const addType = typeof add;
console.log(addType); // function
console.log(typeof 1); // number

// BasicObject と AdvancedObject という2つの型を定義
type BasicObject = {
  x: number;
}

// AdvancedObject は BasicObject の部分型
type AdvancedObject = {
  x: number;
  y: string;
}

// 基本的な関数型
type BasicFunction = () => BasicObject;

// 戻り値の型が部分型関係にある関数型
type AdvancedFunction = () => AdvancedObject;

// AdvancedFunction 型の関数を定義して変数に代入
const myFunction: AdvancedFunction = () => ({ x: 1, y: 'a' });

// BasicFunction 型の変数に AdvancedFunction 型の変数を代入できる
const basicFunction: BasicFunction = myFunction;
// AdvancedFunction 型は BasicFunction 型の部分型である

// 変数 result は BasicObject 型のオブジェクト
const result: BasicObject = basicFunction();

// result は x と y プロパティを持つオブジェクト
console.log(result);  // {x: 1, y: 'a'}

// BasicFunction 型の関数
const myBasicFunction: BasicFunction = () => ({ x: 1});

// 以下はコンパイルエラー
const myAdvancedFunction: AdvancedFunction = myBasicFunction;
// error TS2322: Type 'BasicFunction' is not assignable to type 'AdvancedFunction'.

// BasicObject と AdvancedObject という2つの型を定義
type BasicObject = {
  x: number;
}

// AdvancedObject は BasicObject の部分型
type AdvancedObject = {
  x: number;
  y: string;
}

//上記の型に基づいてオブジェクトを作成
const basicObj = {
  x: 1
}
const advancedObj = {
  x: 1,
  y: 'a'
}

// 引数が部分型関係にある2つの関数型を定義
type BasicFunction = (obj: BasicObject) => void;
type AdvancedFunction = (obj: AdvancedObject) => void;

// 引数に BasicObject 型を受け取る BasicFunction 型の関数を定義
const myFunction: BasicFunction = (obj: BasicObject) => {
  console.log(obj.x);
};

// BasicFunction 型の関数 myFunction を AdvancedFunction 型の変数に代入可能
const advancedFunction: AdvancedFunction = myFunction;

advancedFunction(advancedObj);  // 1

// AdvancedFunction 型の関数
const myAdvancedFunction: AdvancedFunction = (obj: AdvancedObject) => {
  console.log(obj.x, obj.y);
};

myAdvancedFunction(advancedObj);  // 1 'a'

// 以下はコンパイルエラー
const myBasicFunction: BasicFunction = myAdvancedFunction;
// error TS2322: Type 'AdvancedFunction' is not assignable to type 'BasicFunction'.

// 基本的な関数型
type BasicFunction = (x: number) => void;

// 引数の個数が部分型関係にある関数型（BasicFunction は AdvancedFunction の部分型）
type AdvancedFunction = (x: number, y: string) => void;

// BasicFunction 型の関数を定義して変数に代入
const myFunction: BasicFunction = (x) => {
  console.log(x);
};

// AdvancedFunction 型の変数に BasicFunction 型の変数（関数）を代入できる
const advancedFunction: AdvancedFunction = myFunction;

advancedFunction(1,'a');  // 1

const myAdvancedFunction: AdvancedFunction = (x,y) => {
  console.log(x, y);
}

myAdvancedFunction(1,'a');  // 1 'a'

const myBasicFunction: BasicFunction = myAdvancedFunction;
//  error TS2322: Type 'AdvancedFunction' is not assignable to type 'BasicFunction'.

function identity<T>(arg: T): T {
  return arg;
}

const identity = function identity<T>(arg: T): T {
  return arg;
}

const identity = function<T>(arg: T): T {
  return arg;
}

const identity = <T>(arg: T): T => {
  return arg;
}

const obj = {
  identity: function <T>(arg: T): T {
    return arg;
  }
}
console.log(obj.identity('obj'));

// アロー関数を使って記述
const obj2 = {
  identity: <T>(arg: T): T => {
    return arg;
  }
}

// メソッドの短縮記法
const obj3 = {
  identity <T>(arg: T): T  {
    return arg;
  }
}

function pair<T, U>(x: T, y: U): [T, U] {
  return [x, y];
}

const numStr = pair<number, string>(1, "one");

console.log(numStr);  // [1, 'one']

function printValue<T extends number | string>(value: T): void {
  console.log(value);
}

printValue(5);    // 5（number 型なのでOK）
printValue("hello");  // hello（string 型なのでOK）
printValue(true);  // コンパイルエラー（boolean 型は許可されていない）

type Lengthy = {
  length: number;
}

function logLength<T extends Lengthy>(arg: T): void {
  console.log(arg.length);
}

logLength("Hello"); // 5 （string は length プロパティを持つので OK）
logLength([1, 2, 3]); // 3 （配列も length プロパティを持つので OK）
logLength(42); // コンパイルエラー, number 型は length プロパティを持たない

type User = {
  id: number;
  name: string;
  age: number;
}

function filterProp<T, K extends keyof T>(items: T[], prop: K, value: T[K]): T[] {
  return items.filter(item => item[prop] === value);
}

function filterProp(items, prop, value) {
  return items.filter(item => item[prop] === value);
}

type User = {
  id: number;
  name: string;
  age: number;
}

function filterProp<T, K extends keyof T>(items: T[], prop: K, value: T[K]): T[] {
  return items.filter(item => item[prop] === value);
}

// User 型の配列
const users: User[] = [
  { id: 1, name: 'Foo', age: 22 },
  { id: 2, name: 'Bar', age: 33 },
  { id: 3, name: 'Baz', age: 44 }
];

const baz = filterProp(users, 'name', 'Baz');
const id2 = filterProp(users, 'id', 2);

console.log(baz); // [ {id: 3, name: 'Baz', age: 44} ]
console.log(id2); // [ {id: 2, name: 'Bar', age: 33} ]

// 存在しないキー（id、name、age 以外）を指定するとコンパイルエラーになる
const year = filterProp(users, 'year', 1990); //year によりコンパイルエラー

function changeColor<T extends HTMLElement>(element: T) {
  element.style.color = "red";
  return element;
}

const target = document.getElementById('target');

// 要素が取得できていれば、関数を実行して文字を赤色に
if(target != null) {
  changeColor(target);
}

const identity = function<T>(arg: T): T {
  return arg;
}

type Identity = <T>(arg: T) => T;

// 定義された関数型を型注釈に使用（引数と戻り値の型注釈は省略）
const identity: Identity = function(arg) {
  return arg;
}

interface Identity {
  <T>(arg: T): T;
}

const repeatIt = <T>(value: T, n: number): T[] => {
  const result:T[] = [];
  for(let i=0; i < n; i++) {
    result.push(value);
  }
  return result;
}

type RepeatIt = <T>(value: T, n: number) => T[];

const repeatIt: RepeatIt = (value, n: number) => {
  const result = [];
  for(let i=0; i < n; i++) {
    result.push(value);
  }
  return result;
}

interface RepeatIt {
  <T>(value: T, n: number) : T[];
}

try {
  // try ブロック
} catch (error) {
  // catch ブロック（エラーオブジェクト error を受け取る）
}

try {
  // try ブロック
} catch (error) {
  // catch ブロック
} finally {
  // finally ブロック（このブロックは例外の発生に関係なく必ず実行される）
}

try {
  printHello('foo');  // 実行される
  printHello(''); // 例外が発生するので catch ブロックに移行
  console.log('これは出力されない');  // 実行されない
} catch (error) {
  // 発生したエラーオブジェクト（error）をエラーとして出力
  console.error(error);
}

console.log('終了'); // 例外は捕捉されたので実行される

function printHello(str: string): void {
  if(str.length === 0){
    throw new Error("文字数が0です");
  }
  console.log(`Hello,${str}!`);
}

Hello,foo!  // printHello('foo') の実行結果（try ブロック）
Error: 文字数が0です  // printHello('') で発生する例外のエラーメッセージ（catch ブロック）
    at printHello (index.js:14:15)
    at index.js:4:5
終了  // console.log('終了') の実行結果

// Error クラスを継承して独自の例外クラスを定義
class CustomError extends Error {
  // コンストラクタのオーバーライド
  constructor(message: string) {
    // 親クラスのコンストラクタの呼び出し
    super(message);
    // name プロパティを設定
    this.name = "CustomError";
  }
}

// CustomError の例外を投げる関数
function throwCustomError(): never {
  throw new CustomError("This is a custom error");
}

try {
  // 例外が発生する可能性があるコード
  throwCustomError(); // 確認のため例外を発生させる
} catch (error) {
  if (error instanceof CustomError) {
    // 例外が CustomError の場合の処理
    console.error("Custom error caught:", error.message);
  } else if (error instanceof Error) {
    // 例外が CustomError 以外の場合の処理
    console.error("Unexpected error:", error.message);
  }
}

// コンソールに以下が出力される
// Custom error caught: This is a custom error

class CustomError extends Error {
  constructor(message: string) {
    super(message);
    this.name = "CustomError";
  }
}
function throwCustomError(): never {
  throw new CustomError("This is a custom error");
}

// 型ガード関数
function isCustomError(error: unknown): error is CustomError {
  // error が CustomError かどうかの真偽値を返す
  return error instanceof CustomError;
}

try {
  throwCustomError();
} catch (error) {
  // 型ガード関数で判定
  if (isCustomError(error)) {
    // error は CustomError である
    console.error("Custom error caught:", error.message);
  } else {
    // error は CustomError ではない（error をそのまま出力：プロパティにアクセスしない）
    console.error("Unexpected error:", error);
  }
}