半小时入门TypeScript核心知识点

TypeScript是什么

JavaScript是前端开发的核心语言，但是这门语言天生就存在很多的问题，比如变量提升，不支持类型认证，难以理解的面向对象。

针对这些问题，就出现了TypeScript，它专门针对JavaScript这门脚本语言的不足做出很多的改进，同时新增了一些高级的特性，所以说，TypeScript是JavaScript的超集！

TypeScript如何用

TypeScript作为一门语言，它还不能直接运行在浏览器中，需要对TypeScript进行解析，解析成我们的ES5的语法，才能被浏览器识别并且运行起来。

第一步：安装typescript

npm install -g typescript

第二步：执行ts文件（假如现在就有greeter.ts）

tsc greeter.ts

类型验证

类型验证是目前TypeScript最大的特点。

1、现在定义一个变量，我们可以规定这个变量的类型。

let a: number;
//a现在只能被赋值为一个数字
a = 1；//正确
a = '123'; //错误，因为已经申明了必须是number类型

2、现在定义一个函数，这个函数的返回值可以规定返回值的类型。

//规定了这个函数的返回值类型是number
function fun1(a，b): number{
    return a + b;
}

3、现在也可以对一个函数的参数，进行定义参数的类型

function fun1(a: number, b: number): number{
    return a + b;
}

4、如果一个函数没有返回值，可以定义它的返回值类型为void。

function getName(name): void{
    console.log(name)
}

新的基础类型

之前的基础类型是Number、String、Boolean、Array、Null、Undefined等等

现在新增了Any、Tuple（元组）、enum（枚举）、Void

1、Any
如果你不确定你的变量的类型、或者函数参数、返回值的时候，你就可以把它申明为any类型；

function test(name): any{
    console.log(name)
}

2、Tuple元组
数组一般表示一组相同类型的一个集合。

而元组一般可以表示不同类型的元素的一个集合。

//定义类一个元组，第一项为number类型，第二项为string类型
let x:[number, string];
x = [1, 'maobar_front'];

3、enum枚举
枚举是使用对象的方式表示一组数字。这个数字默认是从0开始。（也可以自定义）

enum Color { Red, Green, Blue };
console.log(Color.red);//0

4、Void
和Any类型相反，表示没有任何类型。

interface

接口的概念，是之前的JavaScript不具备的，它代表了一个类，必须对某些属性或者方法进行实现。

//定义了一个接口
interface Me{
    name: string;
    age: number;
}
//使用类对接口进行实现
class MapbarFront implements Me {
    name: string = 'mapbar_front';
    age: number = 25;
    getName(): void{ 
        console.log(this.name);
    }
}

一般而言，接口可以规定哪些属性是必须实现的，哪些是可选的，其中可选的标记为“?”，例如：

interface Test{
    name: string;
    age?: number;//表示一个类中可以不用实现age属性
}

泛型

泛型是TypeScript的又一大特性

如果传入的数据的类型是string，我返回的结果也是string。如果传入的数据类型是number，那么我返回的结果也是number。其中，any类型不能代替泛型，因为使用any类型，传入的可能是string，返回的可能就是其他的类型数据。

一个标准的泛型定义的语法是：

function identity<T>(arg:T): T{
    return arg
}

如果是用到特殊的属性，比如.length，就要确保你的参数是个数组，如下所示：

function identity1<T>(arg:T[]):T[]{
    console.log(arg.length);
    return arg;
}
console.log(identity1([1,2,3]));

函数类型申明

一个完整的函数类型的申明如下：说明函数的参数，函数的返回值等信息。

let add: (x: number, y: number) => number = function (x: number, y: number) {
    return x + y;
}

//推断类型：
let add = function (x: number, y: number): number {
    return x + y;
}

let add1: (x:number,y:number) => number = function (x,y) {
    return x+y
}
//可选参数问题：（下面的add函数y是可选的）
function add(x:number,y?:number): number{
    if(y){
        return x+y;
    }else {
        return x;
    }
}

包含ES6的部分

TypeScript也在积极拥抱ES6的变化，它的发展也在根据JavaScript的语法的演变而进化。

ES6知识模块的概念。import和export。

ES6支持箭头函数。() => {};

ES6支持解构赋值。使用对象或者数组来申明变量。