TypeScript Start: 什么是 TypeScript

原文连接

前言

TypeSrcit Start 系列文章：

• TypeScript Start: 什么是 TypeScript
• TypeScript Start: 基础类型

---

最近开始用 TypeScript 来写项目，写起来仍是挺顺畅的。其实学习 TypeScript，看它的官方文档就够了，剩下就是 coding 了。这里主要是我在 TypeScript 学习过程当中记录的一些东西~

什么是 TypeScript

TypeScript 也被称做 AnyScript，由于你在 coding 的时候会给每一个变量设一个 any 的类型。

咳咳，开玩笑开玩笑，可别真的让每一个变量都是 any，会被疯狂吐槽的。

TypeScript 是微软开发一款开源的编程语言，它是 JavaScript 的一个超集，本质上是为 JavaScript 增长了静态类型声明。任何的 JavaScript 代码均可以在其中使用，不会有任何问题。TypeScript 最终也会被编译成 JavaScript，使其在浏览器、Node 中等环境中使用。

Typescript 和 JavaScript 在类型上的区别

JavaScript 被称做是一种动态脚本语言，其中有一个被疯狂诟病的特性：缺少静态强类型。咱们看一下下面的代码：

function init() {
    var a = 'axuebin';
    console.log('a: ', a); // a: axuebin
    a = 1;
    console.log('a: ', a); // a: 1
}
复制代码

当咱们执行 init 函数的时候，会先声明一个 a 变量，而后给 a 变量赋了一个 axuebin，这时候咱们知道 a 是一个字符串。而后这时候咱们但愿 a 变成 1，就直接 a = 1 了。固然，这是能够的，此时 a 变量的类型已经发生改变：字符串 => 数字。这在不少人看来是难以接受的事情，明明初始化 a 的时候是一个字符串类型，以后 a 的类型竟然变成数字类型了，这太糟糕了。

若是在 Java 中，会是这样：

class HelloWorld {
    public static void main(String[] args) {
        String a = "axuebin";
        System.out.printf("a: %s", a);
        a = 1;
        System.out.printf("a: %d", a);
    }
}

// HelloWorld.java:4: error: incompatible types: int cannot be converted to String
复制代码

在 Java 中根本就没办法让 a = 1，会直接致使报错，在编译阶段就断绝你的一切念想。年轻人，别想太多，好好写代码。

这时候就会想，若是 JavaScript 也有类型该有多好啊，是吧。

看看 TypeScript 中是怎么样的：

function init() {
    var a: string = 'axuebin';
    console.log('a: ', a); 
    a = 1;
    console.log('a: ', a);
}

// Type '1' is not assignable to type 'string'.
复制代码

咱们把变量 a 设为 string 类型，后面给 a 赋值 1 的时候就报错了，一样是在编译阶段就过不了。

为何选择 TypeScript

咱们来想一想在平常的业务开发中是否有遇到如下的状况：

• 协同开发时，你须要调用一个其余人写的函数，可是那个函数里变量命名和管理特别混乱，而且没有写任何的注释，为了搞清楚函数的参数类型以及用法，你只能硬着头皮读函数的具体代码。
• 你忽然看到项目里本身半年前甚至一年前的一个函数，这写的什么鬼啊，简直无法看，强迫症的你想着重构。而后你就大刀阔斧的改造了一把，甚至对入参都进行了改造，嗯，终于满意了。忽然发现不对啊，还得搜了一下哪里调用了这个函数，得保证调用成功啊。
• ...

是否是超级超级超级不爽。归根结底这仍是由于 JavaScript 是一门动态弱类型脚本语言。

你想一想，若是每一个变量都被约定了类型，而且构建了变量声明和变量调用之间的联系，只要有一处地方发生了改变，其它地方都会被通知到，这该有多美好。

JavaScript 淡化了类型的概念，可是做为一名开发者，咱们必需要牢记类型概念，养成良好的编程习惯。

TypeScript 的优势

TypeScript 相比于 JavaScript 具备如下优点：

• 更好的可维护性和可读性
• 引入了静态类型声明，不须要太多的注释和文档，大部分的函数看类型定义就知道如何使用了
• 在编译阶段就能发现大部分由于变量类型致使的错误
• ...

TypeScript 是否是能难

