Movatterモバイル変換

第2回　TypeScript という言語TypeScript & 関数型講座

今講座のコンセプトこれから TypeScript を使う人には実践を想定した TypeScript の重要な機能を学習できるように今 JavaScript, Java, Scala を使っている人にはそれらと比較して TypeScript がどのような言語なのかを知ってもらえるように

TypeScript の概要● TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語● TypeScript は JavaScript に対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている（いわゆる AltJS）● つまり、型定義できる JavaScript

ただ一つの値のみとる型他の言語ではあまり見られない（と思ったけど、Scala3 に入る予定）リテラル型const a = 100 // 100const b = 'a' // aconst c = true // trueconst d: 101 = 100 // 型 '100' を型 '101' に割り当てることはできません。

関数の型// TypeScriptconst test:(a: number, b: number) => number = (a, b) => a + b// Scalaval test: (Int, Int) => Int = (a, b) => a + b// JavaBiFunction<Integer, Integer, Integer> test = (a, b) -> a + b;Java の関数は第一級オブジェクトではないが、関数型インターフェースというものを利用して第一級オブジェクトっぽく見せている。

void 型関数の返り値の型として使われ、「何も返さない」ことを表すJavaScript では何も返さない関数は undeﬁned となるため、void 型の値はundeﬁnde のみ。function hello(): void {console.log('hello')}Java でも同様に void が存在する。Scala では Unit 型が大体同じことをしている。（厳密に void と Unit が同じなのかまでは調べていない）

const a: any = 666 // anyconst b: any = 'danger' // anyconst c = a + b // anyany 型プログラマの敗北any を使うと TypeScript が持つ型の優位性が無くなり、ただの JavaScript と同じ振る舞いになってしまう。そのため、やむをえない場合以外使うべきではない型を無視するためのものなので、Java、Scalaにはない

プログラミングのスタイルの一種で、あるオブジェクトが特定のプロパティを持つことだけを重視し、その名前が何であるか（名前的型付け）は気にしない。一部の言語ではダックタイピングと呼ばれている。構造的型付けclass User {constructor(public readonly name: string) {}}class Cat {constructor(public readonly name: string) {}}const cat: Cat = new User('bob')

