ionic3学习之路（四）：TypeScript学习与GitHub项目运行

我的csdn博客地址：http://blog.csdn.net/li_zean/article/details/79277046

learn-continue.jpg

1、ionic3-components-master
多组件项目部署步骤

1.1、新建一个项目 ionic start ionic3-components-copy blank

1.2、选择no

1.3、选择no

1.4、cd ionic3-components-copy

1.5、ionic serve正常运行

1.6、ionic cordova run android

1.7、删除新建项目的src目录

1.8、解压下载的项目

1.9、复制src目录到新建的项目中

1.10、ionic cordova plugin add phonegap-plugin-barcodescanner

1.11、npm install --save @ionic-native/barcode-scanner

1.12、ionic cordova plugin add card.io.cordova.mobilesdk

1.13、npm install --save @ionic-native/card-io

1.14、ionic cordova plugin add cordova.plugins.diagnostic

1.15、npm install --save @ionic-native/diagnostic

1.16、npm install angular2-swing --save

1.17、ionic cordova plugin add cordova-plugin-camera

1.18、npm install --save @ionic-native/camera

1.19、npm install @angular/material-moment-adapter

1.20、npm install moment

1.21、npm install @ionic-native/geolocation

1.22、npm install chart.js --save

1.23、删除src\providers目录下的native-google-maps文件夹

1.24、打开/src/pages/ionic-native/native-google-maps/native-google-maps.ts文件

1.25、删除16行的public mapsCtrl: NativeGoogleMapsProvider

1.26、执行25步骤后下面会有两行报错，把那两行直接删除即可

1.27、打开\src\app\app.imports.ts文件

1.28、第8、18、40、50行注释掉

    1.28.1、import { NativeGoogleMapsProvider } 
            from '../providers/native-google-maps/native-google-maps';

    1.28.2、import { GoogleMaps } from '@ionic-native/google-maps';

    1.28.3、NativeGoogleMapsProvider,

    1.28.4、GoogleMaps,

1.29、ionic serve正常运行

1.30、ionic cordova run android正常运行

1.31、GitHub地址：https://github.com/yannbf/ionic3-components.git

1.32、说明事项：
    通过上面的步骤，项目就能正常运行了，其中23步骤到28步骤是去掉谷歌地图小模块的，因为谷歌地图需要
    依赖Google Play Services，而且还依赖其它一些服务，还需要翻墙，如果不去掉项目无法部署到手机上
    正常运行，去掉就能正常运行了。这30个步骤中有一部分是可以调换先后顺序来执行的，但是有些步骤是有
    先后依赖关系的，所以尽量按照步骤走，这样能保证项目跑起来。

2、TypeScript

2.1、函数（完整函数类型）

    2.1.1、let myAdd: (x: number, y?: number)=> number =
        function(x: number, y?: number): number 
        { 
            return x + y; 
        };

    2.1.2、或者
        let myAdd: (baseValue: number, increment?: number) => number =
        function(x: number, y?: number): number 
        { 
            return x + y; 
        };

    2.1.3、解释：函数名：（参数名：参数类型，参数名?：参数类型）=>返回值类型=执行的函数（参数名：参
    数类型，参数名?：参数类型）：返回值类型{函数体}；

    2.1.4、注意事项：
        前面部分相当于函数申明一样，定义函数是什么样子的，后面部分相当于具体函数的样子，以及{}中函数
        要执行的操作，完成一定的功能。前面部分的参数与后面部分参数是一一对应的，但参数名字可以定义成
        不一样，它只是为了增加可读性，只要能一一对应上都可以。:?符号表示参数是可选的，如果传入了这个
        参数就接收，如果没有传入，这个参数就不存在，它是非必须的，可有可无，如果不是可选参数，则一定
        要传入这个参数。

    2.1.5、上面的函数也可以更简单的申明为：
        let myAdd = function(x: number, y?: number): number {return x + y; };
        或者：
        function myAdd(x: number, y?: number){ return x + y; }

2.2、泛型

    2.2.1、泛型函数

        function identity<T>(arg: T): T {
            return arg;
        }

    2.2.2、泛型类

        class GenericNumber<T> {
            zeroValue: T;
            add: (x: T, y: T) => T;
        }

    2.2.3、泛型约束

        2.2.3.1、创建一个包含 .length属性的接口：

            interface Lengthwise {
                length: number;
            }

2.3、枚举

    2.3.1、枚举我们可以定义一些有名字的数字常量

        enum Direction {
            Up = 1,
            Down,
            Left,
            Right
        }

    2.3.2、外部枚举

        declare enum Enum {
            A = 1,
            B,
            C = 2
        }

2.4、类型推论：略

ionic3学习之路（四）：TypeScript学习与GitHub项目运行

推荐阅读更多精彩内容