什么是TypeScript?

TypeScript(以下简称TS)是由微软开发的一种编辑语言,它是JavaScript(以下简称JS)的超级,也就是说,TS在JS的基础上加了一些新的高级的特性来完善JS的一些不足。其实从TS的名字可以看出:TypeScript,它主要是给JS加上了type,把JS变成了一种强类型语言,这对于从一些强类型语言来说是非常熟悉的,但是对于只学过JS的同仁来说,其实还有有一些不习惯的,但习惯了之后,就会发现再也回不去了,因为coding时的严谨是为了后期少出错。
需要注意的是:浏览器是不能直接运行TS的,也就是说,我们可以在coding时使用TS里的新特性,但不能直接拿到产品当中使用,最终还是需要把TS转成JS才能在各个平台运行的。不过不用担心,这个转换的工作由工具来完成即可。

为什么使用TS?

先看一下下面这段JS:

function add(num1,num2){
    return num1 + num2;
}

console.log(add('2','3'));

上面的add函数的意图很明显,就是想把两个数字加起来,而我们在调用的时候传入了像数字一样的字符串'2''3'进去了,出来的结果-23并不是我们想要的,JS里,如果将两个字符串相加,会直接把它们拼起来,并不会做类型的转换,很多时候我们写JS都会碰到这样的问题,这就是弱类型语言的不严谨带来的问题。
这个时候你可能会说了:这么简单的问题,写JS的时候强制转换成数字不就行了?就像这样:

function add(num1,num2){
    return +num1 + +num2;
}

console.log(add('2','3'));

嗯,是可以转换一下,效果也达到了。但是当项目足够庞大,代码量足够多的时候,这种「转换」无疑也是很让人蛋疼的。上面的例子中,我们平时在编写、运行的时候是完全看不到报错的,因为它并不是技术上的错误,而是逻辑上的错误,这种悄无声息的错,至少我个人是非常讨厌的。
而我们在写TS的时候就不会出现这个问题,因为TS的编译器会直接把错误抛出来了,不改正别想往下写!!!

安装和使用TS

安装,这是必须的。我们可以通过npm来安装(先安装node,npm自然就有了):

npm install -g typescript

在命令行直接运行上面命令后,如果安装成功会显示TS的版本号(我安装的版本是3.8.3):

+ typescript@3.8.3
added 1 package from 1 contributor in 1.367s

装好之后,为了方便编写,我们安装一个VS Code,因为TS和VS Code同是微软产品,所以很多东西用起来都是无缝对接的,然后新建一个test.ts文件:

function add(num1:number, num2:number) {
    return num1 + num2;
}

console.log(add('2', '3'));

我们在函数的每个形参后面加了:number,这就是为了说明,add这个函数接收的两个参数必须是数字number类型的。由于我们之前安装了TS,所以这个时候我们在命令行输入tsc test.ts,运行这条命令,然后会得到如下错误:

很明显的提示了,「'2'不是一个数字」,有了这个错误,我们的TS代码就需要做相应的更改,把在调用函数时的参数转换成数字。

function add(num1:number, num2:number) {
    return num1 + num2;
}

console.log(add(+'2', +'3'));

此时再次使用tsc test.ts进行编译,并没有返回任何错误。这样,我们的这个代码绝对不传出现由于数据类型而导致的错误了,同时,在运行tsc命令后,TS编译器会直接把.ts文件转成一个同名的.js文件。
你可能也注意到了,TS是在我们开发的时候就把错误抛出来了,而不是像JS一样在代码运行的时候才有可能通过人工来发现问题。

基本类型-Core Types

number,string,boolean

首先,我们来看一下TS里的其中三种核心的数据类型:numberstringboolean

  1. number:例如55.0-30-45.5这些在TS里面通通都属于number类型
  2. string:只要是出现在引号内部的,我们都认为它是字符串类型
  3. boolean:真-true、假-false

下面,我们给上面的 add方法加一些参数来丰富一下它的功能:

function add(num1: number, num2: number, printResult: boolean, customResultString: string) {
    const result = num1 + num2;
    if (printResult) {
        console.log(customResultString + result);
    }
    return result;
}

