Typescript学び直し

 func doSomething(month :  string | number) {
    month.padStart(2, "0");  // 月を2桁にする関数
}

 func doSomething(month :  string | number) {
   if typeof month === "string") {
    console.log(month.padStart(2, "0"));  // 月を2桁にする関数
   return;  // early return
   } 
   // elseを書かずにealry returnのほうがいい
  //  TSでは、このコードブロックまでたどりついた際にはmonthをnumber型と推論してくれるので
  //   number型のときだけ使えるメソッドを利用できる
 console.log(mont.toFixed());   
}

interface Wizard {
 castMagic(): void;
}
interface SwordMan {
 slashSword(): void;
}

function attack(player: Wizard | SwordMan) {
 if ("castMagic" in player) {   // これもクラスオブジェクトでしか使えない
   player.castMagic();
 } else {
   player.slashSword();
 }
}

function isDuck(animal: Animal): asserts animal is Duck {   // 戻りの型が asserts arg is T になるのがミソ
  if (walksLikeDuck(animal)) {
    if (quacksLikeDuck(animal)) {
      return;
    }
  }
 
  throw new Error("YOU ARE A FROG!!!");
}

function isDuck(animal: Animal): animal is Duck {
  return animal instanceof Duck;  // instanceof ではクラスオブジェクトしか判定できない
}
if (isDuck(animal)) {
  animal.quacks();  // このブロックでは変数animalはDuck型であることがType predictで解釈される
  // ...
}

function getMonth(date: string | Date) {
  const isDate = date instanceof Date;
  if (isDate) {
    console.log(date.getMonth() + 1);
  }
// 後続の処理でもisDateを利用できる、という書き方
}

let x = 1;
x = "hello";  // Type 'string' is not assignable to type 'numer'

const myboolean = {
  valueOf(): boolean {      // valueOfのインターフェースをもっていれば`Boolean`オブジェクトの代替となる
    return true;
  },
};
const bool: Boolean = myboolean;

console.log(1 + "1"); // 11
console.log("1" + 1); //  11
console.log("1" - 1); // 0
console.log(1 - "1"); // 0
console.log("1" - "1"); // 0

0.1 === .1    // true
5.0 === 5.   // true 

0b1010 // 2進数
0o755 // 8進数
0xfff // 16進数

100_000_000 // 1億

// 小数点の表現は使えない
 0_000_1   // これは使えない
_000_1      // これも使えない
100_._1     // これも使えない 

(5).toString();
5..toString();

const price = parseInt("百円");
console.log(price);

const price = parseInt("百円");
if (Number.isNaN(price)) {
  console.log("数値化できません");
}

NaN === NaN; // false
Nan == Nan;  // fale

const isNaN: (value) => boolean{
  rerutn value !== value
}

0.1 + 0.2 === 0.3; //=> false

const x: bigint = 100n;
const x: bigint = BigInt("1000000000000000")
const x: bigint = BigInt("1_000")  // これは渡せない

2n + 3; // -> エラー
2n + BigInt(3); //=> 5n
 

const a: number = 1
console.log(a) // 1
console.log(!a) // false   -> number型のゼロ値である`0`ではないので falseが返る
console.log(!!a) // true  -> boolean型の`!a`でfalseのboolean型になって `!`でtrueになる。（つまり当該型のゼロ値判定後変数になる)
 

const x: null = null;

const x: undefined = undefined;

typeof undefined;   // "undefined"
typeof null  // "object"

console.log(JSON.stringify({ foo: undefined }));
 //  =>{}
console.log(JSON.stringify({ foo: null }));
// => {"foo": null}

const a: null = null
console.log(a === undefined); // false
console.log(a == undefined); // true
console.log(a === null); // ture
console.log(a == null); // true
const b: undefined = undefined
console.log(b === undefined); //true
console.log(b == undefined); // true

