TypeScript 介绍、安装、编译

谁借莪１个温暖的怀抱￠ 2023-03-03 08:47 176阅读 0赞

# Typescript #

## 1.Typescript介绍 ##

> 1.  TypeScript 是由微软开发的一款开源的编程语言。  
>     2、TypeScript 是Javascript 的超集，遵循最新的ES6、Es5 规范。TypeScript 扩展了JavaScript  
>     的语法。  
>     3、TypeScript 更像后端java、C\#这样的面向对象语言，可以让js开发大型企业项目。  
>     4、谷歌也在大力支持Typescript的推广，谷歌的angular2.x+就 是基于Typescript语法。  
>     5、最新的Vue、React 也可以集成TypeScript.  
>     6、Nodejs 框架Nestjs、midway 中用的就是TypeScript语法。

![image.png][]

## 2.Typescript安装 ##

### 1.如果电脑上没有安装cnpm，先安装cnpm(必须先安装node.js) ###

> 由于我们在国内，所以不建议使用npm，推荐使用cnpm

npm install -g cnpm --egistry-https://registry.npm.taobao.org

#### 打开终端，复制进去 ####

![image.png][image.png 1]

### 2.使用cnpm安装Typescript ###

cnpm install -g typescript

### 3.检查是否安装成功 ###

tsc -v

若输出版本信息即安装成功

## 3.Typescript编译 ##

### 1.新建ts文件 ###

#### 1.建一个项目目录，用vscode打开并新建index.ts文件，内容随便输入例如 ####

console. log("你好ts")
    //ts 编译成es5
     var str:string="你好ts"

#### 2.ts浏览器解析不了，需要编译成js才能生效，终端输入tsc index.ts ####

> 可能会出现报错tsc : 无法加载文件 C:\\Users\\22285\\AppData\\Roaming\\npm\\tsc.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about\_Execution\_Policies。  
> 所在位置 行:1 字符: 1

*  tsc index.ts

#### 3.解决报错 ####

1.以管理员身份运行powerShell(一定要以管路员身份打开):  
![image.png][image.png 2]

2.命令行:

set-ExecutionPolicy RemoteSigned

![image.png][image.png 3]

重新执行tsc index.ts 成功解决报错 index.js生成成功

#### 4.解决手动编译，配置开发工具Vscode 自动编译 ####

##### 1.创建tsconfig.json文件tsc -init生成配置文件 #####

![image.png][image.png 4]

##### 2.修改配置里的outDir，改变js输出的目录 #####

![image.png][image.png 5]

##### 3.vscode菜单栏找到Terminal 然后按流程点击 #####

Terminal

runTask

typescript

tsc: watch - tsconfig.json

##### 4.修改ts代码保存，然后查看js目录下对应的js，js会自动发生改变 #####

[image.png]: /images/20230208/0796193d901d47008c8061a53790718b.png
[image.png 1]: /images/20230208/8cc91f1d17254de2bbbc7e1b856e6868.png
[image.png 2]: /images/20230208/a59c3a6723c74cf290156b96bf2957fe.png
[image.png 3]: /images/20230208/8b682b6c42564022bb136aec00f99e0a.png
[image.png 4]: /images/20230208/fef5aa63e8794aa3951a7e1b9ed1b51e.png
[image.png 5]: /images/20230208/93a7de89991d43248550037ae731aecb.png