タイプスクリプトとは?

21321 ワード

登場背景

はjavascript代替言語の一つとしてjavascriptのSupersetである.

javascriptの動的タイプがもたらす問題を克服することを目的としています.

これはマイクロソフトが発表したオープンソースで、グーグルは2年間の研究を経て、最終的に社内標準言語で承認された.

長所

静的タイプ
実際、タイプスクリプトを使用する主な理由は
複数のタイプをサポートします.(boolean, null, undefined, number, string, object, array, tuple, any, void, never...)

//js
function sum(a, b) {
  return a + b;
}
sum('x', 'y'); //'xy'

誰が見ても、上のコードは数字を合計しようとするコードのようですが、JavaScriptのダイナミック入力でエラーはなく、2つのstringがマージされた形で返されます.

function sum(a: number, b:number) {
 return a + b; 
}
sum('x', 'y');
// error TS2345: Argument of type '"x"' is not assignable to parameter of type 'number'.

typescriptは静的タイプをサポートし、コンパイルフェーズでエラーをキャプチャできます.(コードの可読性、予測性、信頼性の向上)

オブジェクト向けプログラミングサポート
JavaやC#などのクラスベースの言語など、インタフェース、Genericなどをサポートします.

Class
ES 6はクラス本体にのみメソッドを含めることができる.すなわち、メンバー変数はprivate nameではなく、タイプスクリプトはクラスproperty宣言であってもよい.また、アクセスを制限する人も利用できます.

//typescript
class Person {
  public name: string; //반드시 클래스 프로퍼티 사전 선언해야함
  protected age: number;
  private address: string;
  
  constructor(name: string) {
     this.name = name; 
  }
}

Interface
javascriptはインタフェースをサポートしていませんが、タイプスクリプトはサポートされています.
インタフェース:PropertyとMethodでも使用できますが、インスタンスを直接作成することはできません.すべてのメソッドは抽象的です.

interface Todo {
  id: number;
  content: string;
  completed: boolean;
}

let todos: Todo[] = [];

function addTodo(todo: Todo) {
 todos = [...todos, todo]; 
}
const newTodo: Todo = { id: 1, content: 'ts study', completed: true };
addTodo(newTodo);

//typescript를 안쓴다면? 
function checkTodoData(data) {
  if (!Array.isArray(data)) {
    throw new Error('Data is not Array');
  }
  const invalidArray = data.some((data) => typeof (data.id) !== 'number' || typeof(data.content) !== 'string' || typeof (data.isCompleted) !== 'boolean');
  if (invalidArray) {
    throw new Error('Invalid data is included');
  }
}

Generic
必要に応じて:関数またはクラスを定義する場合、パラメータまたは戻り値のタイプを宣言することが困難な場合、

class Queue {
  protected data: any[] = [];
  
  push(item: any) {
    this.data.push(item); 
  }
  
  pop() {
    return this.data.shift(); 
  }
}

const queue = new Queue();

queue.push(0);
queue.push('1'); //의도치 않은 실수

console.log(queue.pop().toFixed()); //0
console.log(queue.pop().toFixed()); //Runtime error

継承として解析

class NumberQueue extends Queue {
  push(item: number) {
    super.push(item); 
  }
  
  pop(): number {
    return super.pop(); 
  }
}

const queue = new NumberQueue();
queue.push('1'); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
// 에러를 사전에 발견해서 해결가능

しかし、毎回タイプ別に等級を継承するのは良い方法ではありません.
ここでジェニーンリックが登場!

class Queue<T> {
  protected data: Array<T> = [];
  push(item: T) {
    this.data.push(item); 
  }
  pop(): T | undefined {
    return this.data.shift(); 
  }
}

const numberQueue = new Queue<number>();
numberQueue.push(0);
numberQueue.push(1);
 
const stringQueue = new Queue<string>();
stringQueue.push('hi');
stringQueue.push('typescript');

ジェニーン・リックの長所は、宣言の時点ではなく、生成点にタイプが明確に規定されており、1回の宣言で複数のタイプを使用できることだ.

短所

曖昧な場合に使用される任意のタイプが乱発する可能性があります.

の従来のプロジェクトでは導入コストが高い可能性があります.

ちょっとランニングマシン?

Vscodeへの適用

tsを適用するフォルダ

を開く.

端末を開き、npm install typescriptにインストールします(インストールの確認)
タイプスクリプトコンパイラ(tsc)は.tsファイルをJavaScriptファイルに変換

タイプのスクリプトファイルを作成し、端末にtsc -vと入力します.(例:tsc [파일이름])
defaultはES 3バージョンにコンパイルされました.tオプションは選択可能(例えばtsc person)

は毎回オプションを指定するのが難しいので、tsc person -t ES2015コマンドでconfigファイルを生成します.
tsconfig.jsonを適用すると、tsc --init万回でもすべてのタイプのスクリプトファイルが変換されます.特定のファイルのみを希望する場合は、tscのように特定のファイル名を書くことができます.

ですが、毎回tsc personを打つのも面倒です.tsファイルを保存するたびに自動的にコンパイルしましょう.
そのためには、tscが必要です.
Task Runnerはタスクを表し、Runnerは運搬者、密輸者を表す.意訳すれば태스크 러너くらいに翻訳できるはずです.主に構築プロセスの各部分を自動化します.たとえば、不要なスペースのバンドル、削除、ファイルの乱読など...

ビュー>コマンドパネルをクリック->タスク:Configure Taskの検索