TypeScript 基础

1.什么是 TypeScript：

（1）TypeScript 是一种由微软开发的开源的编程语言，它是 JavaScript 的一个超集，拓展了 JavaScript 的语法；

（2）现有的 JavaScript 代码可与 typescript 一起工作无需任何修改；

（3）typescript 可处理已有的 JavaScript 代码，并只对其中的 typescript 代码进行编译；

（4）typescript 通过类型注解提供编译时的静态类型检查；

（5）typescript 是语法糖，浏览器不认识，只能编译成 js；

2.TypeScript 的安装使用；

（1）使用 npm 下载 typescript；

npm install typescript -g               //建议安装在全局

（2）在自己的项目文件夹中创建一个 .ts 的文件；

（3）通过命令将这个 ts 文件编译为 js 文件，会出现一个同名的 js 文件；

tsc "文件名"                 //将ts文件转为js文件

（4）写自己的 html 文件，将编译好的 js 导入；

3.Typescript 的基本数据类型：

（1）布尔类型（Boolean）：

var flag : Boolean;                        //布尔类型
console.log(flag = true);                  //true

4.类型批注：

（1）typescript 通过类型批注提供静态类型以在编译时启动类型检查；

（2）基本类型的批注是：number，bool，string；

（3）弱或动态类型的结构是 any 类型；

function area(uname : string,width : number,height : number){             //类型批注
    var num = width * height;
    return 'my name is ' + uname  + ';' + 'my age is ' + num
}

document.body.innerHTML = area('jack',11,2)               //输出my name is jack;my age is 22
 //如果有类型不匹配的参数，在编译成js时就会报错

4.接口（interface）：

（1）接口可以作为类型批注；

（2）接口中的属性加上问号，输出但没有赋予值时，最后得到 undefined；如果不加，不输出或者没有赋予值时，就会报错；

interface Shape{
    name : string,
    width : number,
    height : number,
    color? : string,             //加上问号以后，可以不用输出，也可以不用赋值（输出但没有赋值会得到undefined）
}

function fun(shape : Shape){
    var num = shape.width * shape.height;
    return 'I am ' + shape.name  + ';' + 'my age is ' + num + ';' + 'color is ' + shape.color;          //输出
}

console.log( fun( {name : 'jack',width : 11,height : 2} ) )            //没有给color赋值
//输出 I am jack;my age is 22;color is undefined

5.箭头函数表达式：

（1）相当于 js 中的函数，它的好处就是可以自动将函数中的 this 附加到上下文中；

（2）实例比较：

//原生 js
var exam = {
    name : 'jack',
    pop : function(){
        console.log('你好' + this.name)                  //输出this.name为'jack'

        setTimeout(function(){
            console.log('三秒钟会出现:' + this.name)          //输出this.name为一个空值
        },3000)
    }
}
exam.pop();

将原生 js 中的 function 换成箭头函数；

//typescript 中箭头函数
var exam = {
    name : 'jack',
    pop : function(){
        console.log('你好' + this.name)                  //输出this.name为'jack'

        setTimeout(() => {                             //注意是更换这个function
            console.log('三秒钟会出现:' + this.name)          //输出this.name为'jack'
        },3000)
    }
}
exam.pop();

6.类（class）：

（1）typescript 支持 ES6 中的类 class 对象；

（2）class 类中，有个构造器（coustructor），构造器中参数的作用域是局部作用域；