Typescript代码实例解析

简介：

TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。

语法特性

• 类 Classes
• 接口 Interfaces
• 模块 Modules
• 类型注解 Type annotations
• 编译时类型检查Compile time type checking
• Arrow 函数 (类似 C# 的 Lambda 表达式)

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

一、基础类型

1、字符串新特性

可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ `），并且以${ expr }这种形式嵌入表达式

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

2、数组的使用

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>：

let list: Array<number> = [1, 2, 3];

3、枚举

enum类型是对JavaScript标准数据类型的一个补充。 像C#等其它语言一样，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

可以手动赋值

enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

let colorName: string = Color[2];
alert(colorName);

枚举是在运行时真正存在的一个对象。 其中一个原因是因为这样可以从枚举值到枚举名进行反向映射。

enum Enum {
    A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"

有时候需求却比较严格。 当访问枚举值时，为了避免生成多余的代码和间接引用，可以使用常数枚举。 常数枚举是在 enum关键字前使用const修饰符。

const enum Enum {
    A = 1,
    B = A * 2
}

4、Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量：

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

你可能认为 Object有相似的作用，就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法

5、Void

某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

function warnUser(): void {
    alert("This is my warning message");
}

6、Null 和 Undefined 和 Never

作用不大

7、类型断言

类型断言有两种形式。 其一是“尖括号”语法：

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

let strLength: number = (someValue).length;
另一个为as语法：

let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;

二、参数新特性

• 参数类型
• 默认值
• 可选参数

function test(a:string,b?:string,c:string="jojo"){
    console.log(a);
    console.log(b);
    console.log(c);
}

test("aaa");

三、变量声明

let和const是ES6里新特性

1、let和const都有块级作用域

• 块或for之外不可访问
• 不能被声明前读或写
• 不可重定义
• 内层屏蔽外层，应避免

2、不同

const虽然与let有相同的块级作用域规则，但不可重新赋值。

四、函数新特性

1、Rest和Spread

//传入任意多的参数
function test(...args){
    args.forEach(function (arg) {
        console.log(arg);
    })
}

console.log(1,2,3,4,5,6);

//传的参数不固定，但真正传入的按照函数来定
function test2(a,b,c){
    console.log(a);
    console.log(b);
    console.log(c);
}

var args1 = [1,2,3,4,5];
test2(...args1);
//虽然报错，但是生成的js文件可实现功能
//在angular4的项目中ng build --prod时会自动进行AOT预编译，
//ts代码报错会无法编译通过，因此不能在有预编译的项目中使用

2、Generator

控制函数执行过程，手动暂停和恢复代码执行

function* test(){
    console.log("start");
    yield ;
    console.log("start");
}

3、析构函数distructuring

function getStock(){
    return {
        code:"IBM",
        price:100
    }
}

var {code,price} = getStock();
console.log(code);
console.log(price);


function getStock2(){
    return {
        code:"ibm",
        price:{
            price1:600,
            price2:400
        }
    }
}
var {code:codex,price:{price2}} = getStock2();
console.log(codex);
console.log(price2);


var arr1 = [1,2,3,4];
var [a,b]=arr1;
console.log(a);
console.log(b);
var [, ,c,d]=arr1;
console.log(c);
console.log(d);
var [m,n,...others]=arr1;
console.log(m);
console.log(n);
console.log(others);

四、表达式与循环

1、箭头表达式

var fun1 = () =>{
}

var arr1 = [1,2,3,4];
console.log(arr1.filter((value)=> value%2==0 ));
//
//
//最主要的作用是正确指向this
function getNum() {
    this.i=1;
    setInterval(() => {
        console.log(this.i);
    },1000);
}

2、of循环

of循环与in循环的区别：

var arr1 = [1,2,3,4];
for(var n in arr1){
    console.log(arr1[n]);
}

for(var n of arr1){
    console.log(n);
}

五、面向对象的特性

1、类

class Person{
    constructor(public name:string){

    }
    eat(){
        console.log(this.name);
    }
}

var p = new Person("frank");
p.eat();

继承Person类–extends

class Employee extends Person {
    code:string;
    work(){
        console.log(this.name+" is working");
    }
}
var e = new Employee("eric");
e.work();

super–子类调父类调构造函数

class Employee2 extends Person {
    constructor(name:string,code:string){
        super(name);
        this.code = code;
    }
    code:string;
    work(){
        super.eat();
    }
}
var e2 = new Employee2("eric","0");
e2.work();

2、泛型

参数化的类型，一般用来限制集合的内容

class Person{
    constructor(public name:string){

    }
    eat(){
        console.log(this.name);
    }
}
var workers : Array<Person> = [];

3、接口

interface IPerson{
    name:string;
    age:number;
}
class Person{
    constructor(public config:IPerson){

    }
}
var p = new Person({
    name:"frank",
    age:18
});

//implements

interface animal{
    eat();
}
class tiger implements animal{
    eat(){
        console.log("i like meat");
    }
}
class sheep implements animal{
    eat(){
        console.log("i like grass");
    }
}

4、模块

可重用的单元，开发者自己决定模块中哪些资源（类、变量、函数）暴露出去给外部使用，哪些自己使用

module1.ts:

export var prop1;
export function fun1(){};
export class Person{};

module2.ts:

import {prop1,fun1,Person} from './module1';

var p = new Person();
var prop = prop1;

export class ModuleTest{
    constructor(private props:prop1){

    }
}

5、注解 annoation

注解:为程序的元素(类、方法、变量)添加更直观的说明,这些说明与程序的业务逻辑无关,而是供指定的工具或框架使用。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'platform',
  templateUrl: './platformAccount.component.html',

})
export class test{
         ......
}