快速了解TypeScript基础

夏天又到了

于 2024-08-20 10:40:32 发布

阅读量578

点赞数 12

分类专栏： Web前端与Web全栈开发文章标签： typescript javascript 前端

本文链接：https://blog.csdn.net/brucexia/article/details/141351675

版权

Web前端与Web全栈开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

【图书介绍】《Node.js+MongoDB+Vue.js全栈开发实战》-CSDN博客

《Node.js+MongoDB+Vue.js全栈开发实战（Web前端技术丛书）》(邹琼俊)【摘要书评试读】- 京东图书 (jd.com)

本节主要介绍TypeScript的基础知识。

7.1.1 TypeScript简介

TypeScript（简称TS）是Microsoft公司注册的商标。2009年，微软C#之父Anders Hejlsberg领导开发了TypeScript的第一个版本。

TypeScript是JavaScript的一个超集，为这门动态类型语言添加了静态类型选项。它的设计目的是帮助开发者在编写大型应用程序时捕捉到更多的错误，并提供更好的工具支持。TypeScript遵循当前以及未来出现的ECMAScript规范。TypeScript不仅能兼容现有的JavaScript代码，也拥有兼容未来版本的JavaScript的能力。大多数TypeScript的新增特性都是基于未来的JavaScript提案，这意味着许多TypeScript代码在将来很有可能会变成ECMA的标准。

从技术上讲，TypeScript就是具有静态类型的JavaScript，它和JavaScript的关系如图7-1所示。

图7-1

如果读者对Java、C#等高级编程语言有一定的了解，就会发现TypeScript借鉴了这些高级语言的语法特性，它将基于对象的JavaScript改造成了面向对象的语言，这样也就让我们使用JavaScript开发大型项目成为可能，因为它弥补了弱类型语言的缺点。

在Vue项目中，可以直接用TypeScript来替代ES。在大型项目中，使用TypeScript非常有优势，它能帮我们做类型检查，避免因粗心而引起的一系列bug。在小型项目中，不使用TypeScript也能实现高效的开发体验，甚至开发起来更快，因为可以少写很多类型定义的代码。

如果读者对TypeScript还不是很了解，可以查阅TypeScript中文手册，地址是TypeScript 中文手册 - TypeScript 中文手册。

7.1.2 TypeScript的特点

TypeScript主要有以下几大特点：

始于JavaScript，归于JavaScript。TypeScript可以编译出纯净、简洁的JavaScript代码，并且可以运行在任何浏览器上、Node.js环境中和任何支持ECMAScript 3（或更高版本）的JavaScript引擎中。
强大的类型系统。类型系统允许JavaScript开发者在开发JavaScript应用程序时使用高效的开发工具和常用操作，比如静态检查和代码重构。
先进的JavaScript。TypeScript提供最新的且不断发展的JavaScript特性，包括那些来自2015年的ECMAScript（ES 6）和未来的提案中的特性，比如异步功能和Decorators，以帮助建立健壮的组件。

TypeScript在社区的流行度越来越高，它非常适用于一些大型项目，也非常适用于一些基础库，它能够极大地帮助我们提升开发效率和开发体验，并且能有效避免一些以前编码阶段难以发现的代码错误，例如经典的'undefined' is not a function。

TypeScript同JavaScript相比，其最大的特点是强类型，支持静态和动态类型。这种强类型相比弱类型，可以在编译期间发现并纠正错误，从而降低了试错的成本，提升了代码的规范性。

JavaScript动态类型的自由特性经常会导致错误，这些错误不仅会降低程序员的工作效率，而且还会由于新代码的成本增加而使开发陷入停顿。例如一些if内部的类型错误，JavaScript需要执行到对应代码才能发现，而TypeScript在写代码的过程中就能发现部分错误，因此TypeScript代码交付质量相对高一些，不过对于逻辑错误，TypeScript也是无法识别的。

由于JavaScript无法合并类型以及编译时缺乏错误检查，因此它不适合作为企业和大型代码库中服务器端代码。

7.1.3 安装TypeScript

在安装TypeScript之前，需要先安装Node.js。安装完Node.js之后，会自带一个npm包管理器，后面我们就可以通过npm来安装TypeScript以及其他的一些库了。另外，TypeScript是无法直接在浏览器中运行的，它需要使用TypeScript编译器（tsc）编译为JavaScript代码才能在浏览器中运行。

TypeScript的安装步骤如下：

（1）在CMD控制台中运行如下命令安装TypeScript：

npm install -g typescript

（2）安装完成后，在控制台运行如下命令检查是否安装成功：

tsc -v

运行结果如下：

C:\Users\zouqi>tsc -v

Version 4.1.3

由于TypeScript一直处于更新当中，因此读者看到的版本号可能会更高。

7.1.4 JavaScript中的变量和类型限制

