TypeScript学习

字符串的新特性

1. 多行字符串

使用``实现多行字符串

var content = `aaaa
bbbb
ccccc`;

编译成js代码为:

var content = "aaaa\nbbbb\nccccc";

2. 字符串模板

其实和多行字符串差不多

var mynane = "jack";

var getName = function () {
    return "jack";
}

console.log(`<div>
<span>${mynane}</span>
<span>${getName()}</span>
</div>`);

console.log(`hello${mynane}`);
console.log(`hello${getName()}`);

编译js代码:

var mynane = "jack";
var getName = function () {
    return "jack";
};
console.log("<div>\n<span>" + mynane + "</span>\n<span>" + getName() + "</span>\n</div>");
console.log("hello" + mynane);
console.log("hello" + getName());

3. 自动拆分字符串

function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}

var myname = "jack";
var getAge = function () {
    return 18;
}

test`hello my name is ${myname},i'm${getAge()}`

打印结果:

自动拆分字符串,很神奇的用法

参数新特性 之 参数类型

1. 参数类型:在参数名称后面使用冒号来指定参数的类型
   例如:string类型的,当赋值number类型时,报错
   string类型的,当赋值number类型时,报错
   2.类型推断机制
   例如:当我没有指定类型时,第一次给变量赋值为string类型时,当我修改这个变量为number类型,就会报错.
   类型推断机制
2. any类型
   当我赋值任何类型时,都不会报错;
   上面的例子,当我把alias的类型指定为any时,就不会报错了;
   any类型
3. 其他类型: number数字类型 , boolean布尔类型 , void类型

number类型

var age: number = 13;

boolean布尔类型

var man: boolean = true;

void类型: 用于定义函数返回类型等
定义函数的返回类型为void类型,当函数有返回值时,报错!,说明他不需要有任何类型的返回值.

定义函数的返回类型为void类型

4. 自定义类型
   自定义一个对象类型

class Person {
    name: string;
    age: number;
}

var zhangsan: Person = new Person();
zhangsan.name = 'jack';
zhangsan.age = 18;

参数新特性 之 默认参数

在参数声明后面用等号来指定参数的默认值

1.只要在等号后边赋上默认值即可

var myname: string = "张三";

2.给方法的变量指定默认值

• 给方法参数指定类型

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

test("xxx","yyy","zzz");

• 当调用上面的方法,如果少传一个参数,就会报错

  
  函数如果少传一个参数,就会报错

• 如何解决上面函数报错的问题呢? 可以给第三个参数指定一个默认值; 这样如果第三个参数不填,就会调用默认值;

注意: 带默认值的参数一定要声明在"最后面";

函数参数指定默认值

参数新特性 之可选参数

在方法的参数声明后面用问号来标明此参数为可选参数

以上面的方法为例,在b参数后面写上?,定义为可选参数;

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

test("xxx");

可选参数如果不传值,那么他就是undefined

注意:必选的参数,不能在可选参数的后面

必选的参数,不能在可选参数的后面

函数新特性

1. Rest and Spread操作符: ①.用来声明任意数量的方法参数

function func1(...args) {
    args.forEach(function (arg) {
        console.log(arg);
    })
}

func1(1, 2, 3);  // 1,  2,  3
func1(5, 6, 7, 8, 9);  // 5, 6, 7, 8, 9

②.Rest and Spread操作符:另外一个作用:展开运算符
当然此语法TypeScript还不支持,会报错,但是转成js语法后可正常编译.

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var args = [1, 2];
func1(...args);  //执行结果: 1, 2, undefined

var args2 = [7, 8, 9, 10, 11];
func1(...args2);  //执行结果: 7 , 8, 9

上述代码编译成js语法后

function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
var args = [1, 2];
func1.apply(void 0, args);
var args2 = [7, 8, 9, 10, 11];
func1.apply(void 0, args2);

