js 文件里面如何可以写 ts 代码？
发布时间：
2024-08-12 03:11
阅读量：
27
前言
TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。
1、TS文件需要编译成JS文件
- 新建
ts-study项目， - 安装ts插件
首先我们的浏览器是不认识TS文件的，所以需要把TS编译成JS文件才可以，TS官网提供了一种方式，就是去全局安装typescript这个模块，命令如下：
npm init -y
npm install -g typescript
- 新建
01_demo.ts
let test=123;
console.log(test,'test')
- 新建
index.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文件
tsc 01_demo.ts
2、ts文件自动编译js文件
在tsc命令进行转换操作的时候，是不能实时进行转换的，那么可以通过添加一个-w的参数来完成实时转换的操作
tsc 01_demo.ts -w
3、ts文件使用模块化变成局部环境
在编译后，我们会发现TS文件中定义的变量会产生错误的波浪线，这主要是因为TS默认是全局环境下的，所以跟其他文件中的同名变量冲突了，所以需要使用模块化操作来使其变成局部环境
let test=123;
console.log(test,'test')
export {}
4、tsconfig.json文件
- 生成
tsconfig.json文件
tsc --init
"outDir": "./"换成"outDir": "./dist",自动将其打包到dist目录下"include": ["01_demo.ts"]只转化01_dmeo.ts文件，
默认是`"include": "*"·将其所有ts文件转化
- 默认将所有ts文件转化命令
ts
"module": "commonjs"
转化cjs模块风格,还可以选择ES6，
- "target": "es2016"
可以指定模块版本,如ES5
END