TypeScript

1、装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。必须要启用。
tsconfig.json:
{

"compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true
}

}

2、装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用@expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

3、TypeScript支持为带有装饰器的声明生成元数据。 你需要在命令行或 tsconfig.json里启用emitDecoratorMetadata编译器选项。
tsconfig.json:
{

"compilerOptions": {
    "target": "ES5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
}

}

4、模块在其自身的作用域里执行,而不是在全局作用域里;这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export形式之一导出它们。相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用 import形式之一
导出:
class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator };
导入:
import { ZipCodeValidator } from "./ZipCodeValidator";
let myValidator = new ZipCodeValidator();
可以对导入内容重命名
import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";let myValidator = new ZCV();

TypeScript 基本语法

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。
TypeScript 微软官方网站 http://www.typescriptlang.org/
TypeScript 源码 http://typescript.codeplex.com
1.基本数据类型
Boolean
//Booleanvar isDone:boolean = false;
Number
//Numbervar width:number = 100;
String
//Stringvar name:string = "hello";
Array
//Arrayvar list:number[] = [1, 2, 3];
var list:Array=[1, 2, 3];
Enum
//EnumenumColor{Red, Green, Blue}
varc: Color = Color.Red;
alert(c);//默认值从0开始,alert(0);//可以手动指定值enumColor1{Red = 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1);//alert(2)//根据值查找名称enumColor2{Red = 1, Green=2, Blue=4}
var c2: string = Color2[4];
alert(c2);//alert(Blue)
Any
//不确定类型,退出编译检查var notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean//不确定数组元素类型var anylist:any[] = [1, true, "free"];
anylist[1] = 100;
Void
//空白functionwarnUser(): void {

alert(123);

}
2.类
基本语法
classAnimal{

animalName:string;

constructor(name:string) {
    this.animalName = name;
}

sayHello() {
    alert(this.animalName + ": Hello");
}

}

var tom = new Animal("Tom");
tom.sayHello();//alert(Tom:Hello)
继承
classAnimal{

animalName:string;

constructor(name:string) {
    this.animalName = name;
}

sayHello() {
    alert(this.animalName + ": Hello");
}

}

classCatextendsAnimal{

//重写sayHello方法
sayHello() {
    alert(this.animalName + "(Cat):" + "Hello");
}

}

classMouseextendsAnimal{

sayHello() {
    alert(this.animalName + "(Mouse):" + "Hello");
}

}

var tom:Animal = newCat("Tom");
tom.sayHello();//alert(Tom(Cat):Hello)var jerry:Animal = newMouse("Jerry");
jerry.sayHello();//alert(Jerry(Mouse):Hello)
修饰符
当我们把animalName 改为private
classAnimal{

private animalName:string;//默认是public

constructor(name:string) {
    this.animalName = name;
}
//...

}

classCatextendsAnimal{

//重写sayHello方法
sayHello() {
    alert(this.animalName + "(Cat):" + "Hello");//Error 编译不通过
}

}
get,set 访问器
classAnimal {

private _animalName:string;//默认是publicgetanimalName():string{
    returnthis._animalName;
}

setanimalName(name:string):string{
    this._animalName = name;
}

//...

}
静态属性
//静态属性classTable{

static width = 100;
static height = 200;

}

var width = Table.width;
alert(width);//alert(100)
3.接口
基本语法
interface ICar {

color:string;

}

class Bus implements ICar {

color:string;
constructor() {
    this.color = "Blue";
}

}

var bus = new Bus();
alert(bus.color);
继承接口
//继承接口interface Shape {

color: string;

}

interface PenStroke {

penWidth: number;

}

interface Square extends Shape, PenStroke {

sideLength: number;

}
可选属性
interface ICar {

color:string;
safetyDevice?:any;//实现类无需实现

}

functionMoveCar(car:ICar){

if(car.safetyDevice)
{
    alert("The car is safe");
}
else
{
    alert("The car is not safe");
}

}
4.模块(Modules)
作用:1.防止命名空间冲突;2.将一个功能模块很容易的划分到不同文件中,更容易维护;
基本语法
module MyDemo {

exportinterface IDemo {

}

exportclass Demo implements IDemo {

}

}
别名
module Shapes {

exportmodule Polygons {
    exportclassTriangle{ }
    exportclassSquare{ }
}

}

import polygons = Shapes.Polygons;
var sq = new polygons.Square(); // 类似于 'new Shapes.Polygons.Square()'
5.函数(Function)
基本语法
function add(x:number, y:number):number {

return x + y;

}
// or
var myAdd = function (x:number, y:number):number {

return x + y;

};
完整的函数类型
var myAdd:(x:number, y:number)=>number =

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

为了增强可读性,给参数x、y具有实际的意义,可以这样写
var myAdd:(baseValue:number, increment:number)=>number =

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

第二部分number 是一个返回类型,如果无需返回类型,请使用 'void'
第三部分的function 参数类型,根据上下文类型进行推断,可以省略
var myAdd:(baseValue:number, increment:number)=>number =

