Typescript学習 備忘録

動作確認環境

学んだこと

型、文字列型、数値型、真偽型、配列型、オブジェクト型、any型、ninion型、undefined型、null型、変数、定数、テンプレート文字列、スプレッド演算子、分割代入、関数、アロー関数、クラス、アクセス修飾子、アクセサメゾット、クラスの継承、インターフェイス、ジェネリック

サンプルコード

sample.ts

// 文字列
var title: string = 'Angular';
title = 'angular';

//　数値型
var n: number = 0;

//　真偽値型
var isOpen: boolean = true;

// 配列型
var keywords: (string | number)[] = ['name', 'email', 'bady', 0];

// タブル型
var parment: [number, string, number] = [1, 'apple', 0];

// オブジェクト型
var object: { [key: string]: string } = {
  name: 'yamada torou',
  id: 'TEST',
};

var post: object = [{ id: 1, content: 'lorem ipsum' }];

// 共用型(Union型)
var sample: string | number | boolean;
sample = 'yamada';
sample = 100;
sample = true;

// enum型
enum KeyCode {
  Backspace = 8,
  Tab = 9,
  Enter = 13,
}

console.log(KeyCode.Backspace); // = 8

enum ErrorCode {
  OK = 200,
  BAD_RESPONSE = 400,
  UNAUTHORIZED = 401,
}

console.log(ErrorCode.OK);

enum Character {
  Bod, // 0
  Dad, // 1
  Mom, // 2
}

console.log(Character.Bod);

// any型
var something: any = 'foo';
something = 100;
something = true;
something = { id: 1 };

// null,undefined型
var el: Element | null = document.querySelector('#app');
var foo: undefined = undefined;

// 型推論
var unknown = 'String';
unknown = 10; //文字列として認識されているためエラーが発生

// let
let foo_let = 'foo';
let date = new Date();

if (true) {
  var tmp = 'tmp';
}
console.log(tmp);

for (var i = 0; i < 5; i++) {
  console.log(i);
}
for (let i = 0; i < 5; i++) {
  console.log(i);
}
// console.log(i);
var hoge = 'hoge';
function loghoge() {
  let hoge = 'new hoge!';
  console.log(hoge);
}

loghoge();

//定数(一度入れたら変更ができないデータの箱のこと)
const currentYear: number = 2022;
// currentYear = 2000; //再代入できない

const PI = Math.PI;

// テンプレート文字列（Template Literals）
let template1 = `This is Template string.`;
let name1: string = 'yamada';
let template2 = `
  Hello, TypeScript tutorial.
  thank you.${name1}
`;

console.log(template2);

//　スプレッド演算子
let categories = ['post', 'new', 'info'];

// ...catefories

// 複製
let copyCat = [...categories]; //'post','new','info'
// console.log(copyCat,copyCat === categories);

// 連結
let pushCat = ['other', ...categories];
console.log(pushCat);

let unshiftCat = [...categories, 'other'];
console.log(unshiftCat);

// 途中に挿入
let insertCat = ['other', ...categories, 'Q&A'];
console.log(insertCat);

// 2つの配列をマージ
let mergeCat = [...categories, ...copyCat];
console.log(mergeCat);

// オブジェクト
let post1 = { id: 1, content: 'dummy', create: '2022-06-01' };
console.log(post1);

let copyObj = { ...post1 };
// console.log(copyObj);

let pushObj = { ...post1, updated: '2022-06-10' };

// let pushObj = { ...post1, create: '2022-06-10' };
// console.log(pushObj)

let mergeObj = { ...post1, ...pushObj };
console.log(mergeObj);

let test = { ...categories };
console.log(test);

//
//分割代入
let categories1 = ['post', 'new', 'info', 'other'];

// let a = categories1[0];
// let b = categories1[1];
// let [a, b, ...rest] = categories1;
// console.log(a, b, rest);

let [a = 10, b = 7] = [1];
// console.log(a, b);

let post2 = { id: 1, content: 'dummy', create: '2022-06-01' };
const { id, content: body } = post2;
console.log(id, body);

// const { id, name } = user.accuntInfo.date;
//user.accountInfo.data.id

function test1({ a, b, c }) {}

//
//　関数
function greet(name: string = 'yamda'): void {
  console.log(`Helle world! ${name}`);
}
// greet('Taro');