2. generator函数:控制函数的执行过程, 手工暂停和恢复代码执行;
   类似于断点调试(目前ts还不支持,它是ES6的一部分)
   在babel编辑器中

通过*号function* xxx()声明 generator函数

function* doSomething(){
  console.log("start");
  yield; // 类似于一个断点
  console.log("finish");
}

var func1 = doSomething();

func1.next(); // 代表函数执行,第一次走,函数会停在yield断点处;
func1.next();// 第二次走,会越过yield断点继续往下执行;

又例如:下面的函数,当价格小于limitPrice时,购买股票(点击查看源码)

function* getStockPrice(stock){
  while(true){
    yield Math.random()*100;
  }
}

var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;
var price = 100;

while(price > limitPrice){
  price = priceGenerator.next().value;
  console.log(`the generator return ${price}`);
}

console.log(`buying at ${price}`);

3.destructuring析构表达式:通过表达式,将对象或者数组拆解成任意数量的变量

也就是之前了解的"结构赋值"

①:对象中的使用

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

// ES5
var stock = getStock();
var code = stock.code;
var price = stock.price;

// ES6
// var { code, price } = getStock();
// 也可以设置别名
var { code: codex, price } = getStock();
// 调用别名
console.log(codex); // IBM

对象中多层嵌套属性

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2:400
        },
        aaa: "xixi",
        bbb: "hahah"
    }
}

// code: codex 设置别名
var { code: codex, price: { price1, price2 } } = getStock();
// 调用别名
console.log(codex); // IBM
console.log(price1); // 200

②. 数组中析构表达式的使用

var array1 = [1, 2, 3, 4];
var [number1, number2] = array1;

console.log(number1); // 1
console.log(number2); // 2

取数组中的后两个值

var array1 = [1, 2, 3, 4];
var [, , number1, number2] = array1;
console.log(number1); // 3
console.log(number2); // 4

举一反三

var array1 = [1, 2, 3, 4];
var [number1, , , number2] = array1;
console.log(number1); // 1
console.log(number2); // 4

析构表达式和Rest and Spread操作符共同使用

var array1 = [1, 2, 3, 4];
var [number1, number2, ...others] = array1;

console.log(number1); // 1
console.log(number2); // 2
console.log(others); // 数组 [3, 4]

函数中的使用

var array1 = [1, 2, 3, 4];

function doSomething([number1, number2, ...others]) {
    console.log(number1); // 1
    console.log(number2); // 2
    console.log(others);  // 数组 [3, 4]
}

doSomething(array1); 

表达式和循环

1.箭头表达式:用来声明匿名函数,消除传统匿名函数的this指针问题

• 简单使用

//1.1 => 箭头后面如果只有一行,不用写大括号的 arg1 + arg2;
var sum1 = (arg1, arg2) => arg1 + arg2;

//1.2 如果是多行
var sum2 = (arg1, arg2) => {
    return arg1 + arg2;
}

//1.3 没有参数的箭头函数
var sum3 = () => {

}

//1.4 只有一个参数的箭头函数,参数可以省略()
var sum4 = arg1 => {
    console.log(arg1);
}

// 1.5 箭头函数的简单使用
var myArray = [1, 2, 3, 4];
// 筛选出数组中的偶数
console.log(myArray.filter(value => value % 2 == 0)); // 数组[2, 4]

• 消除传统匿名函数的this指针问题

function getStock(name: string) {
    this.name = name;
    setInterval(function () {
        console.log(`name is ${this.name}`); //打印结果: name is ,this.name的值为空
    },1000);
}

var stock = new getStock("IBM");


function getStock2(name: string) {
    this.name = name;
    setInterval(() => {
       console.log(`name is ${this.name}`); //打印结果:name is IBM,这下this.name就有值了,这样更符合开发者的编程习惯
    }, 1000);
}

var stock2 = new getStock2("IBM");

2. 循环 forEach(), for in 和 for of ,还有find()

• forEach()