const s1 = Symbol("foo");
const s2 = Symbol("foo");
console.log(s1 === s1);   // true
console.log(s1 === s2);  // false  -> tsではコンパイルエラー

let x: 1 = 1;
x = 1; // ok
x = 100; // '100' is not assignable to type '1'

const isTrue: true = true;
const num: 123 = 123;
const str: "foo" = "foo";

let num: 1 | 2 | 3 = 1;

// 空っぽのオブジェクトを生成
const object = {};
 
// プロパティを指定しながらオブジェクトを生成
const person = { name: "Bob", age: 25 };

const person = new Object();
person.name = "Bob";
person.age = 25;

const object = {
 // キーと値に分けて書いたメソッド定義
 printHello1: function () {
   console.log("Hello");
 },
 // 短い構文を用いたメソッド定義
 printHello2() {
   console.log("Hello");
 },
};

type StringOrNumber = string | number;

// プリミティブ型
type Str = string;
// リテラル型
type OK = 200;
// 配列型
type Numbers = number[];
// オブジェクト型
type UserObject = { id: number; name: string };
// ユニオン型
type NumberOrNull = number | null;
// 関数型
type CallbackFunction = (value: string) => boolean;

 let box: {
  width: number;
  height: number;
};
box = { width: 1080, height: 720 };

// 型エイリアス
type Box = { width: number; height: number };
let box: Box = { width: 1080, height: 720 };
//       ^^^型注釈

let calculator: {
  sum(x: number, y: number): number;
};
 calculator = {
  sum(x, y) {
    return x + y;
  },
};

// 関数型の書き方でもOK
let calculator: {
  sum: (x: number, y: number) => number;
};

let func: (x: number | null) => any;

func = (n: number | null) => {}; // OK
func = (n: number | null | undefined) => {}; // OK  
func = (n: number) => {}; // OK

interface Obj {
  // メソッド型
  method(n: number | null): any;
}
const obj: Obj = {
  method: (n: number) => {}, // チェックされない
};


interface Obj {
  // 関数型
  method: (n: number | null) => any;
}
const obj: Obj = {
  method: (n: number) => {}, // チェックが働く
};

type StringNumber = Record<string, number>;
const value: StringNumber = { a: 1, b: 2, c: 3 };
//こう書くと、要素が増えていくものを想定している
value.d = 4

type StringNumber = Record<"a"| "b" | "c",  number>;
const value: StringNumber = { a: 1, b: 2, c: 3 };
//こう書くと、通常のオブジェクトの定義と一緒
value.d = 4 // これはコンパイルエラー
// つまり
type StingNumber = {
   "a": number;
   "b": number;
   "c": mumber;
}
と一緒

type IndexKey: {
  [K: string]: number;
};

type IndexKey: {
  [key: string]: number;
};

type MyMapp = {a: string; b:string}

type MyMapKey = "a" | "b";
type   MyMapp = {
       [key in MyMapKey]: string
}

type Readonly<T> = {
 readonly [P in keyof T]: T[P];
};

type KeyValues = {
  [K in string]: string;
};
type Name = {
  name: string; // 追加のプロパティ
};
type KeyValuesAndName = KeyValues & Name;

type Book = {
  title: string;
  price: number;
  rating: number;
};
type BookKey = keyof Book;
// 上は次と同じ意味になる
type BookKey = "title" | "price" | "rating";

type MapLike = { [K: string]: any };
type MapKeys = keyof MapLike; // string | number

type MapLike = { [K: string]: any };
const myMap: MapLike = {
    1: 1,
    0: 2
}
console.log(myMap) //{ '0': 2, '1': 1 }

type MapLike = { [K in "x" | "y" | "z"]: any };
type MapKeys = keyof MapLike;

type What = keyof {};  // never

const point = { x: 135, y: 35 };
type Point = typeof point; // type Poiint = { x: number; y: number}

