TypeScript环境搭建

前提是已经装好了node.js

1. 安装TS环境

  1. 进入到项目文件夹中,使用 npm init --yes 初始化(该命令在项目文件夹中生成 package.json)

  2. 安装 typescript (安装不成功,可能是权限不够)

    全局安装:cnpm i typescript -g 【建议】

    本地安装:cnpm i typescript -D

    【cnpm i typescript -D 是 cnpm install typescript --save-dev的缩写】

  3. 在项目文件夹中生成tsconfig.json文件

     tsc --init  
    
  4. 修改刚刚生成的 tsconfig.json 文件中的配置
    注意: 如果进行如下配置, dist 、src、tsconfig.json、package.json 四者须在同一个父目录下

    "outDir":  "./dist"     //ts编译后生成js文件保存到dist文件夹中
    	
    "rootDir": "./src",  //自己编写的ts源文件在src文件夹中
    
    "target": "es5", //编译出来的js文件兼容es5语法
    
    
  5. 在src目录下新建一个base.ts文件

    //创建一个字符串类型的变量str
    let str: string = 'hello word';
    console.log( str);
    
  6. 编译src目录以及子目录下的ts文件
    在src目录下:在终端中输入tsc ( 注意直接写tsc命令即可),会把src目录以及子目录下的ts文件全部编译成js文件,并全部输出到dist目录中

    #编译所有ts文件,将编译好的.js文件放在dist文件夹中
    tsc  
    #编译具体的文件 base.ts 如果这样编译,会将编译好的base.js放在base.ts同一个文件夹下
    tsc ./src/base.ts 
    
  7. 自动编译

    tsc --watch
    

2. 安装 ts-node

  1. ts-node让node能直接运行ts代码,无需使用tsc将ts代码编译成js代码。

    全局安装: cnpm i ts-node -g 【建议】

    本地安装: cnpm i ts-node -D

  2. 安装好 ts-node 之后,在ts文件所在的文件夹中使用ts-node,将直接在终端中运行ts文件

    ts-node base.ts
    

3. 安装nodemon

  1. nodemon作用:自动检测到目录中的文件更改时通过重新启动应用程序来调试,基于node.js的应用程序

    全局安装:cnpm install -g nodemon 【建议】

    本地安装: cnpm i nodemon -D

  2. 在package.json中配置自动检测,自动重启应用程序

     "scripts": {  //如果已经存在直接将下边的粘进去即可
    	 "start": "nodemon --watch src/ -e ts --exec ts-node ./src/base.ts"
    }
    

    nodemon --watch src/ 表示:检测目录是package.json同级目录src

    -e ts 表示:nodemon 命令准备将要监听的是ts后缀的文件

    --exec ts-node ./src/base.ts 表示:检测到src目录下有任何变化 都要重新执行base.ts文件

  3. 开始监听src目录
    start 是第2步配置时的命名,相对应即可

    npm start
    

4. Parcel打包支持浏览器运行TS文件

  1. 安装Parcel打包工具:npm install parcel-bundler

  2. 在package.json 所在的文件夹中新建一个 index.html 文件
    在html文件中引入你想要在浏览器中看到效果的ts文件

    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>Documenttitle>
    head>
    <body>
    	
    	<script src="./src/base.ts">script>
    body>
    html>
    
  3. 在package.json中给npm添加启动项,支持启动parcel工具包

{
  // 其他配置
  "scripts": {
    "startParcel": "parcel ./index.html"
  }
}
  1. 在启动parcel工具包
     npm  run startParcel 
    
    如果上边的报错则用
     cnpm  run startParcel 
    

5. tsconfig.js部分参数说明

{
	//当前src目录下的所有目录所有文件都将被编译
	//**表示目录,*表示文件
	"include":["./src/**/*"],
	//当前src目录下除了hello目录下的所有文件,将被编译
	"exclude":["./src/hello/**/*"],
	//files指定要编译的文件
	"files":["core.ts", "sys.ts"],
	//对编译的配置
	"compilerOptions":[
		//将ts文件编译为目标版本
		//ES3、ES5、ES6/ES2015、ES7/ES2016、ES2017、ES2018、ES2019、ES2020、ESNext
		"target": "ES3",
		//设置编译后代码使用的模块化系统
		//CommonJS、UMD、AMD、System、ES2020、ESNext、None
		"module": "commonjs",
		//指定要使用的库,一般使用默认的就行
		//DOM、WebWorker
		"lib": [],
		//指定编译后的js文件要放到哪个(dist)目录下
		"outDir": "./dist",
		//把所有ts编译到一个文件(./dist/app.js)中,如果module制定了None、System或AMD则会将模块一起合并到文件之中
		"outFile": "./dist/app.js",
	]
}

你可能感兴趣的:(#,TypeScript,typescript,javascript,前端)