TypeScript で名前的型付け的なことをするには、ちょっとした工夫が必要。構造的型付けclass User {private readonly __nominal: void // private な要素を持たせることにより、他の構造と区別できるconstructor(public readonly name: string) {}}class Cat {private readonly __nominal: voidconstructor(public readonly name: string) {}}const cat: Cat = new User('bob')// 型 'User' を型 'Cat' に割り当てることはできません。// 複数の型に、プライベートプロパティ '__nominal' の異なる宣言が含まれています

型エイリアスある型を指し示す別名を宣言することができるtype User = {name: string}class User2 {constructor(public readonly name: string) {}}const a: User = new User2('bob') // 構造的型付けなので代入可能

型エイリアス一応 Scala でも可能type User = { def name: String }case class User2(name: String) {}val user: User = User2("bob")Java には存在しない

interface型エイリアスと同様に、構造に名前をつけるための方法。小さな差異がいくつかあるが、ほとんど型エイリアスと同じ。interface User {name: string}class User2 {constructor(public readonly name: string) {}}const a: User = new User2('bob') // 構造的型付けなので代入可能

interface のメリット定義と実装を分けることができ、プログラムを柔軟に保てる。interface JournalRepository { getById: (id: number) => Journal }class HttpJournalRepository implements JournalRepository {getById(id: number): Journal { // サーバーからデータ取得 }}class InmemoryJournalRepository implements JournalRepository {getById(id: number): Journal { // インメモリーでデータ取得 }}// 実装を切り替えても、プログラムの変更は必要ないfunction getJournal(id: number, repository: JournalRepository): Journal {return repository.getById(id)}

interface VS classinterface は複数継承することが可能。そのため、一つのオブジェクトに複数の振る舞いを持たせることができる。

複数の場所で型レベルの制約を強制するために使われるプレースホルダーの型。ジェネリック型class Some<T> {constructor(public readonly value: T) {}map<U>(f: (v: T) => U): Some<U> {return new Some(f(this.value))}}

ジェネリック型パラメータに制限を加えられる型境界class A { private type = 'A' }class B {}class C extends A {}class Some<T extends A> {constructor(public readonly value: T) {}}const someB = new Some(new B())// 型 'B' の引数を型 'A' のパラメーターに割り当てることはできません。// プロパティ 'type' は型 'B' にありませんが、型 'A' では必須です。const someC = new Some(new C())

配列のサブタイプで、固定長の配列を型付けするための型。タプル型const a: [string, boolean] = ['test', true]const b: [string, boolean] = ['test', true, 1]// 型 '[string, true, number]' を型 '[string, boolean]' に割り当てることはできません。// ソースには 3 個の要素がありますが、ターゲットで使用できるのは 2 個のみです。const c: [string, boolean] = ['test', 1]// 型 'number' を型 'boolean' に割り当てることはできません。Java にはない。あくまで型を定義するのが面倒な場合の代替手段。多用は厳禁（Elm のようにタプルの要素は 3 つまで、と要素数の制限を入れている言語もある）

合併型A と B という 2 つのものがある場合、それらの合併（union）とは、それらの和（A, B, またはその両方に含まれる全てのもの）を指す。TypeScript では、型の合併を表現する特別な型演算子が用意されている。type Cat = { name: string, purrs: boolean }type Dog = { name: string, barks: boolean }type CatOrDog = Cat | Dogconst test1: CatOrDog = { name: 'coco', purrs: true } // OKconst test2: CatOrDog = { name: 'boss', barks: true } // OKconst test3: CatOrDog = { name: 'boss', purrs: false, barks: true } // OKconst test4: CatOrDog = { name: 'boss' }// 型 '{ name: string; }' を型 'CatOrDog' に割り当てることはできません。// プロパティ 'barks' は型 '{ name: string; }' にありませんが、型 'Dog' では必須です。

合併型こんなことも。function test(value: string | number): null | number {if (typeof value === 'number') {return 10} else {return null}}function test2(): void {const result = test(1) // const result: number | nullresult.toString() // NG Object is possibly 'null'.}

合併型Scala3 で取り入れられる予定。Java には存在しない。

function test(a: number | string | boolean | null): void {if (a == null) return console.log('null')const b = a // const b: string | number | booleanif (typeof a === 'number') return console.log('number')const c = a // const c: string | booleanif (typeof a === 'string') return console.log('string')const d = a // const d: boolean}型の絞り込みTypeScript はフローベースの型推論を行う。これにより、型の絞り込みを提供する。

trait 積木case object 三角の積み木 extends 積木case object 四角の積み木 extends 積木case object 丸の積み木 extends 積木trait Tree[T]case class Leaf[T](value: T) extends Tree[T]case class Branch[T](value: Seq[Tree[T]]) extends Tree[T]タグ付き合併型TypeScript で代数的データ型を表現する方法代数的データ型とは、総体と、それを構成する構成子からなるデータ構造である

interface 三角の積み木 {readonly type: '三角の積み木'readonly a: string}interface 四角の積み木 {readonly type: '四角の積み木'readonly b: number}interface 丸の積み木 {readonly type: '丸の積み木'readonly c: boolean}type 積木 = 三角の積み木 | 四角の積み木 | 丸の積み木タグ付き合併型TypeScript では、文字列リテラルを用いた「タグ」というものを利用して表現する

// Not all code paths return a value.function test(value: 積木) {switch (value.type) {case '三角の積み木':return value.a // 型の絞り込みにより、三角のプロパティが使用できるcase '四角の積み木':return value.b}}タグ付き合併型代数的データ型のメリットは、パターンマッチでの網羅チェックを行えることである。（要出典）あと、再帰的データ構造を簡単に定義できる。※ tsconﬁg.json で noImplicitReturns を true にする必要あり

交差型A と B という 2 つのものがある場合、それらの交差（intersection）とは、それらの積（A と B両方に含まれる全てのもの）を指す。TypeScript では、型の交差を表現する特別な型演算子が用意されている。type Cat = { name: string, purrs: boolean }type Dog = { name: string, barks: boolean }type CatAndDog = Cat & Dogconst test1: CatAndDog = { name: 'coco', purrs: true } // NGconst test2: CatAndDog = { name: 'boss', barks: true } // NGconst test3: CatAndDog = { name: 'boss', purrs: false, barks: true } // OKconst test4: CatAndDog = { name: 'boss' } // NG

function isNonEmpty<A>(fa: ReadonlyArray<A>): fa is ReadonlyNonEmptyArray<A> {return fa.length > 0}function test(value: ReadonlyArray<string>) {if (isNonEmpty(value)) {const a = value // const a: ReadonlyNonEmptyArray<string>}}ユーザー定義型ガード引数を 1 つ取り、boolean を返す関数は、その引数の型を絞り込み可能にできる

readonly 修飾子フィールドに初期値を割り当てた後でそのフィールドを変更できないことを宣言できる。オブジェクトを不変にするために非常に重要。const user: {readonly name: string} = {name: 'bob'}user.name = 'alice' // 読み取り専用プロパティであるため、 'name' に代入することはできません。

オプション (?) 修飾子TypeScript に、あるものが省略可能であることを伝える修飾子function test(a?: number): number {return a}// Type 'number | undefined' is not assignable to type 'number'.// Type 'undefined' is not assignable to type 'number'function test2(a?: number): number {if (a === undefined) {return 0} else {return a}}

Movatterモバイル変換

Change Language

TypeScript & 関数型講座　第2回 TypeScript という言語

Embed presentation

Recommended

More Related Content

What's hot

Similar to TypeScript & 関数型講座　第2回 TypeScript という言語

TypeScript & 関数型講座　第2回 TypeScript という言語

Movatterモバイル変換

TypeScript & 関数型講座 第2回 TypeScript という言語

Recommended

More Related Content

What's hot

Similar to TypeScript & 関数型講座 第2回 TypeScript という言語

TypeScript & 関数型講座 第2回 TypeScript という言語

TypeScript & 関数型講座　第2回 TypeScript という言語

Similar to TypeScript & 関数型講座　第2回 TypeScript という言語

TypeScript & 関数型講座　第2回 TypeScript という言語