TypeScript 入门教程之基础环境搭建
初始化项目
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-pluginwebpack 配置项如下
// 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 学习环境搭建完成。
更多敬请下节分享