function (x, y) {
    return x + y;
};

可选参数
//可选参数functionbuildName(firstName:string, lastName?:string) {

if (lastName)
    return firstName + " " + lastName;
elsereturn firstName;

}
var result1 = buildName("Bob");
默认参数
//默认参数functionbuildNameDefaultValue(firstName: string, lastName = "Smith"){

    return firstName + " " + lastName;

}
var result1 = buildNameDefaultValue("Bob");
可变参数
例如在C#中,方法参数定义使用param int[],调用方法时,就可以传递多个int类型的参数
在TypeScript中
function buildNameRest(firstName:string, ...restOfName:string[]) {

return firstName + " " + restOfName.join(" ");

}

var employeeName = buildNameRest("Joseph", "Samuel", "Lucas", "MacKinzie")
Lambads 和this关键字
var people={

name:["张三","李四","王五","赵六"],
getName:function(){
    returnfunction(){
        var i=Math.floor(Math.random()*4);
        return {
            n:this.name[i]
        }
    }
}

}

var pname=people.getName();
alert("名字:"+pname().n);
调用发现getName中的this关键字指向的是getName,访问不到外部的name属性
所以我们修改为:
var people = {

name: ["张三", "李四", "王五", "赵六"],
getName: function () {
    return  ()=> {
        var i = Math.floor(Math.random() * 4);
        return {
            n: this.name[i]
        }
    }
}

}

var pname = people.getName();
alert("名字:" + pname().n);
重载
//重载functionstudent(name:string):string;
functionstudent(age:number):number;
functionstudent(numberorage:any):any{

if (numberorage && typeof (numberorage) == "string")
    alert("姓名");
else
    alert("年龄");

}
student("Tom");//alert("姓名")
student(15);//alert("年龄")
6.泛型
基本语法
function identity(arg: T): T {

return arg;

}

//数组泛型
function identity(arg: T[]): T[] {

console.log(arg.length);

}
泛型类型(通用的函数类型)
function identity(arg:T):T {

return arg;

}
var myIdentity:(arg:T)=>T = identity;//T也可使用其他字母表示
//也可以这么写
//var myIdentity:{(arg:T): T} = identity;
接口泛型
interface GenericIdentityFn {

<T>(arg:T): T;

}

function identity(arg:T):T {

return arg;

}

var myIdentity:GenericIdentityFn = identity;
泛型类
classGenericNumber {

zeroValue:T;
add:(x:T, y:T) => T;

}

var myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y){

return x + y;

};
泛型约束
interface Lengthwise {

length: number;

}

functionloggingIdentity(arg:T):T{

console.log(arg.length);
return arg;

}

loggingIdentity(3);//error
loggingIdentity({length: 10, value: 3}); //只要类型包含length属性即可
泛型类约束
classFindable
{

//...

}
functionfind(n: T, s: Findable) {

// ...

}
7.合并
合并接口
interface Box {

height: number;
width: number;

}

interface Box {

scale: number;

}

var box: Box = {height: 5, width: 6, scale: 10};
合并模块
module Animals {

exportclass Zebra { }

}

module Animals {

exportinterface Legged { numberOfLegs: number; }
exportclass Dog { }

}

//相当于
module Animals {

exportinterface Legged { numberOfLegs: number; }

exportclass Zebra { }
exportclass Dog { }

}
合并模块和类
classAlbum{

label:Album.AlbumLabel;

}
module Album {

exportclassAlbumLabel{
}

}
合并模块和函数
functionbuildLabel(name:string):string{

return buildLabel.prefix + name + buildLabel.suffix;

}

module buildLabel {

exportvar suffix = "";
exportvar prefix = "Hello, ";

}

alert(buildLabel("Sam Smith"));
合并模块与枚举
enum Color {

red = 1,
green = 2,
blue = 4

}

module Color {

exportfunctionmixColor(colorName:string) {
    if (colorName == "yellow") {
        return Color.red + Color.green;
    }
    elseif (colorName == "white") {
        return Color.red + Color.green + Color.blue;
    }
    elseif (colorName == "magenta") {
        return Color.red + Color.blue;
    }
    elseif (colorName == "cyan") {
        return Color.green + Color.blue;
    }
}

}
不能合并
类与类不能合并
接口与类不能合并
变量与类不能合并
转载请注明出处:http://www.cnblogs.com/xcong/p/4570235.html

typescript封装JS的Callback

  1. JS原型

    plus.nativeUI.prompt("请输入内容",function(e){

        return e.index == 0 ? e.value : "";
    });
    
  2. 改写成TS服务
Prompt(msg: string): Promise<string> {
        return new Promise<string>(
            (string) => {
                plus.nativeUI.prompt(msg, (e: any) => string (
                    e.index == 0 ? e.value : ""
                ));
            });
    }
  1. 调用

    plus.Prompt("请输入").then((s: string)=>(alert(s)));

