【TypeScript】TypeScript+Ionic的Component文件里（ts文件）如何创建对象

转自：https://blog.csdn.net/River_Continent/article/details/78023954

在Ionic文件中，有以下几个步骤：

1.import导包；

import {Component} from '@angular/core';
import {IonicPage, NavParams, ToastController, AlertController, LoadingController, Platform, App} from "ionic-angular";
import {DatabaseService} from "../database.service";
import {TransferObject, Transfer} from "@ionic-native/transfer";
import {File} from "@ionic-native/file";
import {FileOpener} from "@ionic-native/file-opener";
import {InAppBrowser} from "@ionic-native/in-app-browser";
import pinyin from 'js-pinyin';

2.导入组件Component

@IonicPage()
@Component({
    selector: 'databaseData',
    templateUrl: './databaseData.html',
    providers:  [DatabaseService,TransferObject]
})

这里@IonicPage()是因为下面有分页模式； 
selector:选择器，就是我这个页面的方法对应的html页面名字，去掉后缀之后的名字； 
templateUrl：表示对应的页面的全称； 
providers：提供者，表示由那个服务者提供的；我们可以这么类比

支付宝支付方法提供者（providers）:[阿里巴巴有限公司,手机，服务商，商铺]；
义务教育提供者（providers）:[政府，法律，学校，父母，老师]

3.创建主类Component

export class DatabaseDataComponent {

}

如果是主方法，需要加*Component来命名；原则上一个ts文件中只有一个Component为主类； 
在主类中有以下几个模块： 
①初始化：就是给各个变量一个初始化的值：

    pdfList:any ={};
    pageIndex=1;
    profession:string;
    id:number;
    tempUrl:any;
    type:any;
    state:any;
    searchingItems = []; //搜索显示的数组
    fileDataList=[];
    allSearchFileDataList = [];  //未排序供搜索的数组
    formatFileDataList: Array<FileDataList> = new Array();
    searchQuery: string = '';
    items: string[];
    isSearching = false;
    searchInput:string;

这里： 
初始化的格式为：变量名：数据类型； 
大括号{ }：表示对象：类似于Java中的实体类pojo； 
中括号[ ]:表示数组； 
如果不知道写什么类型，可以写any；TypeScript，简称ts（ts是JavaScript的超集，ts可以兼容js，你全部当js来写也没有问题）；如果可以确定，可以写具体点；string即JavaScript中的String；在ts或js中，没有明确字符概念，可以全部理解为字符串；所以，一般情况下，单引号和双引号没有太大区别；声明一个字符串可以用单引号‘’也可以用双引号“”；

②构造；

    /*warn service，插件，控制器，对象等的构造*/
    constructor(private databaseService:DatabaseService,
                private inAppBrowser: InAppBrowser,
                private navParams:NavParams,
                private transfer: Transfer,
                private fileTransfer:TransferObject,
                private toastCtrl:ToastController,
                private loadingCtrl:LoadingController,
                private alertCtrl:AlertController,
                private fileOpener: FileOpener,
                private app:App,
                private file:File,
                private platform: Platform,
                ){
        this.profession=this.navParams.get('profession');
        this.searchInput = "";
    }

小括号里定义构造变量的作用域修饰符，变量名，变量类型；一般是【重量级】的嘉宾才可以登场：比如官方的一些默认对象；还有你自己定义的Service；

3.方法：这里方法比较简单，不需要用

function(){

}

这种定义方法，直接方法名+小括号+大括号即可；

    ngOnInit() {
        this.pageChange(this.pageIndex);
    }

例如上面的官方的初始化方法，初始化加载的一些方法；ngOnInit是方法名，小括号内放参数，大括号内放逻辑代码；方法内也可以引用方法；例如上面的pageChange(this.pageIndex);也是一个方法；如果该方法在本文件中，直接用this引用；这里用了this引用，所以，pageChange()这个方法一定在本文件（本页面）；对比内外这两个方法，我们知道，第一个方法是无参的，因为ngOnInit()小括号里没有参数；里面的方法pageChange(this.pageIndex)里面有this.pageIndex，所以，pageChange方法是有参方法；

而且，这个参数是在本文件（本页面）初始化，并且在本文件（本页面）定义的，因为用的是this引用的；到了这里，大家对this的作用也明确了；this就是引用本文件（本页面）的参数，方法；翻译为中文可以是：“这个”参数，“这个”方法；既然翻译成“这个”，必然是附近的，或者是不久前刚提到，刚用过的；只能是这个页面的东西；水浒里说“这厮”，就是指面前的这人，或者和别人谈话中提起到的人物；刚发生不久的；

4.创建分类

第一个类：

/*warn 搜索框——创建列表KV键值对 */
export class FileDataList {
    key: string;
    value: Array<any> ;
}

第二个类：

/*warn 搜索框——创建文件对象*/
export class FileDataObj {
    name: string;
    lastupdateby: string;
    pinyinName: string;
    profession:string;
    url:string;
    query_startDate:string;
    query_endDate:string;
    trainId:string;
    state:string;
}