TIL.Typescript_0415

なぜTypescriptを勉強するのですか?

Superset of Javascript
動的言語JavascriptはRuntimeによってタイプが決定され、静的言語Type scriptはComplieの過程でタイプが決定されます.
これはJavascriptのエラーがユーザによって発見される確率が高く,Typescriptが開発環境でエラーを発見する確率が高いことを意味する.
コードの作成中にエラーを処理し、すべてのコードを作成し、エラーをチェックすることは、生産性の面で大きな違いがあります.
単純なコードを記述する場合,人為的なエラーが発生する確率はそれほど高くないが,コードが非常に膨大になると,コードも最終的に人為的に記述されるため,人為的なエラーが発生する確率が高い.この場合,Typescriptは非常に強力なツールとなる.

タイプ定義

1)Javascriptでは、次の変数を宣言します.

let myName = "peter"

ただし、Typeスクリプトでは次のような変数が宣言されます.

let myName: string = "peter"

2)オブジェクトタイプの変数には、interfaceを使用します.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "peter",
  age: 22
}

3)Javascriptはclassをサポートし、オブジェクト向けのプログラミングをサポートするため、Type scriptはclassを作成することもできます.以下のようにします.

interface User {
  name: string;
  age: number;
}

class UserAccount {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}

const user: User = new UserAccount("peter", 22)

Union

単純なタイプを組み合わせてliteral文字列、numberなどを定義できます.

// 문자열 리터럴 타입 (Union types)
type Score = 'A' | 'B' | 'C' | 'F'

interface User {
    name: string
    age: number
    [grade: number]: Score

let user: User = {
    name: "peter",
    age: 22,
    1: "A",
    2: "B"
}

Generic

次の関数があると仮定します.["1", "2"]などの文字配列を関数に入れると、数値配列のみがパラメータとして受信されるため、エラーが発生します.

function getSize (arr: number[]) : number {
  return arr.length
}

この場合、Genericを使用できます.<T>は、異なるタイプを使用するために関数として命名される.

function getSize<T> (arr: T[]) : number {
  return arr.length
}

// 에러 없이 아래 두 함수를 호출할 수 있습니다.
const arr1 = [1, 2, 3]
getSize<number> (arr1)

const arr2 = ["1", "2", "3"]
getSize<string> (arr2)

Genericでは、インタフェースを設定することで、さまざまな外観のオブジェクトを作成できます.

interface Mobile <T> {
  name: string
  price: number
  option: T
}

const mobile1: Mobile <string> = {
  name: "iPhon12",
  price: 1000
  option: "Wifi"
}

const mobile2: Mobile <{color: string coupon: boolean}> = {
  name: "iPhon13",
  price: 1100
  option: {color: "red", coupon: false}
}

Structural Type System

Typescriptの重要な特性の一つは、タイプの外観でタイプをチェックできることです.

interface Point {
  x: number;
  y: number;
}
 
function logPoint(p: Point) {
  console.log(`${p.x}, ${p.y}`);
}
 
const point = { x: 12, y: 26 };
logPoint(point);

上記の図のpointオブジェクトのタイプは不明ですが、Pointインタフェースで定義されたタイプとみなされるため、エラーとみなされません.
ただ.オブジェクトがパラメータとして入力され、そのオブジェクトが次のような形で推定できない場合は、エラーとしてチェックされます.

const color = { hex: "#187ABF" };
logPoint(color);