1.环境搭建与配置

[Zijue]

什么是 TypeScript

TypeScript 是 JavaScript 的超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发，代码开源在 github 上。

• TypeScript 更像后端 Java 语言，让 JS 可以开发大型企业应用
• TS 提供的类型系统可以帮助我们在写代码时提供丰富的语法提示
• 在编写代码时会对代码进行类型检查从而避免很多线上错误

环境配置

安装 TypeScript

全局安装 TypeScript 对 TS 进行编译

npm install -g typescript

安装完成后，我们就可以在任意位置执行 tsc 命令

tsc --init  # 生成 tsconfig.json
tsc helloworld.ts  # 将 .ts 文件编译成 js 文件

构建 TS 项目开发环境

在实际项目开发中，不可能每次都去调用 tsc 命令编译；故下面演示使用 rollup 配置项目开发环境

• 创建项目并初始化

mkdir ts_project
cd ts_project
code .  # 使用 vscode 打开当前项目文件夹
npm init -y  # 初始化项目

• 安装依赖

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';

// rollup 支持 ES6 语法
export default {
    input: 'src/index.ts',
    output: {
        format: 'iife', // 立即执行  IIFE自执行函数
        file: path.resolve(__dirname, 'dist/bundle.js'), // 出口文件
        sourcemap: true, // 根据源码产生映射文件
    },
    plugins: [
        nodeResolve({  // 第三方文件解析
            extensions: ['.js', '.ts']
        }),
        ts({
            tsconfig: path.resolve(__dirname, 'tsconfig.json')
        }),
        serve({
            openPage: '/public/index.html',
            contentBase: '',
            port: 8080
        })
    ]
}

• 配置 package.json

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

• 创建 src/index.ts 和 public/index.html 文件，在 index.html 文件中引入 /dist/bundle.js
• 通过命令 npm run dev 启动项目