typescript学习笔记（一）

一.认识typescript

typescript是由微软开发的一套编程语言，将其称作是javascript的超集，看过一些ts代码的人可能很明显的能意识到它与js的区别，比如ts添加了静态类型检查，interface接口类型定义和面向对象的一些特性，先看个demo吧。

当然提前需要配置运行环境

npm install -g typescript

通过npm全局安装

创建一个文件后缀为ts的文件

//demo.ts
function howOld(year: number) {
    return "I am " + year;
}

let peopleYear: number = 23;
console.log(howOld(peopleYear));//I am 23

输入命令

tsc demo.ts

可以发现在当前文件的同级目录下生成了一个名为demo.js的文件，打开文件看看

function howOld(year) {
    return "I am " + year;
}
var peopleYear = 23;
console.log(howOld(peopleYear));

这段代码我们就很熟悉了，其实最终编译完成后我们引用的也是后缀为js的文件，而不是ts文件。那么对于ts和js有什么优缺点呢？对于ts来说它使用静态类型检测或者是通过interface设置类型接口，能帮助我们避免了一些由于类型不明确而造成的错误，尤其是在开发较大项目时，开发人员多的同时，对于数据类型造成的错误数量也会大大增加。但是性能上并没有相对js提升太多，而大家更依赖js往往是因为它的灵活性。

二.数据类型

对于typescript来说保留了javascript中我们所能用到的基本数据类型，同样是将javascript和typescript进行比较。

• Boolean

//typescript写法
let data: boolean = true;
//javascript写法
let data = true;

• Number

typescript同javascript一样所有的数字都是浮点数，同样支持二进制，八进制，十进制及十六进制。

//typescript写法
let data1: number = 0b1010; 
let data2: number = 0o12;    
let data3: number = 10;    
let data4: number = 0xa;    
//javascript写法
var data1 = 10;
var data2 = 10;
var data3 = 10;
var data4 = 0xa;

• String

javascript规定字符串用” “或者’ ‘引入，当然typescript也保留了这一点，在这基础上ts也支持使用（`）引入文字。

//typescript写法
let str1: string = 'typescript';
let str2: string = `Hello ${ str1 }.`;
//javascript写法
var str1 = 'typescript';
var str2 = "Hello " + str1 + ".";

• 数组

//typescript写法
let arr1: number[] = [1,2,3];
let arr2: Array<number> = [1,2,3];
//javascript写法
var arr1 = [1, 2, 3];
var arr2 = [1, 2, 3];

其中<>中写的是数组元素的类型。

• 元组

元组类型用来表示已知元素数量和类型的数组，元素的数据及类型需要一一对应，否则会报错。

//typescript写法
 let data: [string,number];
 data = ['lilu',23];
 //javascript写法
 var data;
 data = ['lilu', 23];

• 枚举

//typescript写法
enum Color {Red, Green, Blue}
let c: Color = Color.Green;
//javascript写法
var Color;
(function (Color) {
    Color[Color["Red"] = 0] = "Red";
    Color[Color["Green"] = 1] = "Green";
    Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var c = Color.Green;

枚举的默认开始序号是0，当然也可以手动赋值。

• 任意类型

any，当不清楚变量的类型时使用

//typescript写法
let data: any = 1;
data = 'haha';
data = true;
//javascript写法
var data = 1;
data = 'haha';
data = true;

any使变量类型变得灵活起来，就和js中的变量声明一样，因为any在编译的过程中绕过了类型检查。当然ts也允许当不确定数组元素类型的时候这样用：

//typescript写法
let arr: any[] = [1,true,'haha'];
//javascript写法
var arr = [1, true, 'haha'];

• 空类型

void，表示空类型，一般用来作为函数的返回类型，比如：

//typescript写法
function sayHello(name: string):void{
    console.log(`hello!${ name }`);
}
sayHello('lilu');
//javascript写法
function sayHello(name) {
    console.log("hello!" + name);
}
sayHello('lilu');

当然也可以用void来给变量赋值，但是变量必须是null或者undefined。

//typescript写法
let data: void = null;
data = undefined;
//javascript写法
var data = null;
data = undefined;

• never

never表示永远不存在值的变量。

//typescript写法
let a: never;
let b: string;
let c: never;
a = 'hello';
b = a;
a = c;

说明never类型可以赋值给任意类型的变量，但是never类型的变量只能被never类型赋值。

以上是一些基本数据类型的语法说明，但是在开发中我们往往遇到的数据类型是嵌套的，比如这样：

let data = [
    {
        name: 'Tom',
        age: 10
    },{
        name: 'Mike',
        age: 15
    }
];

在这种情况下如果只用基本类型是不够的，所以需要引用interface来处理。

接口

先创建一个对象的数据类型

interface obj{
    name: string,
    age: number
}

接着创建一个数组类型。

interface Obj{
    name: string,
    age: number
}
let arr: Array<Obj> = [
    {
        name: 'Tom',
        age: 10
    },
    {
        name: 'Mike',
        age: 15
    }
];

当然接口类型也允许继承，比如我在后续工作中需要添加一些数据类型，如下：

interface Obj1{
    name: string,
    age: number
}
interface Obj2 extends Obj1{
    hobby: string
}
let arr: Array<Obj2> = [
    {
        name: 'Tom',
        age: 10,
        hobby: 'reading'
    },
    {
        name: 'Mike',
        age: 15,
        hobby: 'coding'
    }
]