有的童鞋可能会以为，JavaScript 都还没学清楚，又得学一门新的编程语言，还没接触 TypeScript 就已经无形中有了抵触心理。对于这些童鞋，须要知道的是 TypeScript 是 JavaScript 的超集，与现存的 JavaScript 代码有很是高的兼容性。

若是一个集合S2中的每个元素都在集合S1中，且集合S1中可能包含S2中没有的元素，则集合S1就是S2的一个超集。

也就是说，TypeScript 包含了 JavaScript 的 all，即便是仅仅将 .js 改为 .ts，不修改任何的代码均可以运行。

因此说，彻底能够先上手再学习，渐进式地搞定 TypeScript，不用担忧门槛高的问题。

若是还有顾虑，能够在 www.typescriptlang.org/play/ 上先体验一下 TypeScript 带来的快感。

TypeScript 的困难

固然，上手 TypeScript 也会有一些困难，会让刚开始学习 TypeScript 的童鞋感受太复杂了，不熟悉的状况下极可能会增长开发成本：

• 类型定义：对于每个变量都须要定义它的类型，特别是对于一个对象而言，可能须要定义多层类型（这也是为何会出现 AnyScript 的缘由。。。）
• 引用三方类库：第三方库若是不是 TypeScript 写的，没有提供声明文件，就须要去为第三方库编写声明文件
• 新概念：TypeScript 中引入的类型(Types)、类(Classes)、泛型(Generics)、接口(Interfaces)以及枚举(Enums)，这些概念若是以前没有接触过强类型语言的话，就须要增长一些学习成本

不过，不要被吓退了！

重要的事情要说三遍。

不要被吓退了！！

不要被吓退了！！!

这些只是短时间的，当克服这些困难后，就会如鱼得水，一切看上去都是那么的天然。

安装 TypeScript

首先你须要有 Node 和 npm，这个不用多说了。

在控制台运行一下命令：

npm install typescript -g
复制代码

这条命令会在全局安装 typescript，而且安装 tsc 命令，运行如下命令能够查看当前版本（确认安装成功）：

tsc -v
// Version 3.2.2
复制代码

而后咱们就新建一个名为 index.ts 的文件，而后敲入简单点的代码：

// index.ts
const msg: string = 'Hello TypeScript';
复制代码

代码编写好就能够执行编译，能够运行 tsc 命令，让 ts 文件变成可在浏览器中运行的 js 文件：

tsc index.ts
复制代码

若是你的代码不合法，执行 tsc 的时候就会报错，根据错误进行对应的修改便可。

Hello TypeScript

咱们看一个稍微完整点的例子吧。

这是一个 ts 文件，声明了一个 sayHello 函数：

• 函数有一个入参：string 类型的 name
• 函数有一个返回值：string 类型的 Hello ${name}

// index.ts
function sayHello(name: string): string {
    return `Hello ${name}`;
}

const me: string = 'axuebin';
console.log(sayHello(me))
复制代码

咱们执行 tsc index.ts 编译一下，在同级文件夹下生成了一个新的文件 index.js：

function sayHello(name) {
    return "Hello " + name;
}
var me = 'axuebin';
console.log(sayHello(me));
复制代码

咱们发现咱们写的 TypeScript 代码在编译后都消失了。由于 TypeScript 只会进行静态检查，若是代码有问题，在编译阶段就会报错。

咱们修改一下 index.ts ，模拟一下出错的状况：

function sayHello(name: string): string {
    return `Hello ${name}`;
}

const count: number = 1000;
console.log(sayHello(count))
复制代码

咱们向 sayHello 传递一个 number 类型的参数，试试 tsc 一下：

index.ts:6:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
复制代码

命令行就会报上面的错误，意思是不能给一个 string 类型的参数传递一个 number 类型。

可是，这里要注意的是，即便报错了，tsc 仍是会将编译进行到底，仍是会生成一个 index.js 文件：

function sayHello(name) {
    return "Hello " + name;
}
var count = 1000;
console.log(sayHello(count));
复制代码

看上去也就是没啥毛病的 js 代码。

若是编译失败就不生成 js 文件，以后能够在配置中关闭这个功能。

写在最后

若是没有意外的话，应该会继续写一些 TypeScript 的文章，欢迎你们持续关注~

博客地址：github.com/axuebin/art…