【初学者向け】ES6で追加されたJavaScriptの機能をTypeScriptで書く

// 宣言
let fruit: string = "apple";

console.log(fruit); // apple

// 再代入可能
fruit = "banana";
console.log(fruit); // banana

// 再宣言できない
let fruit: string = "orange"; // エラー

// 宣言
const age: number = 30;

console.log(age); // 30

// 再代入、再宣言できない
age = 40; // エラー
const age = 50; // エラー

// function 関数名() {}
function addNumber(num1: number, num2: number): number {
  return num1 + num2;
}

console.log(addNumber(1, 2)); // 3

// const 関数名 = function() {}
const subNumber = function (num1: number, num2: number): number {
  return num1 - num2;
};

console.log(subNumber(3, 1)); // 2

const addNumber = (num1: number, num2: number): number => {
  return num1 + num2;
};

console.log(addNumber(1, 2)); // 3

// 処理が1行の場合は{}とreturnを省略できる
const subNumber = (num1: number, num2: number): number => num1 - num2;

console.log(subNumber(3, 1)); // 2

// 基本形
const 関数名 = (変数) => {
  // 処理
};

// 処理が1行の場合は{}とreturnを省略できる
const 関数名 = (引数) => 処理;

// 変数が1つの場合は()を省略できる
const 関数名 = 引数 => 処理;

// 3つとも同じアロー関数

const doubleNumber = (num: number): number => {
  return num * 2;
};

const doubleNumber = (num: number): number => num * 2;

const doubleNumber = num: number: number => num * 2; // TypeScriptで型宣言するとエラーになりました
const doubleNumber = num => num * 2; //型宣言しなければ書ける

const name: string = "花子";
const age: number = 24;

// +で変数と文字列を連結する
const selfIntroduction: string = name + "さんは" + age + "歳です。";

console.log(selfIntroduction); // 花子さんは24歳です。 

const name: string = "花子";
const age: number = 24;

// テンプレート文字列を使用
const selfIntroduction: string = `${name}さんは${age}歳です。`;

console.log(selfIntroduction); // 花子さんは24歳です。

const name: string = "花子";
const age: number = 24;

// ${}の中で演算できる
const selfIntroduction: string = `${name}さんは来年${age + 1}歳です。`;

console.log(selfIntroduction); // 花子さんは来年25歳です。 

/**
 * オブジェクト
 */
const personalInfo = {
  name: "ゆーたろー",
  age: 29
};
// 分割代入
const { name, age } = personalInfo;

console.log(`私の名前は${name}で、年齢は${age}歳です`);
// 私の名前はゆーたろーで、年齢は29歳です

/**
 * 配列
 */
const fruitInfo = ["バナナ", 200];
// 分割代入
const [name, price] = fruitInfo;

console.log(`${name}は${price}円です`);
// バナナは200円です

const personalInfo = {
  name: "ゆーたろー",
  age: 29
};

// 分割代入を使わない
const name = personalInfo.name;
const age = personalInfo.age;

// 分割代入を使う
const { name, age } = personalInfo;

// オブジェクトのプロパティ名と揃えないとエラーになる
const { a, b } = personalInfo; // エラー

// interface定義
interface personalInfoInterface {
  name: string;
  age: number;
}

// 型定義でinterfaceを設定する
// OK
const personalInfo: personalInfoInterface = {
  name: "ゆーたろー",
  age: 29
};

// NG（ageはnumber型のみ許可される）
const personalInfo: personalInfoInterface = {
  name: "ゆーたろー",
  age: "29歳" // エラー
};

// デフォルト値の設定なし
const doubleNumber = (num: number): string => `${num}の2倍は${num * 2}です!`;

console.log(doubleNumber(3)); // 3の2倍は6です!

// デフォルト値設定
const doubleNumber = (num: number = 4): string =>`${num}の2倍は${num * 2}です!`;

console.log(doubleNumber()); // 4の2倍は8です!

// 型宣言が無い方がわかりやすいと思うので載せておきます
const doubleNumber = (num = 4) => `${num}の2倍は${num * 2}です!`;

console.log(doubleNumber()); // 4の2倍は8です!

const numArray: number[] = [1, 10, 100];

console.log(...numArray); // 1 10 100

const numArray: number[] = [1, 10, 100];

const sumNumber = (num1: number, num2: number, num3: number): number =>
  num1 + num2 + num3;

console.log(sumNumber(numArray[0], numArray[1], numArray[2])); // 111
// 関数の引数に適用
console.log(sumNumber(...numArray)); // 111

const fruitsArray: string[] = ["apple", "banana", "orange", "melon", "peach"];

// 分割代入＋スプレッド構文
// ３つ目の要素（fruitsArray[2]）以降は全てfruit3に代入
const [fruit1, fruit2, ...fruit3] = fruitsArray;

console.log(fruit1); // apple
console.log(fruit2); // melon
console.log(fruit3); // ["orange", "melon", "peach"]

// これはエラーになる
const [fruit1, ...fruit2, fruit3] = fruitsArray;

class animal {
  // プロパティ
  animalType: string;
  voice: string;

  // コンストラクタ
  constructor(animalType: string, voice: string) {
    this.animalType = animalType;
    this.voice = voice;
  }

  // メソッド
  cry() {
    return `${this.animalType}は${this.voice}と鳴きます。`;
  }
}

// animalクラスのインスタンス作成
const dog = new animal("犬", "ワン!");
console.log(dog.cry()); // 犬はワン!と鳴きます。