Skip to content

Latest commit

 

History

History
330 lines (297 loc) · 11.9 KB

20210831232330-typescript.org

File metadata and controls

330 lines (297 loc) · 11.9 KB

TypeScript

概要

TypeScriptはJavaScriptの上位互換となるように作られたProgramming Language。型定義が最大の特徴。

Tasks

Memo

開発サーバ立ち上げ

npm start

Language Memo

継承

クラス継承はextendsキーワードで行う。

class Parent {}
class Child extends Parent {}

インターフェース

インターフェース (Interfaces) - サバイバルTypeScript-TypeScript入門

TypeScriptにはabstract修飾子があり抽象クラスを表現できます。

抽象クラス

JavaScriptのオブジェクトとクラス - サバイバルTypeScript-TypeScript入門

avaやPHPなどの言語では、abstract修飾子を使って抽象クラスを定義できます。 抽象クラスは、直接インスタンスを作れないクラスのことです。JavaScriptに は抽象クラスを定義する構文はありません。

アクセス修飾子

JavaやPHPなどの言語では、フィールドやメソッドにprivate, protected, publicを指定できます。JavaScriptでもprivateのようなプロパティを実現する ためにプライベートクラスフィールドという仕様が実験的に導入されはじめて はいますが、現状はJavaのようなアクセス修飾子はありません。

TypeScriptにはJava風のアクセス修飾子があります。TypeScriptのアクセス修 飾子については「クラス」をご覧ください。

プロトタイプベース

プロトタイプベース - サバイバルTypeScript-TypeScript入門

  • プロトタイプベースとはどういう考え方なのか？
  • プロトタイプベースのJavaScriptは、クラスベースのPHPやJavaとどんなとこ ろが違う？
  • なぜJavaScriptはプロトタイプベースを採用したのか？
  • プロトタイプベースの利点は何か？

こういう疑問から始めるのはいいな。

オブジェクト指向プログラミング(OOP)では、オブジェクトを扱います。オブジェ クトを扱う以上は、オブジェクトを生成する必要があります。

しかし、オブジェクトの生成方式は、OOPで統一的な決まりはありません。言語 によって異なるのです。言語によりオブジェクト生成の細部は異なりますが、 生成方法は大きく分けて「クラスベース」と「プロトタイプベース」がありま す。

オブジェクト思考プログラミング言語ではクラス作成 → クラス.newしてインスタンスを作成して目的を達成する。 オブジェクトの素となるのがクラスだから、クラスベースと言う。

一方のJavaScriptのオブジェクト生成はプロトタイプベースです。プロトタイ プベースの特徴は、クラスのようなものが無いこところです。(あったとしても クラスもオブジェクトの一種だったりと特別扱いされていない)

振る舞い

プリミティブ型 (Primitive Types) - サバイバルTypeScript-TypeScript入門

振る舞いがないとはメソッドを持たないことです。

null.toString();

意図せずこのようにしてしまい実行時エラーになってしまった経験はあるかと 思います。これはnullがtoString()という振る舞いを持っていないことに起因 します。

とはいうもののJavaScriptにおいてプリミティブ型の多くはラッパークラスを 持っています。ラッパークラスを持つプリミティブ型の値はメソッド呼び出し があれば実行時に、対応するラッパークラスのインスタンスに変換されるため、 あたかもプリミティブ型が振る舞いを持つように見え、またそのように使うこ とができます。これはJavaを使われている方にとってはおなじみのAutoboxing というJavaScript の言語機能です。

バッククォートリテラル

  • 改行できる
  • 変数展開できる
  `console.log(`
