TSベース

1始まる前に、なぜTSを勉強するのかを書く
vue2.xの中のコンポーネントは宣言によって一連のoptionに伝わり,Type Scriptとの結合はいくつかの装飾器で行う必要があり,機能は実現できるが面倒である.3.0はコンポーネントの宣言方式を修正し,クラス式の書き方に変更し,Type Scriptとの結合を容易にした.また、vueのソースコードもTypeScriptに変更されています.実際には、コードの機能が複雑な場合、Reactが使用するFlow、Angularが使用するType Scriptなどの補助管理を行う静的タイプのシステムが必要です.今vue 3.0もTypeScriptで書き換えられ、外部に露出したapiがTypeScriptと結合しやすくなった.静的タイプシステムは複雑なコードのメンテナンスに確かに必要である.そのため、TSは先端業者にとっても必須の基本スキルだと思います.幸いjava、c++などの静的言語を学んだことがあり、TSに導入されたいくつかの概念は難解ではない.この記事ではTSの基本部分をまとめます.
2 TSとは
Type ScriptはJavaScriptのスーパーセットで、主にタイプシステムとES 6のサポートを提供しています.Microsoftが開発し、コードはGitHubからオープンしています.純粋なJavaScriptにコンパイルできます.コンパイルされたJavaScriptは、任意のブラウザで実行できます.TypeScriptコンパイルツールは、任意のサーバおよび任意のシステムで実行できます.TypeScriptはオープンソースです.その最初のバージョンは2012年10月にリリースされ、何度も更新された後、現在はフロントエンドコミュニティで無視できない力となり、Microsoft内部で広く運用されているだけでなく、Angular 2、Vue 3もTypeScriptを開発言語として使用している.
3 TSメリットとデメリット
メリット:

Type ScriptはJavaScriptのスーパーセットである.jsファイルは直接名前を変更できます.tsは

明示的な定義タイプがなくても、自動的にタイプ推論

を行うことができる.

は、単純から複雑までのほとんどのタイプ

を定義することができる.

TypeScriptコンパイルエラーが発生してもJavaScriptファイル

を生成できます.

はサードパーティ製ライブラリと互換性があり、サードパーティ製ライブラリがTypeScriptで書かれていない場合でも、TypeScriptが

を読み込むために個別のタイプファイルを作成することができる.

型システムは、コードの可読性とメンテナンス性を向上させる

は活発なコミュニティを有し、ES 6仕様

をサポートする.
不足:

静的言語に接触したことがない学生には一定の学習コストがあり、インタフェース(Interfaces)、汎用(Generics)、クラス(Classes)、列挙タイプ(Enums)などの概念

を理解する必要がある.

短期的には開発コストが増加する可能性があります.結局、いくつかのタイプの定義を多く書く必要がありますが、長期的なメンテナンスが必要なプロジェクトでは、TypeScriptはメンテナンスコスト

を削減することができます.

構築プロセスへの統合には、いくつかのワークロードが必要です

はいくつかのライブラリと結合している可能性がありますが、完璧ではありません.

インストールの使用
TypeScriptのコマンドラインツールのインストール方法は、npm install -g typescript以上のコマンドがグローバル環境でtscコマンドをインストールし、インストールが完了すると、どこでもtscコマンドを実行できます.
TypeScriptファイルのコンパイル:tsc hello.tsコンパイルされたファイルhelloが生成されます.js,TypeScriptは静的チェックのみを行い,エラーが発見されるとコンパイル時にエラーが報告される(依然としてjsファイルが生成される).
4ベース
JavaScriptのタイプは、元のデータ型(Primitive data types)とオブジェクト型(Object types)の2種類に分けられます.元のデータ型には、ブール値、数値、文字列、null、undefined、ES 6の新しいタイプSymbolが含まれます.
ブール値:
booleanを使用してブール値のタイプを定義します.let isDone: boolean = false;注意:コンストラクション関数Booleanが作成したオブジェクトはブール値ではありません.Booleanオブジェクトです.

let createdByNewBoolean: boolean = new Boolean(1);
// index.ts(1,5): error TS2322: Type 'Boolean' is not assignable to type 'boolean'.

let createdByNewBoolean: Boolean = new Boolean(1); // Booleanを直接呼び出すとbooleanタイプを返すこともできます.let createdByBoolean: boolean = Boolean(1); // はType Scriptで、booleanはJavaScriptの基本タイプであり、BooleanはJavaScriptの構造関数です.他の基本タイプ(nullとundefinedを除く)は同じです.
数値:
numberを使用して数値タイプを定義する注意:ES 6の進数表現はTSで10進数にコンパイルされ、非ES 6進数は原進数でコンパイルされます.

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;     // ES6         
let octalLiteral: number = 0o744;       // ES6         
let notANumber: number = NaN;
let infinityNumber: number = Infinity;

コンパイル後:

var decLiteral = 6;
var hexLiteral = 0xf00d;
var binaryLiteral = 10;     // ES6         
var octalLiteral = 484;     // ES6         
var notANumber = NaN;
var infinityNumber = Infinity;

文字列:
stringを使用して文字列タイプを定義する:let myName: string = 'tan';コンパイル後:let myName = "tan";空の値:
JSにはNull値(Void)の概念はなく、TSでは、voidで戻り値のない関数を表すことができます.

function alertName(): void {
    alert('My name is tan');
}

voidタイプの変数は何の役にも立たない.undefinedとnullに値を付けるしかないからだ.let unusable: void = undefined;NullとUndefind:
TSではnullとundefinedを使用して、この2つの元のデータ型を定義できます.

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

undefinedタイプの変数はundefinedにのみ割り当てられ、nullタイプの変数はnullにのみ割り当てられます.ただしundefinedとnullはすべてのタイプのサブタイプです.すなわちundefinedタイプの変数は、numberタイプの変数:let num: number = undefined;に値を割り当てることができます.voidタイプの変数はnumberタイプの変数に値を割り当てることはできません.
任意の値:
任意の値(Any)は、任意のタイプに値を割り当てることができることを示すために使用され、異なるタイプの値に値を割り当てることができます.

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

任意の値で任意のプロパティにアクセスすることは許可され、メソッドを呼び出すことも許可されます.変数が任意の値であることを宣言した後、その操作に対して、返される内容のタイプは任意の値です.また、変数は宣言時にタイプが指定されていない場合、任意の値タイプとして認識されます.

let something;
something = 'seven';
something = 7;