ionic3学习之路(四)

TypeScript学习与GitHub项目运行

learn-continue

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、类型推论:略
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值