【U】最速で学ぶTypeScript

高橋芹奈

6: TypeScriptのデータ型

// リテラル型 文字列リテラル
// const name: "hello";
const name = "hello";

// 明示的にデータの形を指定　→　『アノテーション』
let username: string = "Hello";
let num: number = 2;
let bool: boolean = true;


// オブジェクトの形の定義
interface NAME {
    first: string;
    last: string;
};

let nameObj: NAME = { first: "Yamada", last: "Taro" };

--------------------------------------------------------------------------
// 「?」を付けることである場合のみ指定、なくてもOK
interface NAME {
    first: string;
    last?: string; 
};

// 「null型」も指定
interface NAME {
    first: string;
    last?: string || null; 
};
--------------------------------------------------------------------------


// 関数の形の定義
// 推論
const func1 = ( x: number, y: number ) => {
    return x + y;
};
// 明示的に指定
const func1 = ( x: number, y: number ): number => {
    return x + y;
};


7: Intersection Types

複数のタイプを結合する処理

type PROFILE = {
    age: number;
    city: string;
};
type LOGIN = {
    username: string;
    password: string;
};

// 結合!!!!
type USER = PROFILE & LOGIN;

const userA: USER = {
    age: 30;
    city: "Tokyo";
    username: "xxx";
    password: "yyy";
}


8: Union Types

変数が受け取れるデータが正しい値を制限することができる

let value: boolean | number;
value = true; 〇
value = "hello"; ×

// 配列の要素に使用
let arrayUni: (number | string)[];
arrayUni = [0, 1, 2 "hellow"]; 〇
arrayUni = [0, 1, 2 "hellow", true]; ×


9: Literal Types

// リテラルとユニオンの組み合わせ
//文字列リテラルにユニオンタイプを使用
let company: "Facebook" | "Google" | "Amazon";
company = "Facebook"; 〇
company = "Apple"; ×

// 数値(数字リテラル?)に使用
let memory = 256 | 512;
memory = 256 ; 〇
memory = 12; ×


10: typeof

宣言済み変数の型を取得する
ex) 人物のデータタイプなど
constで定義されているjsonの構造が複雑な時にtypeofを使用することで全て継承してくれる

// 宣言済みの変数
let msg: string = "Hi";

// msgの方を取得して型を定義(継承している)
let msg2: typeof msg;
msg2 = "hello"; 〇
msg2 = 2; ×


// オブジェクトに適用
let animal = { cat: "small cat" }; //  = string(推論)
let newAnimal: typeof animal = { cat: "big cat" }; //  = string(推論)


11: keyof

type KEYS = {
    primary: string;
    secondary: string;
};
// KEYSの内容をユニオンタイプで取り出してくれる
let key typeof KEYS；
key = "primary"; 〇
key = "others;" ×


// typeof + keyof
// typeof : 型の継承
// keyof : ユニオンタイプで取り出す
const SPORTS = {
    soccer: "Soccer",
    baseball: "Baseball",
};
let keySports: keyof typeof SPORTS;
keySports = "Soccer"; 〇
keySports = "Soccer..."; ×


12: enum(列挙型)

c言語に近い
自動に連番を付けてくれる機能
ex) パソコンを管理するシステム
1台1台にIDとOSのタイプを登録する必要がある

enum OS {
     Windows, // OS.Windows = 0
     Mac, // OS.Mac= 1
     Linux, // OS.Linux= 2
};
interface PC {
    id: number;
    OSType: OS;
};

const PC1: PC = {
    id: 1,
    OSType: OS.Windows, // OS.Windows = 0
};
const PC2: PC = {
    id: 2,
    OSType: OS.Mac, // OS.Mac= 1
};


13: 型の互換性

const comp1 = "test"; // comp1: "test" (推論)
let comp2: string = comp1; // 抽象的→具体的　は代入することができる！！

// 反対
let comp3: string = "test";
let comp4: "test" = comp3; ×


// 関数の互換性
let funcComp1 = (x: number) => {};
let funcComp2 = (x: string) => {};

