TypeScript | 构建大型应用的利器

目录

1. TypeScript 是什么?
2. 为何需要使用 TypeScript?
3. TypeScript 的优/缺点
4. TypeScript 开发环境搭建

TypeScript 是什么?

TypeScript 是一门编程语言, TS 是在 JS 的基础上进行扩展所以称之为 JS 超集, 最终 TS 会通过 TS 编译器 转换为 原生 JavaScript, 最终都要编译为 JS 那么为何还要写 TS 呢?

其实 JS 有一个很大的缺点就是 运行时才可以发现错误而TS在编译是我们即可发现错误增加我们的开发效率, 但是同样 TS 也给开发者带来一定的负担, 所以 TS 应用于中大型项目.

对比 Java/C++ 这两套类型系统 TS 显然表现的更加 灵活, 因为 TS 类型系统是具有 判断,循环,JS语法 所以我们可以认为 TS 是一门图灵完备()的语言

为何要使用 TypeScript 呢?

我们运用要往项目添加一门新技术往往要考虑的问题是 时间成本/维护成本/技术成熟度/生态, 显然使用 TS 时间成本需要大幅度升高, 但是项目后期维护成本会降低, 近年来已经非常多大型开源项目拥抱 TS 所以 技术成熟度与生态是毋庸置疑的

TypeScript 优/缺点

优点:

1. 类型约束/类型提示
2. 编译期间发现错误

let arr: number[] = []; //

// more code...

arr.push('123'); // 在变写时 编译器就会指出错误(同样若是不修改该代码是无法通过编译的)

缺点:

1. 开发周期变长(因为类型的处理与复杂类型问题会给开发者带来工作量, 小型项目使用并不适合也不划算)

TypeScript 开发环境搭建(单文件, 集成开发环境)

单文件搭建

1. 全局 安装 typescript

npm install typescript -g
yarn global add typescript
pnpm install typescript -g

2. 创建文件并编写简单 ts

tsc --init # 生成 tsconfig.json
touch index.ts

let a: string = 'abc';

console.log(a);

tsc --watch # 监听并编译文件变化

集成开发环境

集成开发环境我们该如何选择呢? 我们搭建集成开发环境主要从以下几点来分辨

1. 项目大小
2. 项目类型(项目纯 JS 还是非纯 JS, 一个 库即可使用 rollup)
   比如在一个 Vue/React 中最佳选择是 Rollup, 若是一个非库项目推荐使用 Webpack/Vite, 因为本例只有 TS/JS 代码所以我们选择 Rollup 作为打包工具
3. 初始化项目(npm/yarn/pnpm 自行选择即可)

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

2. 修改项目模块 并 添加执行指令

{
	// ...
	"type": "module", // 设置 模块类型为 Module
	"scripts": {
		// 会去 node_modules/.bin 下执行命令
		"dev": "rollup -c -w"
	}
	// ...
}

3. 编写 rollup 配置文件

import { dirname, format, resolve } from 'path';
import { fileURLToPath } from 'url';

// TS 汇总插件
import typescript from 'rollup-plugin-typescript2';
// 开启一个HTTP 服务
import serve from 'rollup-plugin-serve';
// 允许Rollup 解析 NodeJS 模块(我们这边使用主要解析 node_modules 中的模块)
import { pluginNodeResolve } from '@rollup/plugin-node-resolve';

// fileURLToPath 将 file 协议转换为 绝对路径
// 构建 __filename, __dirname
const __filename = fileURLToPath(import.meta.url);

const __dirname = dirname(__filename);

export default {
  input: resolve(__dirname, 'src/index.ts'),
  output: {
	// 编译为 IIFE 形式
    format: 'iife',
    file: resolve(__dirname, 'dist/build.js'),
    sourcemap: true // 开启源码调试
  },
  plugins: [
    pluginNodeResolve({
	  // 自动解析 .js/ts 文件
      extensions: ['.js', '.ts']
    }),
    typescript({
      tsconfig: resolve(__dirname, 'tsconfig.json')
    }),
    serve({
      openPage: resolve(__dirname, '/public/index.html'),
      port: 3000,
    })
  ]

}

4. 设置 tsconfig

// tsconfig.json
{
	// ...
	"module": "ESNext", // 使用的模块系统
	"sourcemap": true // 开启 debug 模式, 这样即可在 浏览器中 debug
	// ...
}

总结

1. TS 是 JS 的超集, 通过 TS Compiler 即可转换为 JS
2. 近年来所有大型开源项目都拥抱 TS 所以 技术成熟度以及生态是毋庸置疑的
3. TS 是一门图灵完备的语言
4. TS 优点 编译时即可发现错误/类型推到,缺点 开发时间增加
5. 编写项目一般是使用集成环境进行 Compiler and Running

推荐观看(后续会进行填坑)

1. NodeJS 模块化

Reference

1. rollup
2. rollup-plugin-typescript2
3. plugin-node-resolve

节日

在这里我衷心祝福祖国生日快乐! 祝大家国庆假期开心, 谢谢大家!