TypeScript 入门

最新推荐文章于 2024-12-03 12:16:18 发布

bey6

最新推荐文章于 2024-12-03 12:16:18 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： TypeScript

本文链接：https://blog.youkuaiyun.com/beikepang/article/details/83281308

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

本文探讨了TypeScript相较于JavaScript的优势，特别是在大型项目和团队协作中的作用。介绍了TypeScript的安装、基本语法示例，以及如何编译和运行TypeScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

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。