TypeScript的环境搭建

一. 什么是TypeScript

TypeScript是Javascript的超集，遵循最新的ECMAScript规范。Typescript扩展了Javascript语法，而不是取代。

• Typescript增强了JavaScript语法，让JS更加严谨，让JS更加适合大型应用
• TS提供的类型系统，可以帮助我们在开发时提供准确的代码提示
• 在开发时会对代码进行类型检查，从而避免很多潜在错误
• TS是不能直接运行的，需要编译后才能运行

二. 环境配置

2.1 编译ts文件

全局安装typescript队ts文件进行编译

npm install typescript -g
tsc --init 	# 生成tsconfig.json
tsc 		# 可以将ts文件编译成js文件
tsc --watch # 监控ts文件变化生成js文件

2.2 配置rollup环境

安装依赖

npm install rollup typescript rollup-plugin-typescript2 @rollup/plugin-node-resolve rollup-plugin-serve -D

初始化TS配置文件

npx tsc --init

rollup 配置

// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import {nodeResolve} from '@rollup/plugin-node-resolve';
import serve from 'rollup-plugin-serve';
import path from 'path'
export default {
    input:'src/index.ts',
    output:{
        format:'iife',
        file:path.resolve('dist/bundle.js'), 
        sourcemap:true
    },
    plugins:[
        nodeResolve({
            extensions:['.js','.ts']
        }),
        ts({
            tsconfig:path.resolve(__dirname,'tsconfig.json')
        }),
        serve({
            open:true,
            openPage:'/public/index.html',
            port:3000,
            contentBase:''
        })
    ]
}

package.json配置

"scripts": {
      "dev": "rollup -c -w"
}

这样就可以通过npm run dev启动服务进行编译了

2.3 解析TS的方式

• ts插件
• babel解析
• rollup一般情况下会采用rollup-plugin-typescript2
• webpack一般采用ts-loader/babel-plugin-typescript