Open8

Typescriptの基礎を学ぶ👀

liayaliaya

typescriptが必要な理由

  • 型を厳密にするため(厳密にすることで高品質なソフトウェアを作成できる)
  • コンパイルの時に静的に解析をすることで開発者がエラーに気づけるようにするため
  • 誰でも理解がしやすいコードを作成するため
liayaliaya

型の種類

プリミティブ型

  • string
  • number
  • boolean
  • symbol
  • bigint
  • null
  • undefined

がある。

リテラル型

プリミティブ型を細分化したもの。
文字列と数値と真偽値のリテラル型がある。

  const firstName:  'u2' = 'u2';
  const lastName :  'u2' = 'u3';  // エラー 'lastName' が宣言されていますが、その値が読み取られることはありません

オブジェクト型

オブジェクトのプロパティに型をつけれる。

//型を定義
//型の場合は「;」を使う
 interface aboutMe ={
    name:string;
    job :number;
  }
//型を付与
  const me: aboutMe = {
    name:'u2',
    age :'23',
  }

型が合わないオブジェクトを変数に代入したりしようとすると型エラーになる

配列型

配列に型をつけれる

  const array : number[] = [0,1,2]
  const array2: string[] = ['あ','い','う']

関数型

関数の引数や返り値に型を定義する

const func1 = (x:number,y:number):number=>{
  return x + y;
}
liayaliaya

インターセクション型

複数の型を結合できる

//型①
  type Profile ={
    age :number;
    city:string;
  }
//型②
  type Login ={
    username:string;
    password:string;
  }

//①と➁を結合
  type User = Profile & Login;

  const u2:User ={
    age:22,
    city:'tokyo',
    username:'u2',
    password:'aaaa'
  }
liayaliaya

ユニオン型

いづれかの型を定義するもの。(型を制限する)

  let foo: boolean | string;
  foo = true;
  foo = 'u2';
  foo = 1; //エラー型 '1' を型 'string | boolean' に割り当てることはできません。

配列とかも制限できる

let array:(number | string)[];
array = [1,2,'あ','い']
array = [1,2,'あ','い',true] //型 'boolean' を型 'string | number' に割り当てることはできません。
liayaliaya

リテラル型

特定の値のみ代入できるようにする。

//文字列に対して
let fruits:'apple' | 'grape' |'orange';
fruits = 'pineapple'; //エラー　型 '"pineapple"' を型 '"apple" | "grape" | "orange"' に割り当てることはできません。

//数値に対して
let number:22 | 23;
number = 30 //エラー　型 '30' を型 '22 | 23' に割り当てることはできません
liayaliaya

typeof

宣言済みの変数を取得するもの

let greeting:string = 'Hello'
let greeting2:typeof greeting = 'Hola' //greeting変数から取得して継承できる！
greeting = 1 //エラー　型 'number' を型 'string' に割り当てることはできません。

オブジェクトに対しても使える

  const dog ={dog:'トイプードル'} //型推論でstring型
  const dog2:typeof dog = {dog:'トイプードル'} //string型をdog変数から取得して継承
liayaliaya

keyof

オブジェクト型からプロパティ名を型として返す(ユニオンタイプで)

type Keys = {
  primary:string;
  secondary:string;
};

let key: keyof Keys;
key = 'u2' //エラー　型 '"u2"' を型 'keyof Keys' に割り当てることはできません
liayaliaya

列挙型

自動で連番をつけてくれる

enum OS {
  Windows,
  Mac,
  Linux,
}

interface PC {
  id:number;
  OSType:OS;
}

const PC1:PC = {
  id:2,
  OSType:OS.Windows, //(enum member) OS.Windos = 0
}

const PC2:PC = {
  id:3,
  OSType:OS.Mac, //(enum member) OS.Mac= 1
}
const PC3:PC = {
  id:1,
  OSType:OS.Linux, //(enum member) OS.Linux = 2
}