【TS】TypeScript 安装、编译、运行

原创已于 2023-08-25 20:19:41 修改 · 1k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

TypeScript基础知识

于 2023-08-19 19:40:07 首次发布

本文介绍了TypeScript，它是JavaScript的超集，强调了其类型系统在开发中的优势。提供了三种方法：法一和法二分别介绍两行和一行命令编译运行，法三演示了实时监听并输出js文件。适合初学者学习TypeScript的基础用法。

文章目录

TypeScript介绍

TypeScript（简称：TS）是 JavaScript 的超集。

JS 开发过程中，需要等到代码真正去执行的时候才能发现错误。这其中绝大部分错误都是类型错误（Uncaught TypeError）。

TS 开发过程中，可以在编写代码的同时就发现代码中的错误，减少找 Bug 、改 Bug 的时间，提高开发效率；其强大的类型系统也提升了代码的可维护性，使得重构代码更加容易。

TypeScript 已成为大中型前端项目的首选编程语言。Vue 3 、Angular 、React 均支持 TS。

TypeScript安装、编译、运行

法一：输入两行命令编译、运行ts文件

npm i typescript -g   // 全局安装ts

tsc demo.ts   // 生成对应的demo.js文件

node demo.js   // 运行demo.js文件

法二：输入一行命令编译、运行ts文件

npm i typescript -g   // 全局安装ts

npm i ts-node -g   // 安装ts-node包提供ts-node命令

ts-node demo.ts   // ts-node命令在内部将ts转为js文件，再运行js文件

法三：实时监听ts文件，输出js文件

npm i typescript -g   // 全局安装ts

在项目文件夹下运行命令 tsc --init 生成 tsconfig.json 配置文件

tsc --init   // 生成tsconfig.json配置文件

// 创建输入(src)输出(dist)文件夹
// 在tsconfig.json文件中配置
{
    "compilerOptions": {
        "outDir": "./dist", //输出的文件位置
    },
    "include": ["./src"] //引入文件的位置
}

在命令行输入 tsc -p tsconfig.json -watch ，实现监听。

tsc -p tsconfig.json -watch   // 实时监听ts文件,输出js文件

配置完成后，创建 html 文件并引入 demo.js，即可使用。

TypeScript 教程——阮一峰·著

TypeScript 中文网

TypeScript 官网

标签

#javascript #typescript #前端