---

Typescript

Typescriptはマイクロソフト社が開発及び公開していたプログラミング言語です。

TypeScriptはJavaScriptにコンパイルするため、既存のJavaScriptプログラムは、全て有効なTypeScriptプログラムでカバーすることができます。

愛称はTSになり、JavaScriptのスーパーセットと言われています。

TSが実はJSをベースにして、オブジェクト思考に向いていけるようにしています。

現在最も使われているところはフロントエンドになり、フロントエンドを開発する場合はTypescriptをマスターした方がいいでしょう。

メリット・デメリット

	JavaScript	Typescript
書きやすさ	入門しやすい	学習コスト必要
開発コスト	安い	ちょっと高め
サポート	最新	普通（マイクロ社による）
ライブラリ	超充実	充実始めている
Vue2	向いている	進めしない
Vue3	普通	おすすめ
IDE	普通	すごく便利
読めやすさ	普通	わかりやすい
運営	普通	便利
将来性	普通	高い

環境構築

• npm install -g typescriptでtypescriptのパッケージをインストール
• VSCodeなどのIDEで拡張機能をTypescriptを追加

インストール後の試し：

• .tsのファイルを作成、コードを書く
• tsc helloworld.tsでコンパイルしたら、helloworld.js作成
• helloworld.jsの中身確認。

基本

string：基本的な文字列の使い方です。

const str: string = '1234'

number：JSと同じく、全部の数値はfloat扱いになる。

let num1: number = 1234

boolean：true/falseですね。

const boo: boolean = true

enum：これはJSにないもの、Javaや他の言語によくある列挙型です。

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green // 2

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2]

console.log(colorName) //Green出るぞ

array：リスト型です。

let numbers: number[] = [1, 2, 3]

let numbers: Array<number> = [1, 2, 3]

any：変数などの型は確定しない時。

let notSure: any = 4
notSure = "文字列です"
notSure = false

上記は通ります、最後はbooleanになります。

コンパイラエラーを回避するのは一番使われているanyですが、型をちゃんと分かるようにした方がtypescriptを使う意味あると思います。

function：プログラミングのユニットですね。

function fn(x: number, y: number): number {
  return x + y
}

// TSでは、型として認識する
const add = (x: string, y?: string): string => {
  return x + y
}
// 同じ名前ですけど、中身違うのを定義できます
const add = (x: number, y?: number): string => {
  return x + y
}

// ?は入れでも入れなくても大丈夫な引数です

void&undefined&null：nullはエラーになる元凶になるので、voidとundefinedをうまく使おう。

let u: undefined = undefined
let n: null = null

let c:void = undefined // voidとundefined関数でよく使います
let d:void = null　//この書き方が通らないです

object&Object&{}：オブジェクト指向のプログラミングでよく使うところです。クラスを定義して、オブジェクト作って、色々操作するイメージです。

let object: object
object = {}

let bigObject: Object
bigObject = {}
bigObject.toString()

type：カスタマイズの型を定義及び拡張できます。

type Float = number
const num: Float = 777


type Obj = {
  a: boolean,
  b: number
}
const obj: Obj = {
  a: true,
  b: 1
}

class：JSのオブジェクト指向のコアです。なんでもクラスで定義し、オブジェクト扱いです！

class Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  say(): void {
    console.log('hello' + this.name)
  }
}

中級

tuple：Arrayでよく使う、リストの中のデータは型がわからない場合。

let x: [string, number]
x = ['hello', 7];

never：関数定義で使うもの、voidと区別していくのは、throwする可能性はあるかどうかです。

function foo(): never { throw new Error('エラー発生しました') }  // returnないです

unknown：型は知らないです、だが、anyと違うところは、コンパイラ前に型によるエラー定義をチェックできます。

const num: number = 10
(num as unknown as string).split('')  // ここは必ずas stringをする

数値_：特に意味ないですが、読めやすくなるための存在。

// コンパイルしたら、_なくなります。
let num:number = 1_2_345.6_78_9

keyof：オブジェクトのプロパティ知りたい場合使う。

type Person = {
  name: string
  age: number
}
type PersonKey = keyof Person  // 'name' | 'age'

typeof：keyofはプロパティを取得するなら、こちらはオブジェクトのタイプを知るようになります。

type Person = {
  name: string
  age: number
}
const me: Person = { name: 'ore', age: 32 }
type P = typeof me;  // { name: string, age: number }

// keyofの拡張知識
type PersonKey = keyof typeof me // 'name' | 'age'

in：forの形式一番簡単な書き方と思います。

// in使っているので、Tの全部のプロパティをnumberにする
type TypeToNumber<T> = {
  [key in keyof T]: number
}

interface：typeより使いまわしています、extendsによって、プロパティを充実できました。さらに、Javaみたいな言語のように、システム設計で愛用しています。

interface Obj {
  a: true,
  b: boolean
}

interface Obj1 extends Obj {
  c: string,
  d: number
}

const obj: Obj1 = {
  a: true,
  b: false,
  c: 'sss',
  d: 30
}

高級

ジェネリック型はTypescriptの中にいいところです。

レベルはちょっと高いですが、汎用性と言いましたら、どんなプロジェクトは結構重視するところではないかと思います。

ジェネリック型をマスターすることによって、汎用性高めになり、サービスの継続的な運用と展開にすごく役に立つ。

extends：ジェネリック型の運用で判定の機能で活用しています。

T extends U? X: Y
// Tは最後どちらを継承したのを判定します

infer：「推論」になるです、所謂型を自動判定する。

type Foo<T> = T extends {t: infer Test} ? Test: string

// 実際に
type Sample = Foo<{t: boolean}> // inferによって、booleanの型になります

Partial<T>：プロパティを全部定義しなくても済む。

type Animal = {
  name: string,
  category: string,
  age: number,
  eat: () => number
}

type PartOfAnimal = Partial<Animal>;
const tiger: PartOfAnimal = { name: 'トラ' }; // その他の属性を定義しなくて済む

Record<K, T>：型を変換する役目です。

const obj: Record<string, string> = { 'name': '元の', 'tag': '現在の' } // replaceしました

Pick<T, K>：ピックアップの意味で、対象の必要なプロパティを抽出します。

type Animal = {
  name: string,
  category: string,
  age: number,
  eat: () => number
}

const bird: Pick<Animal, "name" | "age"> = { name: '鳥', age: 2 }

Exclude<T, U>：TとU両方持っているものを抽出します。

type T1 = Exclude<"a" | "b" | "c", "a" | "b"> // "c"が出ます

Omit<T, K>：Tの中に、Kが含めるものを除外します。

type Animal = {
  name: string,
  category: string,
  age: number,
  eat: () => number
}

const OmitAnimal:Omit<Animal, 'name'|'age'> = { category: 'ライオン', eat: () => { console.log('とり肉') } }

ReturnType<T>：戻り値を確認する。

function foo(x: string | number): string | number { /*省略*/ }
type FooType = ReturnType<foo>;  // string | number

Required<T>：Partialと逆で、全部のプロパティを定義する必要があります。

interface Person {
  name?: string,
  age?: number,
  hobby?: string[]
}

type Required<T> = {
  [Key in keyof T]-?: T[Key]
}

const user: Required<Person> = {
  name: "ore",
  age: 32,
  hobby: ["プログラミング"]
}