JavaScript中的变量本身是没有类型的，变量可以接收任意不同类型的值，同时可以访问任意属性，如果属性不存在则返回undefined。

然而，JavaScript是有类型的，JavaScript的类型和值绑定，它在赋值的时候才确定是何种类型。通过typeof判断变量类型其实是判断当前值的类型。

TypeScript做的事情就是给变量加上类型限制：

限制在变量赋值的时候必须提供类型匹配的值。
限制变量只能访问所绑定的类型中存在的属性和方法。

ts-and-js.html示例代码如下：

 <script>
        var val = 33;
        console.log(typeof val) // "number"
        val = '葵花宝典'
        console.log(typeof val) // "string"
        val = { name: '东方不败' }
        val = function () {
            console.log('人生自古谁无种，留取丹心断命根')
        }
        console.log(val); //ƒ ()
        console.log(val.xx) // undefined
    </script>

7.1.5 编写TypeScript程序

（1）新建目录ts，然后在此目录下新建文件first.ts，输入如下代码：

//自调用函数
(() => {
        function greeter(msg:string) {
            return '你好，' + msg;
        }
        let msg = '中国';
        console.log(greeter(msg));
    })();

（2）新建一个HTML文件index.html，在Visual Studio Code中可以通过输入!然后按Enter键的方式自动生成HTML代码结构。在这个HTML文件中引入first.ts文件，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./ts/first.ts"></script>
</body>
</html>

（3）在浏览器中打开index.html，发现浏览器控制台报错，错误信息如下：

Uncaught SyntaxError: Unexpected token ':' 。

我们在first.ts中去掉TypeScript代码“:string”，再查看浏览器控制台，发现可以正常输出。如果直接引入的TS文件当中存在TypeScript语法代码，则会报错；如果只有单纯的JavaScript语法代码，则可以正常引入和使用。

7.1.6 手动编译代码

在7.1.5节的代码当中，虽然使用了.ts扩展名，但是去掉TypeScript代码“:string”后，这段代码仅是JavaScript代码。如果要使用TypeScript代码，则需要将它编译为JavaScript代码才可以在浏览器中访问。下面介绍如何手动编译代码。

（1）在命令行上运行TypeScript编译器命令：

tsc first.ts

执行过程如图7-2所示。

图7-2

执行完后，会在first.ts文件所在目录自动输出一个frist.js文件，它包含了与输入文件first.ts中相同（运行结果相同，代码会有细微变化）的JavsScript代码，如图7-3所示。

图7-3

对比图7-3左侧的TS文件和右侧编译后的JS文件，可得出如下结论：

在TS文件中，函数的形参如果使用了某个类型进行修饰，则最终在编译的JS文件中是没有这个类型的。
在TS文件中，如果变量使用let进行修饰，则在编译后的JS文件中修饰符会变为var。

（2）在命令行上通过Node.js运行如下代码：

node first.js

控制台输出：

你好，中国

（3）修改index.html中的JS文件引入：

浏览器控制台可以正常输出。

7.1.7 Visual Studio Code自动编译

除了手动编译以外，也可以使用Visual Studio Code自动编译。

（1）新建目录02，控制台跳转到这个目录，然后执行tsc --init，可在当前目录下生成配置文件tsconfig.json。

（2）修改tsconfig.json配置：

"outDir": "./js",

"strict": false,

outDir：表示将代码编译输出到指定的目录。
strict：表示是否开启严格模式。

（3）在Visual Studio Code中启动监视任务：终端（Terminal）→运行任务（Run Task...）→显示所有任务（Show All Tasks）→监视tsconfig.json（ts:watch tsconfig.json），如图7-4所示。

图7-4

（4）新建index.ts文件，代码如下：

(()=>{

document.body.innerHTML = "可可托海的牧羊人";

})();

此时，当我们保存index.ts文件的时候，会自动在当前目录下生成一个js目录，并将index.ts文件编译为index.js存放在js目录下，如图7-5所示。

图7-5

（5）新建index.html文件，只需直接引入js目录下编译后的index.js文件即可，代码如下：

<!DOCTYPE html>
<html lang="en">
<body>
    <script src="./js/index.js"></script>
</body>
</html>

夏天又到了

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
快速了解TypeScript基础

例如一些if内部的类型错误，JavaScript需要执行到对应代码才能发现，而TypeScript在写代码的过程中就能发现部分错误，因此TypeScript代码交付质量相对高一些，不过对于逻辑错误，TypeScript也是无法识别的。如果读者对Java、C#等高级编程语言有一定的了解，就会发现TypeScript借鉴了这些高级语言的语法特性，它将基于对象的JavaScript改造成了面向对象的语言，这样也就让我们使用JavaScript开发大型项目成为可能，因为它弥补了弱类型语言的缺点。
复制链接

扫一扫

专栏目录