//可変長引数
function sum(...values: number[]): number {
  return values.reduce(function (prev, current) {
    return prev + current;
  });
}
console.log(sum(1, 3, 5, 9));

//アロー関数
// () => {};

let add = (x1: number, x2: number): number => {
  return x1 + x2;
};
console.log(add(1, 3));

let hello1 = (neme1: string) => {
  return `hello, ${name1}`;
};
console.log(hello1('yamada'));

let hello2 = (name2) => `Hello ${name2}`;
console.log(hello2('tarou'));
//引数から内容が把握しやすく、短い文で表現できる場合は省略しよう

//文が長い場合、省略せずにしっかり書きましょう
//引数が一つもないときは、（）は省略できない
// let getValue = (): number => {
//   return document
//     .getElementById('app')
//     .getElementsByTagName('div')
//     .firstChild.getAttribute('value')
//     .toFixed(2);
// };

//アロー関数の最大の特徴は、内部で使用できるthisの扱い
// document.getElementById('button1').addEventListener('click', function () {
//   console.log(this); //<button></button>
// });
//this => Window
// document.getElementById('button1').addEventListener('click', () => {
//   console.log(this); //Window
// });

// クラス (日本後で理解)
class クラス名 {
  プロパティ = 'プロパティ';

  constructor() {
    //初期化
    this.プロパティ = 'プロパティ';
  }

  メゾット1() {
    console.log('テスト');
    this.プロパティ = 'プロパティ3';
  }
}
const インスタンス = new クラス名(); // インスタンス化
インスタンス.プロパティ = 'プロパティ2';
インスタンス.メゾット1();

// // クラス
// class Animal {
//   age: number = 10;
//   private _legs = 1;

//   constructor(public isCry: boolean) {}

//   //引数がないためvoidを設定
//   cry(): void {
//     if (this.isCry) {
//       alert(`age: ${this.age}`);
//     }
//   }

//   // アクセサメソッド(getter,setter)
//   get legs() {
//     if (this._legs > 2) {
//       return this._legs;
//     }
//   }

//   set legs(value: number) {
//     if (value > 1) {
//       this._legs = value;
//     }
//   }

//   // ショートハンド（コードを短くする）でアクセサメソッドも使用することがある。
//   // get email(){
//   //   return this.formGroup.get('email');
//   // }
//   // dog.email
// }

// let dog = new Animal(true);
// // dog.cry();
// dog.legs = 5;
// console.log(dog.legs);

//クラスの継承
class Animal2 {
  age: number = 10;

  constructor(public isCry: boolean) {
    this.age = 2;
  }

  cry(): void {
    if (this.isCry) {
      alert(`age: ${this.age}`);
    }
  }
}

class Dog extends Animal2 {
  constructor(public isCry: boolean) {
    super(isCry);
    this.age = 10;
  }

  cry(): void {
    // if (this.isCry) {
    //   alert('Bow ,wow');
    // }
    console.log('dog is cry');
    super.cry();
  }
}
let dog2 = new Dog(true);
dog2.cry();


// インターフェイス　(Interface)
interface Animal {
  name: string;
  legs: number;
  isCry: boolean;
  cry(): void;
}

interface SuperAnimal extends Animal {
  canRun: boolean;
}

class Dog implements SuperAnimal {
  name: string = 'Maru';
  legs: number = 4;
  isCry: boolean = true;
  canRun: boolean = true;
  cry(): void {
    if (this.isCry) {
      console.log('Bow, wow!');
    }
  }
}

let maru = new Dog();
maru.cry();

let Dog2: Animal = {
  name: 'maru',
  legs: 4,
  isCry: true,

  cry: function () {
    console.log('bow wow!');
  },
};


// ジェネリック（Gnerics）
class NumberStore {
  data: number;
}

class StringStore {
  date: string;
}

class Store<T> {
  //T(Type), U , V, T1,T2,T3
  data: T;
  getStore(): T {
    return this.data;
  }
}

let stringDate = new Store<number>();
let booleanData = new Store<boolean>();

function hello<T>(keyword: T) {
  console.log(`Log: ${keyword}.`);
}
hello<string>(`Helle, Yohei!`);
hello<number>(10000);

class Component<T, U> {
  neme: T;
  create: U;
}
let component = new Component<string, number>();
// component.create = '2022/07/01'

参考資料