学习TypeScript(一)

2021-05-21 18:25 206人阅读评论(0)

学习TypeScript（一）

1. 初识TypeScript
- 1.1 TypeScript特点
2. 安装TypeScript
3. 第一个TypeScript程序
- 3.1 手动编译代码
- 3.2 vscode 自动编译
3. 使用webpack打包TS

1. 初识TypeScript

TypeScript 是一种由微软开发的开源、跨平台的编程语言。它是 JavaScript 的超集，最终会被编译为 JavaScript 代码。Vue3中对TS提供了大量的支持，所以有必要学习一下。

1.1 TypeScript特点

始于 JavaScript，归于 JavaScript

TypeScript 可以编译出纯净、简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的 JavaScript 引擎中。
强大的类型系统

类型系统允许 JavaScript 开发者在开发 JavaScript 应用程序时使用高效的开发工具和常用操作比如静态检查和代码重构
先进的 JavaScript

TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件

2. 安装TypeScript

全局安装 TypeScript

npm install -g typescript

检查安装是否成功

tsc -V

3. 第一个TypeScript程序

创建hellowrld.ts文件，内容为

const hello: string = "Hello World!"
console.log(hello)

3.1 手动编译代码

tsc helloworld.ts

输出结果为一个 helloworld.js 文件，它包含了和输入文件中相同的 JavsScript 代码。
在命令行上，通过 Node.js 运行这段代码：

node helloworld.js

控制台输出：

Hello, Yee

3.2 vscode 自动编译

1). 生成配置文件tsconfig.json
    tsc --init
2). 修改tsconfig.json配置
    "outDir": "./js",
    "strict": false,
3). 启动监视任务:
    vscode终端 -> 运行任务 -> 监视tsconfig.json

3. 使用webpack打包TS

3.1 初始化npm

初始化npm,生成package.json文件

npm init

3.2 下载依赖

yarn add -D typescript
yarn add -D webpack webpack-cli
yarn add -D webpack-dev-server
yarn add -D html-webpack-plugin clean-webpack-plugin
yarn add -D ts-loader
yarn add -D cross-env

3.3 入口 JS: src/main.ts

// import './01_helloworld'
document.write('Hello Webpack TS!')

3.4 index 页面: public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>webpack & TS</title>
  </head>
  <body></body>
</html>

3.5 build/webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const isProd = process.env.NODE_ENV === 'production' // 是否生产环境

function resolve(dir) {
  return path.resolve(__dirname, '..', dir)
}

module.exports = {
  mode: isProd ? 'production' : 'development',
  entry: {
    app: './src/main.ts'
  },

  output: {
    path: resolve('dist'),
    filename: '[name].[contenthash:8].js'
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        include: [resolve('src')]
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin({}),

    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],

  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },

  devtool: isProd ? 'cheap-module-source-map' : 'eval-cheap-source-map',

  devServer: {
    host: 'localhost', // 主机名
    stats: 'errors-only', // 打包日志输出输出错误信息
    port: 8081,
    open: true
  }
}

3.6 配置打包命令

"dev": "cross-env NODE_ENV=development webpack serve --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"

3.7 运行与打包

yarn dev
yarn build

转载：https://blog.csdn.net/qq_45297578/article/details/117090991

查看评论

飞道的博客