TypeScript 快速上手学习系列 ——基础知识

＊且听风吟

已于 2023-04-06 11:08:44 修改

阅读量874

点赞数

分类专栏： # Typescript 文章标签： javascript 前端 typescript

于 2022-03-28 18:15:00 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/123260871

版权

Typescript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

特性

JavaScript 与 TypeScript 的区别：

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，主要提供了类型系统和对ES6的支持；
现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
TypeScript 解决了JavaScript 的“痛点”：弱类型和没有命名空间；这导致程序很难模块化，不适合开发大型程序。

动态类型 VS 静态类型

类型系统按照 类型检查的时机 来分类，可以分为 动态类型 和 静态类型。

动态类型：是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。

JavaScript 是一门解释型语言，没有编译阶段，所以 JavaScript 是动态类型。

静态类型：是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。

TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型。

TypeScript 安装

可以通过以下两种方式来安装 TypeScript：

通过 Node.js 包管理器 (npm)
安装 Visual Studio 的 TypeScript 插件

通过npm 安装

首先，创建一个工程文件夹：

mkdir typescript-demo

新建 src目录：

mkdir src

进入工程文件夹，安装 TypeScript npm 包：

npm install -g typescript

安装完成：
在这里插入图片描述

安装完成后就可以使用 TypeScript 编译器，名称叫 tsc，可将编译结果生成 js 文件。

编译命令

编译 TypeScript 文件命令：

tsc filename.ts

一旦编译成功，就会在相同目录下生成一个同名 js 文件，当然，也可以通过命令参数来修改默认的输出名称。

同时编译多个 ts 文件：

tsc file1.ts file2.ts file3.ts

一旦编译成功，就会在相同目录下生成多个同名 js 文件，当然，也可以通过命令参数来修改默认的输出名称。

默认情况下编译器以ECMAScript 3（ES3）为目标，但ES5也是受支持的一个选项。TypeScript增加了为 ECMAScript 6标准所建议的特性的支持。

构建一个 `TypeScript` Web 应用

首先，创建一个 index.html 文件：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>typescript demo</title>
</head>
<body>
 	<script src="hello.js"></script>
</body>
</html>

创建一个 hello.ts文件（.ts 是 TypeScript 文件的后缀）：

alert('This is a TypeScript demo!')

接下来，打开命令行，使用 tsc 命令编译 hello.ts 文件：

$ tsc hello.ts

在相同目录下就会生成一个 hello.js 文件，此时项目结构：

  typescript-demo
  |- /src
    |- hello.js
    |- hello.ts

然后,打开 index.html：
在这里插入图片描述

语法特性

类 Classes
接口 Interfaces
模块 Modules
类型注解 Type annotations
编译时类型检查 Compile time type checking
Arrow 函数 (类似 C# 的 Lambda 表达式)

TypeScript 快速上手学习系列 ——基础知识

特性

动态类型 VS 静态类型

TypeScript 安装

通过npm 安装

编译命令

构建一个 TypeScript Web 应用

语法特性

相关书籍

“相关推荐”对你有帮助么？

构建一个 `TypeScript` Web 应用