typescript

TypeScript是JavaScript的一个超集，支持 ECMAScript 6 标准，是由微软开发的自由和开源的编程语言，设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上

为什么需要typescript

能在开发过程中就发现一些潜在问题
为编辑器(如VSCode)提供更友好的代码提示
代码更清晰(当你熟悉使用typescript后)

体会typescript

新建文件夹，创建 a.ts 和 b.ts 两个文件

a.ts中代码如下

type Color = 'red' | 'blue'
type Big = 33 | 44 | 55
/**
 * @param a 二选一: red,blue
 * @param b 三选一: 33,99,66
 * @param c 任意字符串
 */
export const getData = (a: Color, b: Big, c: string): string => {
  return a + b + c
}

type Color = 'red' | 'blue'
type Big = 33 | 44 | 55
/**
 * @param a 二选一: red,blue
 * @param b 三选一: 33,99,66
 * @param c 任意字符串
 */
export const getData = (a: Color, b: Big, c: string): string => {
  return a + b + c
}

b.ts中,输入import g，这时vscode就自动提示了getData函数的路径

并且当敲写getData函数时，会提供参数类型提示与类型校验

这样就最简单的体会到 typescript 开发的强大之处了

敲写getData函数时，会出现中文提示，这由doc注释语法提供的，其搭配typescript效果非常的好
想要使用doc注释语法，只要在vscode中代码上方输入/**就会弹出相应代码补全提示

安装

# 全局安装
npm i -g typescript
# 查看ts版本命令,显示版本号说明安装成功
tsc -v

# 全局安装
npm i -g typescript
# 查看ts版本命令,显示版本号说明安装成功
tsc -v

编译运行

新建一个文件夹TypeScript，新建一个文件app.ts，其中代码如下：

console.log('Hello,world')

console.log('Hello,world')

TypeScript代码一般是不能直接运行的，需要把代码进行编译成JavaScript代码以后才能运行，使用如下命令来进行编译

# 编译app.ts文件，会在app.ts同级目录生成一个app.js文件
tsc app.ts
# 生成一个app.d.ts扩展名的文件
tsc app.ts --declaration

# 编译app.ts文件，会在app.ts同级目录生成一个app.js文件
tsc app.ts
# 生成一个app.d.ts扩展名的文件
tsc app.ts --declaration

目录结构

|-- TypeScript
|   |-- app.js
|   |-- app.ts
|   |-- app.d.ts

|-- TypeScript
|   |-- app.js
|   |-- app.ts
|   |-- app.d.ts

tsc 常用编译参数如下表所示：

--help  显示帮助信息
--module 载入扩展模块
--target 设置ECMA版本
--declaration 生成.d.ts文件
--removeComments 删除文件的注释
--out 编译多个文件并合并到一个输出的文件

--help  显示帮助信息
--module 载入扩展模块
--target 设置ECMA版本
--declaration 生成.d.ts文件
--removeComments 删除文件的注释
--out 编译多个文件并合并到一个输出的文件

运行app.js

node app.js
# 输出
Hello,world

node app.js
# 输出
Hello,world

简化运行

如果要运行一个.ts文件，首先需要使用tsc命令去编译它为js文件，随后再使用node命令去执行它

那么有没有一种工具能够一步完成以上事情呢？可以全局安装ts-node工具

# 安装ts-node
npm i ts-node -g
# 安装完毕，查看版本号，出现版本号说明安装成功
ts-node -v
# 直接运行ts文件
ts-node demo.ts
# 输出
Hello,world

# 安装ts-node
npm i ts-node -g
# 安装完毕，查看版本号，出现版本号说明安装成功
ts-node -v
# 直接运行ts文件
ts-node demo.ts
# 输出
Hello,world

使用webpack

使用打包工具来搭建开发ts的环境

配置webpack

下载webpack

npm i -D webpack webpack-cli

npm i -D webpack webpack-cli

下载webpack插件

npm i -D html-webpack-plugin clean-webpack-plugin webpack-dev-server

npm i -D html-webpack-plugin clean-webpack-plugin webpack-dev-server

下载ts-loader

npm i -D ts-loader

npm i -D ts-loader

新建src文件夹，在其下新建index.ts,代码如下

console.log('Hello,world')

console.log('Hello,world')

新建webpack.config.js

const path = require("path")

// 用于打包完生成一个html文件，并自动引入入口js
const HTMLWebpackPlugin = require("html-webpack-plugin")

// 因为webpack默认打包后是替换原来的同名文件，如果dist中存在一些之前生成的文件，而之后不会再生成的文件，这些文件理论上会一直存在，这种情况下需要去手动确认和删除，显然是很繁琐的，CleanWebpackPlugin插件的作用就是打包前清空dist文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new CleanWebpackPlugin(), new HTMLWebpackPlugin()],
  resolve: {
    extensions: [".ts", ".js"]
  }
}

const path = require("path")

// 用于打包完生成一个html文件，并自动引入入口js
const HTMLWebpackPlugin = require("html-webpack-plugin")

// 因为webpack默认打包后是替换原来的同名文件，如果dist中存在一些之前生成的文件，而之后不会再生成的文件，这些文件理论上会一直存在，这种情况下需要去手动确认和删除，显然是很繁琐的，CleanWebpackPlugin插件的作用就是打包前清空dist文件
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new CleanWebpackPlugin(), new HTMLWebpackPlugin()],
  resolve: {
    extensions: [".ts", ".js"]
  }
}

设置package.json

json

 "scripts": {
    "build": "webpack",
    "dev": "webpack serve --open "
  }

 "scripts": {
    "build": "webpack",
    "dev": "webpack serve --open "
  }

设置tsconfig.json

json

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "sourceMap":false
  },
  "exclude": [
    "node_modules"
  ]
}

{
  "compilerOptions": {
    "module": "ESNext",
    "target": "ESNext",
    "sourceMap":false
  },
  "exclude": [
    "node_modules"
  ]
}

运行

yarn dev

yarn dev

webpack会读取webpack.config.js中配置，之后webpack启动一个热更新的服务器，通过监听入口的ts文件以及他所有的引用ts文件的代码变化，这样就实现了一个更高效的开发环境

typescript #

为什么需要typescript #

体会typescript #

安装 #

编译运行 #

简化运行 #

使用webpack #

配置webpack #

设置tsconfig.json #

运行 #