var myArray = [1, 2, 3, 4];
myArray.desc = "four number"; // 给数组添加属性,ts语法不支持

//注意:
//1.1 forEach()循环会去循环数组里面的元素,把属性忽略掉
//1.2 forEach()循环中间不能break(跳出循环)

myArray.forEach(value => console.log(value)); // 依次输出1,2,3,4

• for in

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 给数组添加属性,ts语法不支持

for (var n in myArray) {
    // 注意 for in 循环的是集合的键,在此处指的是数组的下标
    console.log(n); // 0, 1, 2, 3, desc
    // 要想打印出数组的值
    console.log(myArray[n]);// jack, lucy, lily, tom, desc
}
// 注意:for in 循环可以把数组的属性循环出来,这个行为很可能不是我们希望的行为

• for of

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 给数组添加属性,ts语法不支持

for (var name of myArray) {
    console.log(name); // jack, lucy, lily, tom  
}

// for of 和 for in的区别:for of可以忽略掉数组的属性,for of循环的是集合的值, for in 循环的是键

for of循环是可以被打断的

var myArray = ["jack", "lucy", "lily", "tom"];
myArray.desc = "four people"; // 给数组添加属性,ts语法不支持

for (var name of myArray) {
    if (name == "lily") break;// 当循环到name==lily时,跳出循环
    console.log(name); // jack, Lucy 
}

for of循环字符串

var myaddress = "Shanghai";
for (var char of myaddress) {
     console.log(char); // 打印结果: s ,h,a,,n,g,h,a,i
}

for of还可以循环对象,map等

find()函数,通过条件查询出符合条件的

  getStock(id: number): Stock {
    return this.stocks.find(stock => stock.id === id);
  }

TypeScript类

1. 类 (class)
   类是TypeScript的核心,使用Typescript开始时,大部分代码都是写在类里面的.

• 类的定义

class Person{
    name;
    eat() {
        console.log("i'm eatting");
    }
}

// 类的实例化
var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

// 一个类可以new出多个示例,他们拥有相同的属性和方法,但是属性的状态不同!

类的访问控制符: public, private, protected
public: 默认是访问控制符,public的属性和方法都是可以在类的内部和外部访问到的.
private: 私有的,只可以在类的内部被访问到,在类的外部是访问不到的!
protected: 受保护的,受保护的属性和方法可以在类的内部和他的子类(继承)里边被访问到.

private修饰的私有方法,不可以被外界访问到,外界访问直接报错

• 类的构造函数

constructor:在类被实例化的时候调用,而且只会被调用一次,在外部是访问不到的!

例如:类的实例化时,必须传进来一个名字

class Person{
    name;
    constructor(name:string) {
        this.name = name;
    }
    eat() {
        console.log(this.name);
    }
}

// 类的实例化
var p1 = new Person("batman");
p1.eat(); // batman

var p2 = new Person("superman");
p2.eat(); // superman

上面的方法等同于下面

class Person{
    //public name:string 等同于生命了一个name属性
    constructor(public name:string) {
        
    }

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

// 类的实例化
var p1 = new Person("batman");
p1.eat(); // batman

var p2 = new Person("superman");
p2.eat(); // superman

• 类的继承
  • extends:用来声明一种继承关系.

    class Person{
    constructor(public name:string) {
    
    }
    
    eat() {
        console.log(this.name);
      }
    }
    
    // Employee继承自Person,Employee类可以获得Person类的所有的属性和方法
    class Employee extends Person{
    // 可以指定新的属性和方法
    code: string;
    work() {
        
      }
    }
    
    // el 同时拥有Person和Employee的属性方法
    var el = new Employee("meimei");
    el.eat();
    el.code = "123";
    el.work();
    

  • super
    调父类的构造函数

class Person{
    constructor(public name:string) {
        console.log("哈哈");
    }

