01.全局安装ts
npm i -g typescript
- 检查版本
tsc -V
02.引入ts代码
- 编写ts代码
(()=>{
function sayHi(str:string){
return '你好'+str
}
let text='haha'
console.log(sayHi(text))
})()
- 在html中引入
<script src="./第一个ts代码.ts"></script>
- 运行到浏览器
Uncaught SyntaxError: Unexpected token ':'
报错原因:ts代码不能直接运行到浏览器,要编译成js代码才能运行
03.vscode编译ts代码
- 终端中运行命令
tsc ts文件路径.ts
- 执行命令后会生成js文件
(function () {
function sayHi(str) {
return '你好' + str;
}
var text = 'haha';
console.log(sayHi(text));
})();
- html加载编译后的js文件
<script src="./index.js"></script>
- 运行到浏览器
04.vscode自动将ts代码编译为js代码
- 生成配置文件tsconfig.json
tsc --init - 修改tsconfig.json配置
/*
"outDir": "./", //输出js路径
"strict": false //严格模式
*/
"outDir": "./js", //输出js路径
"strict": true //严格模式
- 启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json - 编写ts代码vscode就会自动编译为js
05.接口
接口:一种能力,一种约束
(()=>{
//定义接口
interface IPerson{
firstName:string,
lastName:string
}
function showFullName(person:IPerson){
return person.firstName+'-'+person.lastName
}
const person={
firstName:'姓',
lastName:'名'
}
console.log(showFullName(person))
})()
接口规定了必须要有一个字符串类型的firstName和lastName
如果接口定义了相应的规则,传参的时候没有相应的属性就会报错(但js会正常编译,值为undefined)
06.webpack打包ts
- 新建
pubilc
目录,再新建index.html
文件 - 新建
src
目录,再新建main.ts
文件
main.ts:document.write('哈哈')
- 新建
build
目录,新建webpack.config.js
文件
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: [
//针对src目录里的ts或者tsx文件编译处理
{
test: /\.tsx?$/,
use: 'ts-loader',
include: [resolve('src')]
}
]
},
plugins: [
//把之前打包的js目录清掉
new CleanWebpackPlugin({
}),
//针对当前pubilc里的index.html打包
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
//引入文件扩展名处理
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
//错误代码提示信息
devtool: isProd ? 'cheap-module-source-map' : 'cheap-module-eval-source-map',
//服务配置,主域名localhost,端口8081,在浏览器自动打开
devServer: {
host: 'localhost', // 主机名
stats: 'errors-only', // 打包日志输出输出错误信息
port: 8081,
open: true
},
}
- 运行命令
npm init -y
,生产package.json
- 下载对应依赖(指定版本)
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.2",
"html-webpack-plugin": "^4.5.0",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.2"
}
- 配置命令
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
}
- 运行npm run dev
- 运行npm run build