TS を学ぶ

index

• Primitive, Literal, interface(obj), function, class, の type のことを調べて書いた

why

zenn.dev

export type locales = "ja" | "en";
interface LocaleProviderProps {
  lang: locales;
}

• type で作って interface に組み込むのか？
• context での言語切り替えやりたくて、type 覚えないとってなった

Primitive

• 原始的？緩めの type かな

qiita.com

string, number, boolean, symbol, bigint, null, undefinedがあります

const b: string = 5;

これを書くと

Type '5' is not assignable to type 'string'.

と string には 5 は入らないぞとエラーが VScode でホバーされる

const a: boolean = 'false';

これも

Type '"false"' is not assignable to type 'boolean'.ts(2322)

こうなる

literal type

• より細かい type

const a: 'foo' = 'bar';

これは許されない。

Type '"bar"' is not assignable to type '"foo"'

type として 'foo' が明示されていると、'foo' しか入らない。

const a: 'aaa' = 'aaa';
const b: string = a;

• 'aaa' と言う type として通って 変数 a に入れた 'aaa' と言う文字列は
• string の type として通って 変数 b に入る。
• より大きい区分になら入れ直せる。

any

const anything: any = 'Superman'
const anything2: any = false;
const anything3: any = 333333333;

なんでも入るのを確認した

type

qiita.com

こう言うことが type ではできないので、type は使わないものとしておく

interface

• 一番よく使うやつ！！！！！！
• 実態を持たない、どう言うものが入るのかだけクラスの形を決めるみたいなもの

qiita.com

• Object type と言うらしい。一番よく見るやつ。

interface man {
  name: string,
  id: number,
}

• name string, id number の man obj を作る
• これを cls みたいに使う

const kaede:man = {
  name: 'kaede',
  id: 8888,
}

• kaede と言う obj を man interface を使って定義
  • name, id を正しい形でこうやって入れたら エラーが出なかった！！

一方

const falsekaede:man = {
  name: 11111,
  id: 8888,
}

当然こうしたら

(property) man.name: string

Type 'number' is not assignable to type 'string'.ts(2322)

index.tsx(22, 3): The expected type comes from property 'name'

which is declared here on type 'man'

• man.name は string だ
• number は string に入らない
• man で宣言されて name に入ることを期待された property が違う

と丁寧にエラーが出る。

const shortkaede:man = {
  name: 'kaede',
}

const shortkaede: man

'shortkaede' is declared but its value is never read.ts(6133)

Property 'id' is missing in type '{ name: string; }' but required in type 'man'.ts(2741)

index.tsx(23, 3): 'id' is declared here.

• type man で require とされてる name: string の次の id がないぞ
• 23 行目の 3 文字目で 宣言されてるぞ

と、interface で定義されている中身が足りなくても不足のエラーが出る

Function Type

• 関数型

qiita.com

const f: (foo: string)=> number = func;

function func(arg: string): number {
  return Number(arg);
}

• 全く意味がわからない

Class Type

qiita.com

class Foo {
  method(): void {
    console.log('Hello, world!');
  }
}

const obj: Foo = new Foo();

• class で書いて行っても void の type を指定したり
• new で Foo 関数を宣言するときに Foo の type を指定したりできるらしい

Generics

• ジェネリック医薬品、後発医薬品みたいな！後発定義 type!!!

qiita.com

• 利用する側の文脈で揺れがあるときに使う便利なもの
• interface Foo<S, T> { って <> でくくるやつ
• この S, T , を利用するときに決定できる。定義するときに未定にする。

interface HairWithGenerics<T> {
  color: T,
  size: number,
}

• 引数に < arg > でとったものを type の条件にする

const kaedeHair:HairWithGenerics<string> = {
  color: 'black',
  size: 100000,
}

• string を使う段階で指定したり

const kaedeHair:HairWithGenerics<'black'> = {
  color: 'black',
  size: 100000,
}

• 使う段階で 'black' 限定にできる。これは安全らしい。

kaedeHair.color = 'white';

const kaedeHair: HairWithGenerics<"black">

Type '"white"' is not assignable to type '"black"'

ほんとだこれは通りませんね、後からリテラルで厳密な type を指定することによっておかしい値が入ることが防げて安全ってことですね！！

union ( a or b)

qiita.com

let value : string | boolean = 'kaede';
value = true;
value = 'true';
value = 1;

• 最後のにエラーが出る

let value: string | boolean

Type '1' is not assignable to type 'string | boolean'

1 は string にも boolean にも assign できないぞ