TypeScript 基礎から 勉強メモ

雰囲気で書いてたので改めて基礎の基礎をおさえる。

超絶参考記事

https://qiita.com/k-penguin-sato/items/72b21d4bfb631665c342

　キーワード「静的型付け」「インターフェース」「クラスベースオブジェクト指向」「Generics(ジェネリックス)」

# 「静的型付け」

const lastName : string = 'tanaka' // コンパイル後のコードには型定義の部分はなくなる
const firstName : number = 'taro' // コンパイルエラー

# 「インターフェース」

静的型付けのオブジェクトバージョンみたいなもので構造ごとチェックしてくれる。

// コンパイルするとこの記述は残らない
interface Person {
 name: string;
 age: number;
}

// Personインターフェースを型として使用。構造が違うものが来るとエラー。
function intro(person:Person): string {
 return `My name is ${person.name}. I am ${person.age}!`
}

// Personインターフェースの構造に従う変数を定義
var ken = {
 name: 'Ken',
 age: 20
}

# クラスベースオブジェクト指向

なんかこんなかんじらしい。あんまりクラスベースで書かないのでとりあえずざっくりと。もちろん継承もできる。

class Menu {
 items: Array<string>; //文字列の配列を表します。
 pages: number
 constructor(item_list: Array<string>, total_pages: number) {
   this.items = item_list;
   this.pages = total_pages;
 }
 // Method
  list(): void {
    console.log("Our menu for today:");
    for(var i=0; i<this.items.length; i++) {
      console.log(this.items[i]);
    }
  }
}

# Generics(ジェネリックス)

Javaのそれと同じような考え方でいいらしい

Genericsは抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラス・関数・インターフェイスを実現する為に使用されます。

これを

// number型
function test(arg: number): number {
 return arg;
}
// string型
function test2(arg: string): string {
 return arg;
}
test(1); //=> 1
test2("文字列"); //=> 文字列

こうかけますよと

function test<T>(arg: T): T {
 return arg;
}
test<number>(1); //=> 1
test<string>("文字列"); //=> 文字列
//※ Genericsでも型推論ができるので、引数から型が明示的にわかる場合は省略が可能
test("文字列２"); //=> "文字列２"

抽象的な型引数<T>を関数に与え、実際に利用されるまで型が確定しない関数を作成する

複数の型やインターフェースにも利用可能。また以下のように制約付きでも書ける。

function getName<T>(arg: T): string {
 return arg.name; // Property 'name' does not exist on type 'T'.
}
// argの型はこの時点でnameを持つか不明なので、コンパイラは警告を出す。

↓
↓
↓

interface argTypes {
 name: string;
}

function getName<T extends argTypes>(arg: T): string {
 return arg.name;
}
// インタフェースを満たす型であることを指定できる
// 呼び出されるまではエラーにならないので実装できる

getName({ name: "鈴木一郎" });

ＰＳ．最近ワンボーロン調子よくてうれしい