TS运行环境搭建

2024-08-02 23:50:49 浏览数 (1)

前言

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

1、TS文件需要编译成JS文件

  • 新建ts-study项目，
  • 安装ts插件

首先我们的浏览器是不认识TS文件的，所以需要把TS编译成JS文件才可以，TS官网提供了一种方式，就是去全局安装typescript这个模块，命令如下：

代码语言：shell复制
npm init -y
npm install -g typescript
  • 新建01_demo.ts
代码语言：ts复制
let test=123;
console.log(test,'test')
  • 新建index.html
代码语言：html复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./01_demo.js"></script>
</head>
<body>
</body>
</html>
  • 编译ts文件命令

默认自动编译对应的js文件

代码语言：shell复制
tsc 01_demo.ts

2、ts文件自动编译js文件

在tsc命令进行转换操作的时候，是不能实时进行转换的，那么可以通过添加一个-w的参数来完成实时转换的操作

代码语言：shell复制
tsc 01_demo.ts -w

3、ts文件使用模块化变成局部环境

在编译后，我们会发现TS文件中定义的变量会产生错误的波浪线，这主要是因为TS默认是全局环境下的，所以跟其他文件中的同名变量冲突了，所以需要使用模块化操作来使其变成局部环境

代码语言：ts复制
let test=123;
console.log(test,'test')
export {}

4、tsconfig.json文件

  • 生成tsconfig.json文件
代码语言：shell复制
tsc --init

"outDir": "./"换成"outDir": "./dist",自动将其打包到dist目录下 "include": ["01_demo.ts"]只转化01_dmeo.ts文件，

默认是`"include": "*"·将其所有ts文件转化

  • 默认将所有ts文件转化命令
代码语言：shell复制
ts
  • "module": "commonjs"

转化cjs模块风格,还可以选择ES6，

  • "target": "es2016"

可以指定模块版本,如ES5

typescript 前端 腾讯技术创作特训营S8

0 人点赞