funcComp1 = funcComp2; ×
funcComp2 = funcComp1; ×


14: Generics(ジェネリックス)

reactの「props」の型を指定

interface GEN<T> {
    item: T;
}
const gen0: GEN<string> = { item: "hello" }; 〇
const gen1: GEN = { item: "hello" }; ×
const gen2: GEN<number> = { item: "hello" }; ×

// デフォルトの設定
interface GEN1<T = string> {
    item: T;
}
const gen3: GEN1 = { item: "hello" }; 〇

// 指定できるデータタイプを制限 extends
interface GEN2<T extends string | number> {
    item: T;
}
const gen4: GEN2<string> = { item: "hello" }; 〇
const gen5: GEN2<number> = { item: 12 }; 〇
const gen6: GEN2<boolean> = { item: true }; ×

// 関数に対する generics
function funcGen<T>(props: T) {
    return { item: props }
};
const gen7 = funcGen<string>("test"); 〇
const gen8 = funcGen("test"); 〇
const gen9 = funcGen<string | null>(null); 〇

// 関数に対する extends
function funcGen1<T extends string | null>(props: T) {
    return { value: props }
};
const gen10 = funcGen1("hello"); 〇
const gen12 = funcGen1(111); ×

// props の使い方
interface Props {
    price: number;
};
function funcGen3<T extends Props>(props: T) {
    return { value: props.proce}
};
const gen13 = funcGen3({price: 10});

// アロー関数での記述
const funcGen4 = <T extends Props>(props: T) => {
    return { value: props.proce}
};

 

15: JSON型推論

typeof を JSON のデータに適用

// data.json
[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv",
    "address": {
      "street": "Victor Plains",
      "suite": "Suite 879",
      "city": "Wisokyburgh",
      "zipcode": "90566-7771",
      "geo": {
        "lat": "-43.9509",
        "lng": "-34.4618"
      }
    },
    "phone": "010-692-6593 x09125",
    "website": "anastasia.net",
    "company": {
      "name": "Deckow-Crist",
      "catchPhrase": "Proactive didactic contingency",
      "bs": "synergize scalable supply-chains"
    }
  },
...
  {
    "id": 10,
    "name": "Clementina DuBuque",
    "username": "Moriah.Stanton",
    "email": "Rey.Padberg@karina.biz",
    "address": {
      "street": "Kattie Turnpike",
      "suite": "Suite 198",
      "city": "Lebsackbury",
      "zipcode": "31428-2261",
      "geo": {
        "lat": "-38.2386",
        "lng": "57.2232"
      }
    },
    "phone": "024-648-3804",
    "website": "ambrose.net",
    "company": {
      "name": "Hoeger LLC",
      "catchPhrase": "Centralized empowering task-force",
      "bs": "target end-to-end models"
    }
  }
]
// App.tsx
import Data from "./data.json"

typeof USERS = typeof Data;
⇒ 推論で定義してくれる!!


16: React Hooks Props型

v 16.8 からReact Hooks が搭載
クラスコンポーネント ➡ ファンクショナルコンポーネント をベースに開発

// App.tsx
const App: React.FC = () => {
    return (
        <div className="App">
            <header className="App-header">
                <TestComponent text="hello from App" /> 〇
                <TestComponent text1="hello from App" /> ×
                <TestComponent text={123} /> ×
            </header>
        </div>
    );
}
// TestComponent.tsx
import React from 'react';

interface Props = {
    text: string
};

const TestComponent: React.FC<Props> = (props) => {
    return(
        <div><h1>{props.text}</h1></div>
    );
}

export defailt TestComponent;


16: React Hooks useState

// TestComponent.tsx
import React, { useState } from 'react';

const TestComponent: React.FC<Props> = (props) => {
    const [count, setCount] = useState(0); // 自動でnumber型にしてくれる
    const [countFlg, setCountFlg] = useState(true); // 自動でboolean型にしてくれる
    return(
        <div><p>{count}</h1></p>
    );
}

export defailt TestComponent;

いいなと思ったら応援しよう！