catalog

 

One , The type of object : Interface
<https://blog.csdn.net/wu5229485/article/details/82771375#%E4%B8%80%E3%80%81%E5%AF%B9%E8%B1%A1%E7%9A%84%E7%B1%BB%E5%9E%8B%EF%BC%9A%E6%8E%A5%E5%8F%A3>

Two , The type of array
<https://blog.csdn.net/wu5229485/article/details/82771375#%E4%BA%8C%E3%80%81%E6%95%B0%E7%BB%84%E7%9A%84%E7%B1%BB%E5%9E%8B>

Three , The type of function (* core )
<https://blog.csdn.net/wu5229485/article/details/82771375#%E4%B8%89%E3%80%81%E5%87%BD%E6%95%B0%E7%9A%84%E7%B1%BB%E5%9E%8B%EF%BC%88*%20%E6%A0%B8%E5%BF%83%EF%BC%89>

One , The type of object : Interface


summary : In object oriented language , Interface (Interfaces) It's a very important concept , It's an abstraction of behavior , How to act depends on the class (classes) To achieve (implements)

1. Interface usage

An interface is defined in this example Person, Then we define a variable tom, Its type is Person. such , We're bound tom The shape of must and interface Person agreement
// Correct use interface Person { name: string; age: number; } let tom: Person = {
name: 'Tom', age: 25 }; // Error case 1 : There are fewer attributes defined for variables than interfaces interface Person { name: string;
age: number; } let tom: Person = { name: 'Tom' }; // error : Property 'age' is
missing in type '{ name: string; }' // Error case 2 : There are more attributes defined for variables than interfaces interface Person {
name: string; age: number; } let tom: Person = { name: 'Tom', age: 25, gender:
'male' }; // error: 'gender' does not exist in type 'Person'.
conclusion : When assigning values , The shape of the variable must be consistent with the shape of the interface

2. optional attribute :
// Optional attribute case 1 : Correct use interface Person { name: string; age?: number; } let tom:
Person = { name: 'Tom' }; // ok  let tony: Person = { name: Tony, age: 25}; //
ok  // Optional attribute case 2 : Misuse interface Person { name: string; age?: number; } let tom:
Person = { name: 'Tom', age: 25, gender: 'male' }; //error: 'gender' does not
exist in type 'Person'
conclusion : The meaning of an optional property is that it can not exist , However, it is still not allowed to add undefined properties

3. Arbitrary attribute :
// Arbitrary attribute case 1 : Correct use // use [propName: string] The definition of any attribute string The type of value interface Person {
name: string; age?: number; [propName: string]: any; } let tom: Person = {
name: 'Tom', gender: 'male' }; // Use of any attribute : Misuse interface Person {     name:
string; age?: number; //
error: type 'number' Properties of 'age' Cannot be assigned to string index type 'string', type 'number' Cannot be assigned to 'string' type
[propName: string]: string; } let tom: Person = {     name: 'Tom',     age: 25,
    gender: 'male' };
conclusion : Once any property is defined in the interface , Then make sure that the properties and optional properties that are on the same side with it must be its sub attributes

4. Read only property :

summary : Sometimes we want some fields in an object to be assigned only at creation time , Then you can use it readonly Define read only properties
// Wrong use case : interface Person {     readonly id: number;     name: string;    
age?: number;     [propName: string]: any; } let tom: Person = {     id: 89757,
    name: 'Tom',     gender: 'male' }; tom.id = 9527; // error:
Cannot assign to 'id', Because it is a constant or read-only property // Error case 2 : interface Person {     readonly id: number;  
  name: string;     age?: number;     [propName: string]: any; } //
At the time of assignment , attribute id Need to be initialized // error1:  Property 'id' is missing in type '{ name: string;
gender: string; } let tom: Person = {     name: 'Tom',     gender: 'male' };
tom.id = 89757; //error2: Cannot assign to 'id' because it is a constant or a
read-only property
conclusion ( be careful ): Read only constraints exist when an object is first assigned a value , Not the first time you assign a read-only property

Two , The type of array

1.「 type + square brackets 」 Representation
//ok( be careful : Each item type of the array must be consistent ) let fibonacci: number[] = [1, 1, 2, 3, 5]; //error:
Type '(string | number)[]' is not assignable to type 'number[]' let fibonacci:
number[] = [1, '1', 2, 3, 5]; //error: Argument of type '"8"' is not assignable
to parameter of type 'number'. let fibonacci: number[] = [1, 1, 2, 3, 5];
fibonacci.push('8');

2. Array generic representation
//ok ( The precautions are consistent with the above basic representation ) let fibonacci: Array<number> = [1, 2, 2, 3, 5];
fibonacci.unshift(10);
3. Array interface representation
// NumberArray express : as long as index The type of number, Then the type of the value must be number interface NumberArray
{     [index: number]: number; } let fibonacci: NumberArray = [1, 1, 2, 3, 5];
4.any Application in array
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
5. Class array :arguments,NodeList,HTMLCollection etc.
function sum() { let args: NodeList = document.getElementsByTagName('a'); }

Three , The type of function (* core )

1. Function declaration ( It includes function declaration and function expression )
// Function declaration function sum(x: number, y: number): number {     return x + y; }
// Function expression let mySum: (x: number, y: number) => number = function (x: number, y:
number): number {     return x + y; };
Comments :(1) Input extra ( Or less than required ) parameter , It's not allowed (2) stay TypeScript In the type definition of ,=>
Used to represent the definition of a function , On the left is the input type , It needs to be enclosed in brackets , On the right is the output type .


2. Use the interface to define the shape of a function
interface SearchFunc {     (source: string, subString: string): boolean; } let
mySearch: SearchFunc; mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1; }
3. Define function optional parameters
function buildName(firstName: string, lastName?: string) {     if (lastName) {
        return firstName + ' ' + lastName;     } else {         return
firstName;     } } let tomcat = buildName('Tom', 'Cat'); let tom =
buildName('Tom');
Comments : Optional parameters must be followed by required parameters . let me put it another way , Required parameters are not allowed after optional parameters .

4. Set function parameter defaults
function buildName(firstName: string, lastName: string = 'Cat') {     return
firstName + ' ' + lastName; } let tomcat = buildName('Tom', 'Cat'); let tom =
buildName('Tom');
5. Multiple uncertain residual parameters
function push(array: any[], ...items: any[]) {    
items.forEach(function(item) {         array.push(item);     }); } let a = [];
push(a, 1, 2, 3);
 

6. Function overloading
function reverse(x: number): number; function reverse(x: string): string;
function reverse(x: number | string): number | string {     if (typeof x ===
'number') {         return Number(x.toString().split('').reverse().join(''));  
  } else if (typeof x === 'string') {         return
x.split('').reverse().join('');     } }
Comments : In the example above , We have defined multiple functions
reverse, The first few times were function definitions , The last time is a function implementation . In the editor's code prompt , You can see the first two tips correctly .TypeScript
The matching starts with the top function definition , So if multiple function definitions have inclusion relations , The precise definition needs to be written first .