JavaScript と TypeScript での宣言型の導入

JavaScript 構文から TypeScript 構文への書き換えには 2 つの重要なポイントがあります。1 つはクラスのメンバー変数 (Field) を宣言する必要があること、もう 1 つはさまざまなもの (変数、パラメーター、関数/メソッド、等。）。
ES6 構文から TypeScript 構文に書き換える場合、重要な知識ポイントが 2 つあります。1 つはクラス メンバーの宣言、もう 1 つは型の宣言です。これらの構文機能はいずれも JavaScript には存在しません。これら 2 つの点は、2 つの重要な質問に直接つながります。どのような種類があるのか​​?宣言するにはどうすればいいですか？ types typespes of typescriptタイプについて話す前に、7種類のjavascriptを確認しましょう：dundefined

function

boolean

number

string

object

symbol

typeof 演算子を使用しますが、実際にはオブジェクトであるため、Array、null、Date などの一般的な型はありません。

TypeScript の重要な機能の 1 つは型であるため、TypeScript の型は JavaScript の型に加えて、さらに特殊なものも定義されています

Array8742468051c85b06f0a0af9e3e506b5c、または T[]、 T 型

null、空の型の配列を表し、その関数は strictNullChecks コンパイル パラメーター

Tuple (タプル) に関連しており、[Number, String]

enum T の形式で列挙型 T を定義します。集中化されたペアとして理解できます 数値定数の名前は次のとおりです

interface T、interface、T はインターフェイスの型です

class T、class、T は型です

any、任意の型を表します

void、型がないことを示します、使用されています関数の型を宣言する

決して、関数が返すことができない魔法の型を表します

...

ここでは、特定の型については詳しく説明しません。公式ハンドブックは非常に明確です。

ただし、言及しなければならない型関連の機能、ジェネリックスがまだあります。データ型についてだけ話しても、純粋な JSers であればまだ理解できます。結局のところ、型は新しいものではなく、型を拡張しただけなのです。しかし、純粋な JSers はジェネリックについてまったく知らないかもしれません。

ジェネリックは主にシンボルを使用して一部の型を表します。制約を満たす型 (デフォルトでは制約なし) である限り、この型シンボルは

function test8742468051c85b06f0a0af9e3e506b5c(v: T) のように置き換えて使用できます。 {

console.log(v);}

test78180fd7e2f5f09e138c95a71ada14e6(true); // boolean に置き換えられる T を明示的に指定します test("hello"); // T が文字列 test(123) に置き換えられることを（暗黙的に）推測します); // 推論 (暗黙的) T は数値に置き換えられます

ジェネリックスは強い型に関連しています。つまり、厳密な型チェックが必要であり、類似性の低いコードを書きたいので、特定のシンボルを使用して単純に置き換えます。タイプ。ジェネリックスという名前自体はわかりにくいかもしれませんが、C++ の「テンプレート」の概念を借りると理解しやすくなります。たとえば、上記の汎用関数は、後続の呼び出しに従って 3 つの関数として解釈できます。これは、テンプレートを適用して T を実際の型に置き換えることと同じです。
function test(v: boolean) { ... }function test(v : string) { ... }function test(v:number) { ... }

ジェネリックについての詳細は、ハンドブックのジェネリックのセクションを参照してください。
ここでは、単純なタイプについて簡単に説明します。より高度なタイプについては、後で詳しく説明します。ただし、TypeScript を使用することを選択した以上、その静的型機能を必然的に使用することになるため、型を識別する意識を強化し、この習慣を身に付ける必要があります。純粋な JSers にとって、これは大きな課題です。


宣言型

宣言型とは主に、宣言された変数/定数、関数/メソッド、クラスメンバーの型を指します。 var を使用して JS で変数を宣言し、ES6 は let と const を拡張します。これらのタイプの宣言は TypeScript でサポートされています。変数または定数の型を指定するのも非常に簡単です。変数/定数名の後にコロンを追加して、型を指定するだけです。たとえば、

// # typescript
 // 声明函数 pow 是 number 类型，即返回值是 number 类型// 声明参数 n 是 number 类型function pow(n: number): number {
    return n * n;}
 // 声明 test 是无返回值的function test(): void {
    for (let i: number = 0; i < 10; i++) {  // 声明 i 是 number
        console.log(pow(i));
    }}

このコードは、関数の型とパラメーターの型の宣言を示しています。 、変数の型。これは JavaScript コードよりも複雑なようです。しかし、考えてみてください。次のような場所で誤って pow を呼び出した場合:

// # javascript
 let n = "a";let r = pow(n);     // 这里存在一个潜在的错误

JavaScript は事前にエラーをチェックせず、r = pow(n) の実行時にのみ r を NaN に代入します。 r が他の場所で使用されると、連鎖エラーが発生する可能性があり、問題を見つけるまでにデバッグに時間がかかる可能性があります。
ただし、上記の 2 行のコードは TypeScript で変換できません: 型不一致エラーが報告されます: 'string' 型の引数は 'number' 型のパラメータに割り当てられません。 JavaScript コードの一部を見てみましょう

// # javascript (es6)
 class Person {
    constructor(name) {
        this._name = name;
    }
 
    get name() {
        return this._name;
    }}

この JavaScript コードを TypeScript コードに変換すると、次のようになります

// # typescript
 class Person {
    private _name: string;
 
    public constructor(name: string) {
        this._name = name;
    }
 
    public get name(): string {
        return this._name;
    }}

注意到 private _name: string，这句话是在声明类成员变量 _name。JavaScript 里是不需要声明的，对 this._name 赋值，它自然就有了，但在 TypeScript 里如果不声明，就会报告属性不存在的错误： 
Property '_name' does not exist on type 'Person'.

虽然写起来麻烦了一点，但是我也能理解 TypeScript 的苦衷。如果没有这些声明，tsc 就搞不清楚你在使用 obj.xxxx 或者this.xxxx 的时候，这个 xxxx 到底确实是你想要添加的属性名称呢，还是你不小心写错了的呢？ 
另外要注意到的是 private 和 public 修饰符。JavaScript 中存在私有成员，为了实现私有，大家都想了不少办法，比如闭包。 
TypeScript 提供了 private 来修饰私有成员，protected 修改保护(子类可用)成员，public 修饰公共成员。如果不添加修饰符，默认作为 public，以兼容 JavaScript 的类成员定义。不过特别需要注意的是，这些修饰符只在 TypeScript 环境(比如转译过程)有效，转译成 JavaScript 之后，仍然所有成员都是公共访问权限的。比如上例中的 TypeScript 代码转译出来基本上就是之前的 JavaScript 代码，其 _name 属性在外部仍可访问。 
当然在 TypeScript 代码中，如果外部访问了 _name，tsc 是会报告错误的 
Property '_name' is private and only accessible within class 'Person'.

所以应用内使用 private 完全没问题，但是如果你写的东西需要做为第三方库发布，那就要想一些手段来进行“私有化”了，其手段和 JavaScript 并没什么不同。 


小结 

从 JavaScript 语法改写 TypeScript 语法，我们来做个简单的总结：

类成员需要声明。

变量、函数参数和返回值需要申明类型。

如果所有这些东西都要声明类型，工作量还是满大的，所以我建议：就接口部分声明类型。也就是说，类成员、函数/方法的参数和返回类型要声明类型，便于编辑器进行语法提示，局部使用的变量或者箭头函数，在能明确推导出其类型的时候，可以不声明类型。 

以上がJavaScript と TypeScript での宣言型の導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。