应该还有更好的方法,学习中...

angular2

angular2应用程序主要由以下八个部分组成:
1、模块 (Modules)
2、组件 (Components)
3、模板 (Templates)
4、元数据 (Metadata)
5、数据绑定 (Data Binding)
6、指令 (Directives)
7、服务 (Services)
8、依赖注入 (Dependency Injection)

模块
Angular 应用是由模块化的,它有自己的模块系统:NgModules;每个 Angular 应该至少要有一个模块(根模块),一般可以命名为:AppModule;Angular 模块是一个带有 @NgModule 装饰器的类,它接收一个用来描述模块属性的元数据对象。

几个重要的属性如下:
1.declarations:模块内部Components/Directives/Pipes的列表,声明一下这个模块内部成员

2.providers:指定应用程序的根级别需要使用的service。(Angular2中没有模块级别的service,所有在NgModule中声明的
Provider都是注册在根级别的Dependency Injector中)

3.imports:导入其他module,其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比
如导入CommonModule后就可以使用NgIf、NgFor等指令。

4.exports:用来控制将哪些内部成员暴露给外部使用。导入一个module并不意味着会自动导入这个module内部导入的module所暴
露出的公共成员。除非导入的这个module把它内部导入的module写到exports中。

5.bootstrap:通常是app启动的根组件,一般只有一个component。bootstrap中的组件会自动被放入到entryComponents中。

6.entryCompoenents: 不会再模板中被引用到的组件。这个属性一般情况下只有ng自己使用,一般是bootstrap组件或者路由组
件,ng会自动把bootstrap、路由组件放入其中。 除非不通过路由动态将component加入到dom中,否则不会用到这个属性。

简单的根模块:
app/app.module.ts 文件:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

接下来我们通过引导根模块来启动应用,开发过程通常在 main.ts 文件中来引导 AppModule ,代码如下:
app/main.ts 文件:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

组件(Components)、模板(Templates)、
组件:
组件是一个模板的控制类用于处理应用和逻辑页面的视图部分
创建 Angular 组件的方法有三步:
1.从 @angular/core 中引入 Component 修饰器
2.建立一个普通的类,并用 @Component 修饰它
3.在 @Component 中,设置 selector 自定义标签,以及 template 模板
模板:
Angular模板的默认语言就是HTML;我们可以通过使用模板来定义组件的视图来告诉 Angular 如何显示组件。
app/components.ts 文件:

@Component({
   selector : 'mylist',
   template : 'app.mylist.html'
   directives : [ComponentDetails]
})
export class ListComponent{...}

@Component 中的配置项说明:
selector - 一个 css 选择器,它告诉 Angular 在 父级 HTML 中寻找一个 标签,然后创建该组件,并插入此标签中
templateUrl - 组件 HTML 模板的地址
directives - 一个数组,包含 此 模板需要依赖的组件或指令

元数据(Metadata)、数据绑定(Data binding)
元数据:
元数据告诉 Angular 如何处理一个类;在 TypeScript 中,我们用 装饰器 (decorator) 来附加元数据。
数据绑定:
数据绑定为应用程序提供了一种简单而一致的方法来显示数据以及数据交互,它是管理应用程序里面数值的一种机制;通过这种机制,可以从HTML里面取值和赋值,使得数据的读写,数据的持久化操作变得更加简单快捷
1.插值 : 在 HTML 标签中显示组件值

<h3>{{list}}<h3>

2.属性绑定: 把元素的属性设置为组件中属性的值

<img [src]="userImageUrl">

3.事件绑定: 在组件方法名被点击时触发

<button (click)="onSave()">保存</button>

4.双向数据绑定,使用Angular里的NgModel指令可以更便捷的进行双向绑定

<input [value]="currentUser.firstName"
   (input)="currentUser.firstName=$event.target.value" >

指令(Directives)
指令是一个带有"指令元数据"的类;在 TypeScript 中,要通过 @Directive 装饰器把元数据附加到类上

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>

timg.jpg

用typescript 封装 hbuilder的plus对像

  1. 写 plus.ts 服务

    import { Injectable } from '@angular/core';
    
    declare var plus;
    
    @Injectable()
    export class Plus {
       /**
        * 消息提醒
        * @param msg 消息
        */
        toast(msg) {
            plus.nativeUI.toast(msg, { duration: "long" });
        }
    }
    
    
  2. 在app.module.ts中加入服务

    import { Plus } from '../providers/plus';

    @NgModule({
    declarations: [

    ...

    ],
    imports: [

    IonicModule.forRoot(ConferenceApp)

    ],
    bootstrap: [IonicApp],
    entryComponents: [

    ...

    ],
    providers: [..., Plus]
    })
    export class AppModule { }

  3. 在页面里注入服务

    import { Plus } from '../../providers/plus';

    @Component({

    templateUrl: '../..'

    })
    export class TabsPage {

    constructor(navParams: NavParams, plus: Plus) {

      **plus.toast("aa");**
      

    }
    }