Typeescript知識点まとめの対象タイプインターフェース、配列タイプ、関数タイプ

一. Type Scriptでは、オブジェクトのタイプをインターフェース(Interfaces)で定義します.
2. インターフェースとは何ですか
オブジェクト指向言語では、インターフェース(Interfaces)は行動に対する抽象的な概念であり、具体的にどのように行動するかはクラス(clases)によって実現される必要があります.
Type Scriptにおけるインターフェースは非常に柔軟な概念であり、クラスの一部の行為を抽象化するために使用できるほか、「オブジェクトの形状(Shape)」についてもよく説明する.
簡単な例

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

let tom: Person = {
    name: 'Tom',
    age: 25
};

//                   ：

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

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

//           ：
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

3.オプション属性
時には形に完全にマッチしないことを希望します.オプションの属性を使えばいいです.

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

4.任意の属性
私たちはインターフェースが任意の属性を持つことができることを望んでいます.

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

任意の属性が定義されると、属性とオプションの属性を決定するタイプは、そのタイプのサブセットでなければならないことに留意されたい.

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

上記の例では、任意の属性の値は、  stringですが、オプション属性です.  age の値は  number,number いいえ  string のサブ属性ですので、エラーが発生しました.
また、エラーメッセージで確認できます.  { name: 'Tom', age: 25, gender: 'male' } のタイプが推断されました.  { [x: string]: string | number; name: string; age: number; gender: string; }、これは結合タイプとインターフェースの結合である.
注意:一つのインターフェースでは任意の属性しか定義できません.インターフェースに複数のタイプの属性がある場合は、任意の属性に結合タイプを使用することができます.

interface Person {
    name: string;
    age?: number;
    [propName: string]: string | number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

5.読み取り専用属性
オブジェクトの中の一部のフィールドは作成時にのみ割り当てられます.  readonly 読み取り専用の属性を定義:

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上記の例では、  readonly 定義された属性  id 初期化後、また割り当てられましたので、エラーが発生しました.
読み取り専用の制約は、最初にオブジェクトに値を割り当てたときではなく、読み取り専用属性に初めて値を割り当てたときに存在します.
二番目: 配列の種類
1.表示法
最も簡単な方法は、配列を「タイプ+四角い括弧」で表すことです.
2.配列汎型
配列汎型(Aray Generac)も使用できます.  Array を選択します

let fibonacci: Array = [1, 1, 2, 3, 5];

3.配列をインターフェースで表す
インターフェースは配列を記述するためにも使用できます.

interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];

NumberArray 索引の種類が数値の場合、値の種類は数値でなければなりません.
インターフェースは配列を記述するためにも使用できますが、この方法は前の2つの方法より複雑です.
ただし、例外的にクラス配列を表す場合によく使われます.
4.クラス配列
クラス配列(Aray-like Object)は配列タイプではありません.  arguments:

function sum() {
    let args: number[] = arguments;
}

// Type 'IArguments' is missing the following properties from type 'number[]': pop, push, concat, join, and 24 more.

上記の例では、arguments 実際にはクラスの配列です.普通の配列では説明できませんが、インターフェースを使うべきです.

function sum() {
    let args: {
        [index: number]: number;
        length: number;
        callee: Function;
    } = arguments;
}

この例では、インデックスの種類が数値である場合には、値の種類は数値でなければならないという制約以外に、またそれを制約している.  length 和  callee 二つの属性
実際によく使われているクラスの配列は、自分のインターフェース定義があります.  IArguments、  NodeList、  HTMLCollection など:

function sum() {
    let args: IArguments = arguments;
}

そのうち  IArguments Type Scriptで定義されているタイプです.

interface IArguments {
    [index: number]: any;
    length: number;
    callee: Function;
}

三、関数の種類
1. 関数宣言
JavaScriptには、関数宣言(Function Declaration)と関数式(Function Expression)の2つの一般的な定義関数があります.

//     （Function Declaration）
function sum(x, y) {
    return x + y;
}

//      （Function Expression）
let mySum = function (x, y) {
    return x + y;
};

一つの関数には入力と出力があり、Type Scriptでそれを制約するためには、入力と出力を考慮しなければならない.関数宣言のタイプ定義は簡単である.

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

なお、必要以上の(または必要以上の)パラメータを入力することは許可されていません.

function sum(x: number, y: number): number {
    return x + y;
}
sum(1, 2, 3);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

function sum(x: number, y: number): number {
    return x + y;
}
sum(1);

// index.ts(4,1): error TS2346: Supplied parameters do not match any signature of call target.

2. 関数式
関数式(Function Expression)の定義を書くと、次のようになります.

let mySum = function (x: number, y: number): number {
    return x + y;
};

これはコンパイルによるものですが、上のコードは等号の右側の匿名関数のみをタイプ定義しています.  mySumは、値付け動作によるタイプ推論から推論される.必要ならば私達は手であげます.  mySum タイプを追加すると、このようになるべきです.

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

Type Scriptの中のものを間違えないように注意してください.  => とES 6の中の  =>Type Scriptのタイプ定義において、=> 関数の定義を表します.左は入力タイプで、括弧で囲む必要があります.右は出力タイプです.
ES 6において、=> 矢印関数と呼ばれています.
3. 関数の形状をインターフェースで定義します.
また、インタフェースの方式を使って、関数を定義するには、適合する形が必要です.

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

関数式|インターフェースで関数を定義する方式を採用すると、等号の左側にタイプ制限があり、今後関数名を付与する際にパラメータの個数、パラメータの種類、戻り値の種類が不変であることを保証できます.
4.オプションパラメータ
前に述べたように、必要以上の(または必要以上の)パラメータを入力することは許されません.オプションのパラメータはどう定義しますか?
インターフェースのオプション属性と似ています.  ? オプションのパラメータを表します.

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

なお、オプションパラメータは必要なパラメータの後ろに接続してください.言い換えれば、オプションパラメータの後に必要なパラメータが再び出現することは許されません.

function buildName(firstName?: string, lastName: string) {
    if (firstName) {
        return firstName + ' ' + lastName;
    } else {
        return lastName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName(undefined, 'Tom');

// index.ts(1,40): error TS1016: A required parameter cannot follow an optional parameter.

5. パラメータのデフォルト値
ES 6では、関数のパラメータにデフォルト値を追加することができます.Type Scriptはデフォルト値を追加したパラメータをオプションパラメータとして識別します.

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

この場合は「オプションパラメータは必要なパラメータの後ろに接続しなければならない」という制限を受けません.

function buildName(firstName: string = 'Tom', lastName: string) {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let cat = buildName(undefined, 'Cat');

6.残りのパラメータ
ES 6で使用できます.  ...rest の方法で関数の残りのパラメータを取得します.

function push(array, ...items) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a: any[] = [];
push(a, 1, 2, 3);

実は、items は、行列です.行列の種類で定義できます.

function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

なお、restパラメータは最後のパラメータしかありません.
7. 再読み込み
……