TypeScript 入门

话不多说先上图！！！

timg.jpg

TypeScript 的好处

• 支持ES6规范
• 强大的IDE支持
• Angular2 的开发语言

TypeScript 安装开发环境

• compiler 就是 typescript 的编译器(转 javascript)
• 可以使用在线commiler

TypeScript 概念，语法和特性

• 字符串新特性

// 多行字符串
  ``

//js
  var content = 'aa'+
'bb'+
'cc';
//var content = 'aabbcc';

// typescript
var content = `aa
bb
bb`
//var content = "aabbcc";

• 字符串模板

`${xxxxx}`

var myname = 'zhai liang';
var getName = function () { 
    return 'zhai liang'
}
console.log(`hell ${myname}`);
console.log(`hell ${getName}`);

• 自动拆分字符串

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

var myname = 'zhai liang';
var getAge = function () { 
    return 18;
}
test`hello my name is ${myname},i m ${getAge()}`

参数新特性

• 参数类型

var myname: string = "zhan ling"; // 字符串

var alias:any = 'xixi'; // 可以声明任何类型0

var age: number = 13; // 数字

var man: boolean = true; // 布尔

function test(): void {  // void  不需要任何类型的返回值
    return
}

// 自定义类型
class Person {
    name: string; 
    age:number
}

var zhangsan: Person = new Person();

zhangsan.name = "zhansan";
zhangsan.age = 18;

• 参数默认值

var myname: string = "zhangliang";
function test(a: string, b: string, c: string) { 
    console.log(a);
    console.log(b);
    console.log(c);
}
test("xxx", "yyy", "zzz");

• 可选参数

var myname: string = "zhangliang";
function test(a: string, b?: string, c: string="cese") { 
    console.log(a);
    console.log(b);
    console.log(c);
}
test("xxx");

函数新特性

• Rest and Spread 操作符 - 用来声明任意数量的方法参数

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

func1(1, 2, 3);
func1(7, 8, 9, 10, 11);

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

var args = [1, 2]
func1(...args);

var args2 = [7, 8, 9, 10, 11];
func1(...args2);

• generator 函数 - 控制函数的执行过程中， 手工暂停和恢复代码执行

...

• destructuring 析构表达式 - 通过表达式将对象或数组拆解成任意数量的变量

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

var { code, price } = getStock();

//------------------------
function getStock() { 
    return {
        code: "IMB",
        price: {
            price1: 100,
            price2:200
        }
    }
}

var { code, price: {price2 } } = getStock();

// ------------------
var array1 = [1, 2, 3, 4]

var [number1, number2,...others] = array1;

console.log(number1);
console.log(number2);
console.log(others);

表达式和循环

• 箭头表达式 - 用来声明匿名函数，消除传统匿名函数和this指针问题

var sum = (arg1,arg2) => arg1 + arg2
var sum = arg1 => {
    return arg1
}

// 过滤 复数
var myArray = [1, 2, 3, 4, 5];
console.log(myArray.filter(value => value % 2 == 0));


// 传统方式  this 指向问题
function getStock(name: string) {
    this.name = name;
    setInterval(function () { 
        console.log("name is:"+ this.name)
    },1000)
}

var stock = new getStock("IMB");

// 箭头方式  this 指向问题
function getStock2(name: string) {
    this.name = name;
    setInterval(() => { 
        console.log("name is:"+ this.name)
    },1000)
}

var stock = new getStock2("IMB");

• 循环 forEach() , for in , for of

// forEach
var myArray = [1, 2, 3, 4];
myArray.desc = "four number";
myArray.forEach(value => console.log(value))
// 输出值 1，2，3，4


// for in
var myArray = [1, 2, 3, 4];
myArray.desc = "four number";

for (var n in myArray) {
    console.log(myArray[n])
}
// 输出值 1，2，3，4，four number


// for  of
var myArray = [1, 2, 3, 4];
myArray.desc = "four number";

for (var n of myArray) {
    console.log(n)
}
// 输出值 1,2,3,4

TypeScript 特征

• 类

class Person {
    name;
    eat() { 
        console.log("im eating")
    }
}

var p1 = new Person();

p1.name = "zhangsna"
p1.eat();