TypeScriptの基本文法まとめ

TypeScriptの基本的な書き方を整理した個人的なメモ
※TypeScript 4.8.2 で動作確認済み

基本文法

■ if文の使用例

const sample: string = '3';

if (sample === '1') {
  console.log('sampleの値は1です。');
} else if (sample === '2') {
  console.log('sampleの値は2です。');
} else {
  console.log('sampleの値は1でも2でもありません。');
}

■ 3項演算子の使用例

const sample: number = 1;
const result = sample === 1 ? true : false;
console.log(result);

■ for文の使用例

for (let count = 0; count < 10; count++) {
  console.log(count);
}

■ Array.prototype.forEach()メソッドの使用例

const arrays: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

arrays.forEach((value) => {
  console.log(value);
});

■ Array.prototype.map()メソッドの使用例

const arrays: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// この例では、元々の配列の各要素の2倍の値を要素に持つ配列を生成している
const resultList: number[] = arrays.map((value) => {
  return value * 2;
});

console.log(resultList);

■ Array.prototype.filter()メソッドの使用例

const arrays: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// この例では、元々の配列の各要素のうち、2の倍数の値のみを要素に持つ配列を生成している
const resultList: number[] = arrays.filter((value) => {
  return value % 2 === 0;
});

console.log(resultList);

■ Array.prototype.reduce()メソッドの使用例

const arrays: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// この例では、配列の各要素の和を計算している
const total: number = arrays.reduce((accumulator, currentValue) => {
  // accumulator 側に、配列の各要素の値が加算されていく
  return accumulator + currentValue;
});

console.log(total);

■ 分割代入の使用例

const arrays: number[] = [1, 2, 3];

type ObjectType = {
  key1: number;
  key2: string;
};

const obj: ObjectType = {
  key1: 1,
  key2: 'a',
};

// 配列の分割代入
const [one, two, three] = arrays;
console.log(one, two, three);

// オブジェクトの分割代入
const { key1, key2 } = obj;
console.log(key1, key2);

■ スプレッド構文の使用例

const arrays: number[] = [1, 2, 3];

type ObjectType = {
  key1: number;
  key2: string;
};

const obj: ObjectType = {
  key1: 1,
  key2: 'a',
};

// 配列のスプレッド構文
console.log([...arrays, 4]);

// オブジェクトのスプレッド構文
console.log({ ...obj, key2: 'b' });

少し応用的なTIPS

■ 整数が順番に並んだ配列を生成する方法

const listSize: number = 3;

const resultList = [...Array(listSize)].map((_, index) => {
  return index + 1;
});

console.log(resultList);

■ 対象の値が配列の中に含まれているか確認する方法

const targetString: string = 'cat';
const referenceStringList: string[] = ['cat', 'dog'];

if (referenceStringList.indexOf(targetString) !== -1) {
  console.log(targetString + 'は配列に含まれています。');
} else {
  console.log(targetString + 'は配列に含まれていません。');
}

■ 対象のキーがオブジェクトの中に含まれているか確認する方法

type ObjectType = {
  key1: number;
  key2: string;
};

const obj: ObjectType = {
  key1: 1,
  key2: 'a',
};

const tagetKeyName: string = 'key1';

if (tagetKeyName in obj) {
  console.log(tagetKeyName + 'はオブジェクトに含まれています。');
} else {
  console.log(tagetKeyName + 'はオブジェクトに含まれていません。');
}

参考資料

[...Array(n).keys()] はやめた方がいいのでは？
「整数が順番に並んだ配列を生成する方法」について、同様の処理が何度も出てくるようであれば上記のサイトで紹介されている方法を採用した方が良さそう