TypeScript 入门教程之基础环境搭建

作者: tww844475003 分类: TypeScript 发布时间: 2021-09-25 20:53

初始化项目

mkdir typesript-demo
cd typescript-demo
npm init -y

安装 typescript

这里全局安装,是为了方便使用 tsc 命令,初始化 tsconfig.json 配置 及直接转换运行 ts 代码。

npm i -g typescript 

项目内安装

npm i -D typescript

初始化 tsconfig.json,ts 静态检查配置

tsc --init

这里我们采用比较热门的 webpack 去打包 typescript 代码及开发环境的热刷新配置。

webpack 安装

  • 安装 webpack 模块
npm i -D webpack webpack-cli webpack-cli webpack-dev-server
  • 安装解析 ts-loader ,解析 ts 代码
npm i -D ts-loader
  • 安装 webpack-merge 合并 wepack 配置项目
npm i -D webpack-merge
  • 安装清理插件及 Html 模板插件
npm i -D html-webpack-plugin clean-webpack-plugin

webpack 配置项如下

// package.json

"scripts": {
  "start": "webpack serve --config ./lib/webpack.dev.js",
  "build": "webpack --config ./lib/webpack.prod.js"
},
// lib/webpack.base.js

'use strict'

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/main.ts'
  },
  output: {
    path: path.resolve(process.cwd(), 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: ['ts-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    })
  ]
}
// webpack.dev.js

'use strict'

const baseConfig = require('./webpack.base.js');
const { merge } = require('webpack-merge');

const devConfig = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map'
}

module.exports = merge(baseConfig, devConfig);
// webpack.prod.js

'use strict'

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const baseConfig = require('./webpack.base.js');
const { merge } = require('webpack-merge');

const prodConfig = {
  mode: 'production',
  devtool: 'cheap-module-source-map',
  plugins: [
    new CleanWebpackPlugin()
  ]
}

module.exports = merge(baseConfig, prodConfig);

Html template 文件

// public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello TypeScript</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

main.ts 入口文件

这里用到了一个 ts 类型推断排除不存在的情况,因为这里还没有插入模板,document 类型推断有可能为空状态。

小知识【TS中的 ! 和 ? 用法】

! 用法

  • 用在变量前表示取反
  • 用在赋值的内容后时,使null和undefined类型可以赋值给其他类型并通过编译

? 用法

  • 除了表示可选参数外
  • 当使用A对象属性A.B时,如果无法确定A是否为空,则需要用A?.B,表示当A有值的时候才去访问B属性,没有值的时候就不去访问,如果不使用?则会报错
src/main.ts

let hello: string = 'Hello Typescript'
console.log(hello)

document.getElementById('app')!.innerHTML = hello // !类型推断排除 null、undefined

至此,一个基础的 typescirpt 学习环境搭建完成。

更多敬请下节分享

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注