typeScript基础知识

遵循ES6语法，JavaScript的超集

一、字符串新特性

    1.多行字符串 ``
    2.字符串模板 `${变量}` `${function()}`

    3.自动拆分字符串

            

二、参数新特性

    1.参数类型

        (1)类型检查

:any  可以使用任何类型
:number
:string
:boolean
function test(name:string) :void {}

(2)自定义类型

class Person {
    name: string;
    age :number;
}
var zhangsan : Person = new Person();

    2.参数默认值

(1)变量默认值

var myname:sring = 'wds'

(2)参数默认值（放在函数参数最后)

      function （a:string，b:string,c:string="jojo"){
      }

    3.可选参数（放在函数参数最后）

function fun(a:string,b?,c:string="jojo"){
	console.log(`a: ${a}`);
	console.log(`b: ${b}`);
	console.log(`c: ${c}`);
}
fun(...[1])

三、函数新特性符

    1.Rest and Sread 操作符

用法一、用...args声明，普通参数调用

function fun(...args){
    args.foreach(function (arg){
        console.log(arg)
    })
}
fun(10, 11, 12, 13)

用法二、用普通方法声明，用...arg调用

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

var arg1 =[1,2];
fun(...arg1);
var arg2 = [4,5,6,7,8,9];
fun(...arg2);

                            实际就是       ...[]    

2.generator函数

function* dosomething() {
    console.log('start');
    yield;
    console.log('end');
}
var func1 = dosomething();
func1.next()
func1.next()

    3.析构表达式

对象析构表达式

function getStock(){
    return {
        code :'IBM',
        price:{
            price1:100,
            price2:200
        }
    }
}
var {code:codex, price:{price1}}=getStock();
console.log(code) //报错
console.log(codex) //IBM
console.log(price1) //100

function getStock(){
return {
    code :'IBM',
    price:100
    }
}
var {code:codex, price}=getStock();
console.log(code) //报错
console.log(codex) //IBM
console.log(price) //100

数组析构表达式

   

参数是析构表达式

   

四、箭头表达式（相比function最大优点this作用域被改变）

单行的话不用写‘{}’和‘return’；多行是要写的{}’和‘return’

var sum = (arg1,arg2) => arg1+arg2

无参数直接用()

var sum = ()=>{}

一个参数可以省略()

var sum = arg =>{}

五、for of 循环

var arr = [1,2,3,4];
arr.desc = 'four number';
// forEach 忽略属性值
arr.forEach(value => console.log(value));
// 数组下标，属性名字 for...in 遍历的是key 
for(var n in arr){
    console.log(n)  // 0 1 2 3 desc
}
// 只用于数组；忽略属性 for...of 遍历的是value
for(var value of arr){
    console.log(value) // 1 2 3 4
}

六、typeScript类

    1.类的定义

class Person {
    // public name;
    name;  // 等同于上面
    eat(){
        console.log('eating')
    }
}

var p1 = new Person();
var p2 = new Person();

    2.类的访问控制符

访问控制符有三个
public 类内 类外
private 类内
protected 类内 子类

    3.类的构造函数（函数被实例化的时候调用，且只调用一次）

class Person {
    public name;
    constructor (name：string) {
	console.log("实例化时调用，且只调用一次")
	this.name = name
    }
    // constructor(public name:string){
	// 必须明确声明访问控制符
	// 运行原理：先声明name属性，在进行赋值 
	// 等价于上方写法
    // }
}

var p1 = new Person('zhangsan');

    4.类的继承extends关键字 （是的关系）

class Employee extends Person {  // 雇员是人；是的关系
    constructor(name:string,code:string){
	super(name);  // 调用父类的构造函数
	this.code = code;
    }
    public code:string;
    work (){
	super.eat() // 调用父类的方法和属性
    }
}

var e1 = new Employee ('name','code')
e1.name;
e1.eat();
e1.code;
e1.work();

雇员是人

    5.super关键字

class Employee extends Person {
	constructor(name:string,code:string){
		super(name);  // 调用父类的构造函数
		this.code = code;
	}
	code:string;
	work (){
		super.eat() // 调用父类的方法和属性
	}
}

var e1 = new Employee ('name','code')

七、泛型

// 泛型用于规定数组只能放特定类型数据，不能放其他类型数据
var workers: Array<Person>
workers[0] = new Person('name');
workers[1] = new Employee('name','code');
workers[2] = 1 // 错误

八、接口

    1.interface关键字 声明接口

interface IPerson {
    name: string;
    age : number
}

class Person {
    constructor (public config: IPerson) {

    }
}

var p1 = new Person({
    name: 'zhangsan',
    age :18,
    xxx :3  //错误
})

    2.implements关键字  (实现某个接口)

interface IAnimal {
    eat ();
}

// 类实现某个接口
// 不实现eat方法就会报错
class Sheep implements IAnimal {
    eat () {
	console.log("eat")
    }
}

九、模块

export
import

十、注解

    1.annotation （注解）

注解为程序的元素（类、方法、变量）加上更直观的说明，这些说明信息与程序的业务逻辑无关，而是供制定的工具或框架使用。

十一、类型定义文件 （*.d.ts）

    1.类型定义文件用来帮助开发者在TypeScrpt中使用已有的JavaScript的工具包；如：Jquery

    2.npm install -g typings

使用typings来安装类型定义文件