TypeScript + Reactのお勉強

ganyariya 2021/03/27

TypeScriptからお勉強する

ganyariya 2021/03/27

コンパイル：Babel
バンドル：Webpack

ganyariya 2021/03/27

タプル

const movie: [string, number, string] = ["a", 10, "b"];

オブジェクトのReadOnly（型ユーティリティ）

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

const u: Readonly<User> = {
  name: "heu",
  age: 20,
};

ganyariya 2021/03/27に更新

type A = int | number;のように型に名前をつけられる
typeはインターフェースでクラスっぽく実現できる

{ [key: キーの型]: 値の型}のようにして書くことで、キーの名前が分からない場合の辞書を書ける。
キーの型にnumberをしているが、内部的には文字列（あくまでTS/JSの辞書のキーは文字列）

ganyariya 2021/03/27

let check: (arg1: string, arg2: (arg3: string) => number) => boolean;　関数のタイプ

クラスっぽくメソッドをオブジェクトに生やせる

const animal = {
  getName() {
    return this._name;
  },
  _name: "ganariya",
  get name() {
    return this._name;
  },
  set name(name) {
    this._name = name;
  },
};

console.log(animal.getName());

アロー関数

// 基本形
(arg1, arg2) => { /* 式 */ };

// 引数が1つの場合は引数のカッコを省略できる
// ただし型を書くとエラーになる
arg1 => { /* 式 */ };

// 引数が0の場合はカッコが必要
() => { /* 式 */ };

// 式の { } を省略すると、式の結果が return される
arg => arg * 2;

// { } をつける場合は、値を返すときは return を書かなければならない
arg => {
  return arg * 2;
};