add(5, 6.7, true, '结果为:');

上面我们在函数的形参那里限制了数据类型,那么我们在定义变量的时候可以限制类型吗?例如:

let number1 = 5;

这个number1直接赋值成了5,其实这种情况是不需要给它指定类型的,因为我们是在定义这个变量的时候就明确给它赋了一个值,那么它就是一个number类型的,那么什么时候需要指定类型呢?那就是在定义一个变量,但先不需要给它赋值的时候:


//先定义 let number1:number; //再赋值,因为很多时候,这个赋值可能是在经过一些逻辑之后的操作。 number1 = 5;

object-对象

现在我们再来看一下object类型,所有在JS中的对象在TS里也是同样的属于对象类型,例如:

const person = {
    name: 'Daniel',
    age: 18
};

上面的代码是在JS当中新建一个普通的对象,这个时候,我们把它挪到TS文件中,并且我们尝试在person对象中找一个不存在的key:person.nickname,会得到啥?

其实上面的错误不用等我们执行tsc命令就可以老早抛出来了,当我们使用VS Code的时候会直接看到这个错误提示:

根据报错我们可以看出来,当我们直接给person赋值的时候,它默认就加上了如下类型:

const person: {
    name: string,
    age: number
} = {
    name: 'Daniel',
    age: 18
};

array-数组

object类型一样,所有JS中的数组在TS中都属于数组类型,例如在JS中新建一个数组:

let  hobbies = ['篮球','书法','画画'];

上面这段代码到了TS里面,就会自动给hobbies加上了一个’string[]’类型:

let hobbies: string[] = ['篮球', '书法', '画画'];

可以看到,这个类型有点特殊,string[]数组数组元素的值都描述了,即hobbies是一个array,每个数组项是一个string
那么有人会问了:如果我的数组项不全是string该怎么办呢?
就像这样:

let arr = [1,'苹果','橘子'];

这个东西到TS里该怎么定义?其实在TS中有一个叫做any的关键字(关于any,我们后面会再提到):

let arr: any[];
arr = [1,'苹果','橘子'];

等等,这样写有啥好处?这不是又乱了吗?数组里随便放了各种类型的数据…… 嗯,所以TS还给我们提供了一种新的类型-Tuple(元组)。

Tuple-元组

tuple是之前JS没有的类型,其实就是描述一个固定长度的数组,注意!不仅如此,同时这个定长数组里的元素数据类型也被固定了:

let arr: [number, number, string] = [1, 2, '苹果'];

元组类型的写法就是直接写在方括号里面: [number, number, string],看起来就是一个数组,只不过里面放的是数组里元素的数据类型,与数组元素一一对应。

Enum-枚举

枚举也是JS之前没有的,之前都是通过新建一个变量或者常量来实现:

const MAN = 1;
const FEMALE = 2;

而在TS当中,我们则可以通过 enum来定义:

enum GENDER {
    MAN,
    FEMALE
}

注意,我们这样定义,默认它里面的值可能并不是我们想要的MAN=1,FEMALE=2,所以我们也可以直接直行赋值:

enum GENDER {
    MAN = 1,
    FEMALE = 2
}

如果我们好奇TS将其转成JS后是怎么实现的,那么可以直接看它生成的.js文件:

var GENDER;

(function (GENDER) {
    GENDER[GENDER["MAN"] = 1] = "MAN";
    GENDER[GENDER["FEMALE"] = 2] = "FEMALE";
})(GENDER || (GENDER = {}));

可以看到,其实它是通过把枚举值放到了一个对象里面进行实现的。

any

any类型前面提到过,其实使用这个类型后,TS的编译器就不会进行任何的数据类型检查,换句话说,如果所有的变量都使用了这个类型,其实跟我们平时写JS没啥太大的区别了:

let test: any;
test = 1;
test = 'foo';
test = {
    name: 'Daniel'
}

以上就是TS中基本数据类型,后面我们还会有更深入的介绍。

————-未完待续————-