TS学习笔记01-基础篇
程序员文章站
2022-03-22 23:23:28
...
强类型与弱类型
- 强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。
- 弱类型语言：变量可以被赋予不同的数据类型。
动态类型与静态类型
- 静态类型语言：在编辑阶段确定所有变量的类型
- 动态类型语言：在执行阶段确定所有变量的类型
| 静态类型语言 | 动态类型语言 |
|---|---|
| 对类型极度严格 | 对类型非常宽松 |
| 立即发现错误 | BUG可能隐藏很深 |
| 运行时性能号 | 运行时性能差 |
| 自文档化 | 可读性差 |
第一个ts程序
新建 first 文件夹 终端中打开输入
npm init -y
自动创建好package.json后，全局安装typescript
npm i typescript -g
安装完成后，就可以使用tsc命令了。查看帮助：
tsc -h
创建这些配置项，输入下面命令会自动创建一个tsconfig.json
tsc --init
接着新建一个src目录，目录下创建一个index.ts文件并写入
let str :string = 'hello world'
终端执行
tsc ./src/index.ts
就会自动生成一个js文件，内容为‘var str = ‘hello world’;’
接下来根目录创建一个build文件夹，并创建4个文件如下图
具体内容如下：
base.config :
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/index.ts',
output:{
filename:'app.js'
},
resolve : {
extensions : ['.js','.ts','.tsx']
},
module:{
rules:[
{
test:/\.tsx?$/i,
use:[{
loader : 'ts-loader'
}],
exclude: /node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/tpl/index.html'
})
]
}
config.js
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config')
const devConfig = require('./webpack.dev.config')
const proConfig = require('./webpack.pro.config')
module.exports = (env, argv) => {
let config = argv.mode === 'development' ? devConfig : proConfig;
return merge(baseConfig, config);
};
dev.config.js
module.exports = {
devtool:'cheap-module-eval-source-map'
}
pro.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins:[
new CleanWebpackPlugin()
]
}
分别安装上面代码中需要的插件
npm i webpack webpack-cli webpack-dev-server -D
npm i html-webpack-plugin -D
npm i ts-loader typescript -D
npm i clean-webpack-plugin -D
npm i webpack-merge -D
src目录下创建一个tpl文件夹，下面创建一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>type Script</title>
</head>
<body>
<div class="app"></div>
</body>
</html>
index.ts修改
let hello : string = "hello world"
document.querySelectorAll('.app')[0].innerHTML= hello
package.json中添加编译环境
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode=development --config ./build/webpack.config.js"
},
src目录终端运行
npm run dev
下一篇： php如何实现同义词替换