5

图片描述

1. Why TypeScript?

首先我们来聊一下为什么要使用 TypeScript 这款语言

举个栗子

就拿 seaconch 自己来说吧, seaconch 的编程线路是从 dotnet 学习而来,可以说是从 VS 从 2010 ~ 2017 都有使用过,其实很多时候都有一种,哪里不会.哪里的感觉;就比如我将NewtonSoft包引入到了项目中,然后我就像看看我都能调用他的什么方法,我.一下就出来了

然而!

到了 JavaScrirpt 当中后,你前脚写的一个"结构",后脚就已经无法通过.来获取到他其中所包含的字段了;这真的让人很不适应

其实这也就是强类型语言与弱类型语言的一个区别了

这里我们不讨论他们各自的优缺点,萝卜青菜各有所爱

可不得不承认,当项目比较复杂的时候,这中问题往往是很恶心的

TypeScript 其实就是将 JavaScript 作为强类型静态语言来使用的语言

2. Install

我们使用通用性更强的 npm 安装方式

npm i -g typescript

tip: install 一般可以简写为 i

3. Demo

安装好了之后,我们来看这样一个栗子:

图片描述

这是一段 TypeScript 代码

并且 seaconch 写了很多的注释,(有时候 seaconch 喜欢写一些罗里吧嗦的注释,其实并不是为了给别人看,主要是怕自己以后看起来太费劲...很多时候代码写着写着复杂性就控制不住了...)

我们来看一下 TypeScript 可以干什么吧,这里先不将代码,只看效果:

3.1 "."

图片描述

可以看到我们定义在 Class 里的无论是属性 / 字段还是方法,都有被带出来,重点是没有那些看都看不懂的东西被带出来,也许只是我看不懂而已吧 = =...

3.2 签名

图片描述

3.3 静态类型检查

图片描述

可以说是很静态类型

4. 编译

始于JavaScript,归于JavaScript

虽然 TypeScript 文件的后缀名是 .ts ,但编译后太将生成 纯粹的 JavaScript 代码文件

运行 TypeScript 编译器进行编译:

tsc main.ts

编译后会生成 .js 文件

感兴趣的同学可以去打开查看一下

5. 运行

这里我们也使用 html 文件来查看效果

html 文件内容如下:

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

执行效果如图所示:

图片描述

6. 结语

TypeScript 看起来很不错,虽然各种 继承嵌套 也会让人感到很复杂,但在多人协作的场景下也不得不说强类型是有非常大的优势的。

文章很简单,涉及的东西也很少,不过希望可以在这简单的几眼帮助大家大致的了解一下什么是 TypeScript 以及为什么要用 TypeScript


youbei
318 声望70 粉丝