TypeScript学习和使用

1.什么是TypeScript?

• TypeScript是由微软发明，TypeScript具有类型系统，且是JavaScript的超集。 它可以编译成普通的JavaScript代码,识别使用普通的JavaScript语法。 TypeScript支持任意浏览器，任意环境，任意系统并且是开源的。 TypeScript目前还在积极的开发完善之中，不断地会有新的特性加入进来。

2. 下载使用TypeScript

• 使用TypeScript需要使用命令行工具npm下载TypeScript，

npm install typescript -g

• 在引入js文件的同级目录中创建一个.ts的文件，和html页面引入的js文件同名，但不用创建js文件，js的代码都写在ts文件里，在命令行窗口通过命令tsc将.ts文件转换为.js文件,转换完成之后目录中会出现一个.js文件。

注意，如果要使用es6的语法，下载babel

tsc index.ts

3.数据类型

TypeScript的数据类型和JavaScript（已有的数据类型）的数据类型保持相同，TypeScript新增了元祖Tuple，枚举，任意值，空值，never，类型断言。 object，null，undefined，number，string，array这些数据类型相同。

• 元祖Tuple，元组类型允许表示一个已知元素数量和类型的数组，各元素的类型可以不相同，在后期的操作数组元素的时候，必须按照指定数据类型的方法操作，否则会报错。
  image.png

let arr:[string,number,object];//定义数组元素类型
arr=['string',10,{name:"222"}]
console.log(arr)//['string',10.{name:"222"}]

• 枚举enum类型是对JavaScript标准数据类型的一个补充。将数值赋予一个名称，通过这个名称得到数值（类似于对象的键值），通过数值得到名称（类似于对象的键名），默认情况下是从0开始编号，可以指定数值。按照对象理解就好了！其实就是将值和名称互为对象里的键值。

enum  color {red=1,green=2,blue=9}
let first=color.red
console.log(first.blue)//9
console.log(color)//如下图

image.png

• 任意值any在编程阶段还不清楚类型的变量指定一个类型，在编译时可选择地包含或移除类型检查，定义any和其他数据类型有很大的区别，定义数据类型为any之后，变量再次赋值不同数据类型，变量的数据类型也会改变（这在JavaScript里面是很正常的，但是在TypeScript必须设置any），定义为其他数据类型的变量，再次赋值为不同数据类型，会报错。
  image.png

let num:any=4;
let count:number=5;//number
count=true;
console.log(typeof num)//number
console.log(typeof count)//报错
num=true
console.log(typeof num)//boolean

• 空值void和any类型相反，它表示没有任何类型，当函数没有返回值的时候，通常会见到其返回值类型是void，声明一个void类型的变量没有什么大用，因为你只能为它赋予undefined和null。

function get():void{
    console.log(111)
}
get()
let param:void=undefined;
console.log(param)

• never类型表示的是那些永不存在的值的类型，never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是never类型，当它们被永不为真的类型保护所约束时。

function error(message: string): never {
    throw new Error(message);
}

• 类型断言其实就是数据类型转换，传统的JavaScript存在隐式转换，自动转换数据类型，但是在TypeScript需要特殊的的语法转换，否则会报错。

let someValue: string = "this is a string";
let strLength: number = (<string>someValue).length;
console.log(strLength)//16

3.变量声明

TypeScript的变量声明和JavaScript的变量声明都是通过关键字var，let，const来声明，这些关键字声明有一定的区别。

• let声明的变量存在块级作用域，这点和const一样，但是let不存在预解析（变量的声明提前），而var是存在的，且var声明的只有全局作用域（作用域指变量的使用范围）和局部作用域，可以声明但不赋值，而const不可以，const只能声明常量（常量值不变，一直是固定的），且声明必须赋值。
• TypeScript可以指定变量的数据类型。

let num:number=10;
console.log(num)//10 number类型

4.接口

接口的作用就是为代码定义一些规则，代码在执行的时候，必须按照这些规则来，使用interface关键字定义接口。

• 接口示例。

interface label {name:string};//定义一个label接口，它表示一个必须有一个属性名为`name`，属性值数据类型为`string`的对象。
function set(nameval:label){//nameval是参数名可以任意写，表示参数使用label接口
    console.log(nameval.name)
}
let obj={name:"ddddd",age:10}//传入指定的参数，否则会报错
set(obj)

• 接口的可选属性
  接口里面定义的属性，有时候不一定是必须使用的，所以可以使用?来定义一个可选属性。

注意传入的参数可以不传定义的属性，但必须保持参数数据类型相同。

interface label {
    name?:string,
    age?:number
};
function set(nameval:label){
    console.log(nameval)
    let age=nameval.age;
    return age
}
let obj={name:"ddddd"}
set(obj)

• 接口的只读属性，通过readonly设置属性只读，不能被设置,但是测试发现，虽然设置readonly之后，再给对象属性赋值，虽然控制台会报错，但是打印的结果赋值成功了的。
  报错信息
  image.png
  打印信息
  image.png

interface point{
    readonly a:number,
    readonly b:string
}
let obj:point={a:10,b:"eeee"}
console.log(obj)
obj.a=100;
console.log(obj)