    eat() {
        console.log("I'm eatting");
    }
}

class Employee extends Person{
    constructor(name:string, code:string) {
        super(name);// 调用父类的构造函数
        this.code = code;
        console.log("嘻嘻");

    }
    // 可以指定新的属性和方法
    code: string;
    work() {
        // 在方法里面调用父类的方法
        super.eat();
        //调用自己方法
        this.dowork();
    }

    dowork() {
        console.log("I'm working");
    }
}

// el 同时拥有Person和Employee的属性方法
var el = new Employee("meimei","123");

el.work();

执行结果

面向对象 之 泛型

泛型 (generic): 参数化的类型,一般用来限制集合的内容.

比如:下面的例子,尖括号里面的Person就是泛型,他约定这个数组里面只能放Person类型的数据;

var workers: Array<Person> = [];

泛型的具体使用:

class Person{
    constructor(public name:string) {
        console.log("哈哈");
    }

    eat() {
        console.log("I'm eatting");
    }
}

class Employee extends Person{
    constructor(name:string, code:string) {
        super(name);// 调用父类的构造函数
        this.code = code;
        console.log("嘻嘻");

    }
    // 可以指定新的属性和方法
    code: string;
    work() {
        // 在方法里面调用父类的方法
        super.eat();
        //调用自己方法
        this.dowork();
    }

    dowork() {
        console.log("I'm working");
    }
}
/**********************泛型的具体使用***********************/
var workers: Array<Person> = []; //指定了 workers类型为数组,且数组只能放Person类型的数据
workers[0] = new Person("zhangsan");
workers[1] = new Employee("lisi", "2"); // Employee是继承自Person,也可以放
workers[2] = 2;// 就会报红色警告

面向对象 之 接口(Interface)

接口(Interface):用来建立某种代码约定,使得其他开发者在调用某个方法或者创建新的类时,必须遵循接口所定义的代码约定;(js中没有,只有ts中有)

• Interface 声明属性

// 声明接口
interface IPerson{
    name: string;
    age: number;
}

//声明一个类
class Person{
    // 作用: 参数方法类型声明
    // config: IPerson >>> IPerson类型的参数
    constructor(public config: IPerson) {
        
    }
}

// 实例化时,必须要传一个IPerson类型的对象进去
// 注意:多传一个属性和多传一个属性都会报错
var p1 = new Person({
    name: "zhangsan",
    age: 18
});

• Interface 声明方法

implements 实现的意思

// 声明一个方法
interface Animal {
    eat();
}

// implements 作用:声明 Sheep 这个类实现 Animal 的接口
// 它必须实现 Animal 的eat()方法
class Sheep implements Animal{
    eat() {
        console.log("I eat grass");
    };
}

class Tiger implements Animal{
    eat() {
        console.log("I eat meat");
    };
}

面向对象 之 模块

模块(Module):模块可以帮助开发者将代码分割为可重用的单元.开发者可以自己决定将模块中的哪些资源(类,方法,变量)暴露出去供外部使用,哪些资源只在模块内使用.

在a.ts中暴露一些属性,方法和类

// 有两个关键字支撑模块的特性: export import

// 对外暴露一些东西
export var prop1;

// 不对外暴露
var prop2;

// 对外暴露一个方法
export function func1() {

}

// 不对外暴露方法
function func2() {

}

// 对外暴露一个类
export class Class1 {

}

// 不对外暴露一个类
class Class2 {

}

在b.ts中引用a的属性,方法和类

// 一个模块 既可以对外暴露(export)它的属性、方法和类,也可以import别人的属性、方法和类;
import {Class1, func1, prop1} from "./a";

console.log(prop1);

func1();

new Class1();

export function func3(){

}

面向对象 之 注解

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

面向对象 之 类型定义文件(*.d.ts)

类型定义文件(*.d.ts):类型定义文件用来帮助开发者在TypeScript中使用已有的JavaScript的工具包. 如:JQuery

TypeScript常用的类型定义文件
typings专门用于下载某个想用的类型定义文件