hello
world
!!`);

anyを禁止する

TypeScriptのプロジェクトを作る時に必要なtsconfig.jsonにはこのany型の使 用を防ぐためのオプションとしてnoImplicitAnyがあります。既存の JavaScriptのプロジェクトをTypeScriptに置き換えていくのではなく、スクラッ チの状態からTypeScriptで作るのであればこの設定を入れるとよいでしょう。

分割代入

type TopSecret = {
  height: number;
  weight: number;
};
​function bmi({height, weight}: TopSecret): number {
  const mHeight: number = height / 100.0;
  return weight / (mHeight ** 2);
}

bmi({height: 170, weight: 65});
bmi({weight: 65, height: 170});

タイプエイリアス

type Person = {
  surname: string;
  givenname: string;
};
const person: Person = {
  surname: 'Faure',
  givenName: 'Gabriel'
};

type Parents = {
  mother: Person;
  father: Person;
};
type Family = {
  parents: Parents;
  children: Person[];
  grandparents: Parents[];
}
const family: Family = {...};

オブジェクト内の関数定義

オブジェクトが持つメソッドの定義の方法。

type A = {
  merge: (arg1: string, arg2: string) => string;
};
type B = {
  merge(arg1: string, arg2: string): string;
}

プリミティブ型タイプエイリアス

type Surname = string;
type GivenName = string;
type Person = {
  surname: Surname;
  givenName: GivenName;
}
const surname: Surname = 'Faure';
const givenName: GivenName = 'Gabriel';
const person: Person = {
  surname: givenName,
  givenName: surname
}
type SystemSupportLanguage = 'en' | 'tr' | 'it' | 'es';

? をつけると選択可。

type = Person = {
  surname: string;
  middleName?: string;
  givenName: string;
}

readonly

type Person = {
  readOnly surname: string;
  givenName: string;
};

入れ子までreadonlyにするわけではない。

インデックス型

type Butterfly = {
  [key: string] : string;
};

const butterflies: Butterfly = {
  en: 'Butterfly',
  fr: 'Papillon',
  it: 'Farfalla',
  es: 'Mariposa',
  de: 'Schmetterling'
};

Mapped type

type SystemSupportLanguage = 'en' | 'fr' | 'it' | 'es';
  const butterflies: Butterfly = {
    en: 'Butterfly',
    fr: 'Papillon',
    it: 'Farfalla',
    es: 'Mariposa',
    de: 'Schmetterling'
  };
// deでエラーになる

オブジェクト

const pokemon = {
  name: 'pikachu',
  no: 25,
  genre: 'mouse pokemon',
  height: 0.4,
  weight: 6.0,
};

オブジェクト型はプリミティブ型以外の総称。

const pikachu: object = {
  name: 'pikachu',
  no: 25,
  genre: 'mouse pokemon',
  height: 0.4,
  weight: 6.0,
};

const pokemon: object = new Pokemon{
  'pikachu',
  25,
  'mouse pokemon',
  0.4,
  6.0
};

const increment: object = i => i + 1;

⚠object型を与えた変数はその変数の持っているプロパティ、メソッドに対してアクセスできない。

pikachu.no;
// error

オブジェクトのプロパティは上書き可能。readonlyにするなどが必要。

分割代入

const {
  name,
  no,
  genre
}: Wild = safari();

タイプエイリアスとインターフェースのどちらを使うか

インターフェース

Tasks

TypeScript Deep Dive 日本語版について - TypeScript Deep Dive 日本語版

ドキュメント。

プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発 | Boris Cherny, 今村 謙士, 原 隆文 |本 | 通販 | Amazon

Revised Revised 型の国のTypeScript | Revised Revised TypeScript in Definitelyland

仕事ですぐに使えるTypeScript — 仕事ですぐに使えるTypeScript ドキュメント

ドキュメント。

Reference

interfaceとtypeの違い、そして何を使うべきかについて

interfaceの拡張性が高い。interfaceを使ったほうがよさそう。

TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

Webで動かせるTypeScript。

TypeScript: Documentation - JSX

Official documentation。

Archives

lspをセットする

lspは、Language Server Protocol。 開発ツールと言語サーバープロセスの間における通信プロトコル…つまり実行前に解析することでエラーを検知できる。 検知した内容は共通の通信プロトコルで送信されるので、ソフトを問わずに知ることができる。

まず設定しておくと、インタラクティブに理解が進む。 WEBでどんな感じが試すのもいい。 https://www.typescriptlang.org/play

TypeScript本

わかりづらいので本を変えた。 まず最初に読みやすいか確認するべきだな。 徐々にアプリを作っていく形式で、コードをどこに追加していいかわからないのは致命的だ。

本のが古いバージョンで最新ではコードが動かない。 ドラッグアンドドロップできない。 テストのパートが動かない。テストは別でやろう。

  • 91, 165, 194