TypeScript 环境配置

╰+哭是因爲堅強的太久メ 2023-10-06 21:52 48阅读 0赞

#### 阅读目录 ####

*  介绍
 *  安装环境
 *  编辑器
 *   *  关闭JS的检验
 *  编译 TS
 *  常见问题

## 介绍 ##

typescript 是 javascript 的一个超集，typescript 可以运行于任何系统，并且是开源免费的。

TypeScript 有以下几个特点：

1、typescript 会在编译时对代码进行严格的静态类型检查，可以在编码阶段就发现问题，而不是在上线运行时才发现。

2、typeScript语法遵循ES规范，更细速度快，不断支持最新的ECMAScript新特性，如装饰器、public/private 修饰符。

3、typescript 支持 OOP（面向对象）的接口，抽象类，多态特性

4、typescript可以为 IDE 提供更好的代码补全、接口提示、跳转到定义

5、还有重要一点是众多科技公司已经采用 typeScript 进行开发，也是前端工程师需要掌握的就业技能。

## 安装环境 ##

下面来安装学习 typescript 时的开发环境

node  
首先需要安装 node.js (opens new window)我相信做前端的都已经安装了。

全局安装TS  
然后执行以下命令安装 typescript

npm install -g typescript

如果是 linux 系统可以通过相应的软件管理命令安装，比如以下是 manjaro 的安装示例

sudo pacman -Sy typescript

安装后执行以下命令检查是否安装成功

tsc -v
    //如果显示以下内容即表示安装成功
    // Version 4.5.5

## 编辑器 ##

`.ts`是 typescript 的扩展名，在首次使用 vscode 编写.ts 文件时，vscode 会自动下载支持 typescript 的插件环境。

![在这里插入图片描述][6de4cf72a8084a36a991568f8459307e.png]

### 关闭JS的检验 ###

默认在编写普通.js 文件时，vscode 也会进行类型校验，这有时不需要。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 编译 TS ##

我们使用 tsc 命令可以将 ts 文件编译为 js 文件，如果在编译过程中有 ts 错误将在命令行报出。

tsc wg.ts //会编译生成 hd.js 文件

第次修改 ts 文件后再执行命令编译会过于繁琐，可以执行以下命令自动监听 ts 文件内容并自动生成 js 文件。

tsc hd.ts -w

## 常见问题 ##

如果在windows 系统中执行 tsc 命令报以下错误

... 因为在此系统上禁止运行脚本 ...

需要以管理员身份执行 powerShell，然后执行以下命令，在出现的提示选择 Y

set-ExecutionPolicy RemoteSigned

[6de4cf72a8084a36a991568f8459307e.png]: https://img-blog.csdnimg.cn/6de4cf72a8084a36a991568f8459307e.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/256725f6c42c45d48361fe05a81d24ed.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16

发表评论取消回复

表情：

评论列表（有 0 条评论，48人围观）

还没有评论，来说两句吧...

相关阅读

相关 TypeScript环境配置详解

一、TypeScript概述 1.1 TypeScript的概念 `TypeScript`是拥有类型的`JavaScript`超集，它可以编译成普通、干净、完整的`

约定不等于承诺〃/ 2024年04月01日 08:49/ 0 赞/ 65 阅读

相关如何安装 TypeScript，并配置开发环境以便开始使用

TypeScript 是一种由微软开发的静态类型编程语言，它可以作为 JavaScript 的超集使用，并且可以在编译时进行类型检查。TypeScript 提供了更强大的工具和

悠悠/ 2023年10月13日 21:06/ 0 赞/ 6 阅读

相关 TypeScript 环境配置

阅读目录介绍安装环境编辑器关闭JS的检验编译 TS 常见问题介绍 typescript 是 javascri

╰+哭是因爲堅強的太久メ/ 2023年10月06日 21:52/ 0 赞/ 49 阅读

相关 typescript基本环境配置及编辑器代码构建配置

安装node构建node环境及npm包管理器 [http://nodejs.cn/download/][http_nodejs.cn_download] 通过n

心已赠人/ 2023年06月27日 12:53/ 0 赞/ 2 阅读

相关 React基础-配置React与TypeScript工作环境

React基础知识点总结 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

比眉伴天荒/ 2022年11月14日 10:27/ 0 赞/ 186 阅读

相关 React + Typescript + Webpack 开发环境配置

对于复杂或多人开发的 `React` 项目来说，管理和使用每个组件的 `props` 、 `state` 或许会成为一件让人头痛的事情，而为每一个组件写文档，成本也会比较大，对

╰半夏微凉°/ 2022年07月14日 09:21/ 0 赞/ 245 阅读

相关三、TypeScript的环境安装

搭建TypeScript开发环境所谓搭建TypeScript开发环境，就是安装TypeScript的compiler. 那么什么是compiler?为什么需要c

傷城~/ 2022年05月15日 00:30/ 0 赞/ 236 阅读

相关 TypeScript配置文件说明

在使用VsCode编写TypeScript时，VsCode提供了一个tsconfig.json辅助我们设置TypeScript的配置项来确定如何生成最终的js文件。那tsc

浅浅的花香味﹌/ 2021年11月22日 17:00/ 0 赞/ 641 阅读

相关 TypeScript 入门学习（一）：TypeScript 环境准备

TypeScript 入门学习 TypeScript 介绍 TypeScript 是由微软开发的一款开源的编程语言。 TypeScript 是 Java

忘是亡心i/ 2021年09月29日 23:28/ 0 赞/ 460 阅读

相关 typescript 安装环境、启动编译

1、安装 cnpm install -g typescript tsc --init 生成tsconfig.json文件 tsc

逃离我推掉我的手/ 2021年07月24日 21:04/ 0 赞/ 496 阅读