typeof true; //=> "boolean"
typeof 0; //=> "number"
typeof "Hello World"; //=> "string"
typeof undefined; //=> "undefined"
typeof null; //=> "object"    "null”がオブジェクトで返るのがミソ
typeof Symbol(); //=> "symbol"
typeof 1n; //=> "bigint"
typeof [1, 2, 3]; //=> "object"
typeof { a: 1, b: 2 }; //=> "object"
typeof (() => {}); //=> "function"

if (Array.isArray(n)) {
  // n is any[]
}

let newMyNumber: unknown = 0;
newMyNumber = 1;
console.log(newMyNumber)  // 1

let huga = newMyNumber // これはコンパイルエラー

function isNumberArray(value: unknown): value is number[] {
  if (!Array.isArray(value)) {
    return false;
  }
  return value.every((e) => typeof e === "number");  // everyメソッドで要素の方まで確認する
}

type Email = {
  from: string;
  to: string;
  title: string;
  subject: string;
};
function isEmail(value: unknown): value is Email {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  return true;
}

function isEmail(value: unknown): value is Email {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  // 各プロパティのチェック
  if (typeof value.from !== "string") {   // valueにformというプロパティがあるか推論できないのでラエー
    return false;
  }
  return true;
}

function isEmail(value: unknown): value is Email {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  // 各プロパティのチェック
const email = value as Email;  
if (typeof email.from !== "string") { 
    return false;
  }
  return true;   // Email & {"huga": string} という型でもtrueを返してしまう。
}

function isEmail(value: unknown): value is Email {
  if (typeof value !== "object" || value === null) {
    return false;
  }
  // 型アサーションでvalueをEmail型に近づける
  const email = value as Record<keyof Email, unknown>;
  // 各プロパティのチェック
  if (typeof email.from !== "string") {
    return false;
  }
  if (typeof email.to !== "string") {
    return false;
  }
  if (typeof email.title !== "string") {
    return false;
  }
  return typeof email.subject === "string";
}

// 異なる型は指定できないが
const str = "a";
const num = str as number;

// unknwonを経由すれば行ける
const num = str  as uknown as number;

### useUnknownInCatchVariables
例外はunknwon型を明記することができるようになった
```ts
// case 1
try {
  throw new Error();
} catch (err) {         
  // err = any
}
 
// case 2
try {
  throw "This is an error!";
} catch (err: unknown) {         
  // err = unknown
}
 
// case 3
try {
  throw undefined;
} catch (err: unknown) {         
  // err = unknown
}

const myObj = {name : "huga"}
const yourObjObject.create(myObj)

const counter = {
  count: 0,
  countUp() {
    this.count++;
  },
};
const resettableCounter = Object.create(counter);
resettableCounter.reset = function () {
  this.count = 0;
};

class ResettableCounter extends Counter {
  reset() {
    this.count = 0;
  }
}

const item = { price: 100 };
const { price } = item;
// 上は const price = item.price; と同等の処理

const obj = { a: 1, b: 2 };
const { a, b } = obj;

const color = { r: 0, g: 122, b: 204, a: 1 };
const { r: red, g: green, b: blue, a: alpha } = color;
console.log(green);

const continent = {
  name: "北アメリカ",
  us: {
    name: "アメリカ合衆国",
    capitalCity: "ワシントンD.C.",
  },
};

const {
  us: { name, capitalCity },
} = continent;

const continent = {
  name: "北アメリカ",
  us: {
    name: "アメリカ合衆国",
    capitalCity: "ワシントンD.C.",
  },
};
 
const {
  name: continentName,
  us: { name: countryName },
} = continent;

type Wild = {
  name: string;
  no: number;
  genre: string;
  height: number;
  weight: number;
};
 
const name = "pikachu";
const no = 25;
const genre = "mouse pokémon";
const height = 0.4;
const weight = 6.0;
 
const pikachu: Wild = {
  name,
  no,
  genre,
  height,
  weight,
};