什么是TypeScript?
TypeSctipt 是以JavaScript为基础构建的语言,是JavaScript的超集,TypeScript扩展了JavaScript,并添加了类型,可以在任何支持JavaScript的平台执行,TypeScript不能被JavaScript解析器直接执行,JavaScript不利于维护,TypeScript易于维护
TypeScript 的特性
TypeScript 主要有 3 大特点：
始于JavaScript，归于JavaScript
TypeScript 可以编译出纯净、 简洁的 JavaScript 代码，并且可以运行在任何浏览器上、Node.js 环境中和任何支持 ECMAScript 3（或更高版本）的JavaScript 引擎中。
强大的类型系统
从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。
我们知道，JavaScript 是一门非常灵活的编程语言：
- 它没有类型约束，一个变量可能初始化时是字符串，过一会儿又被赋值为数字。
- 由于隐式类型转换的存在，有的变量的类型很难在运行前就确定。
- 基于原型的面向对象编程，使得原型上的属性或方法可以在运行时被修改。
- 函数是 JavaScript 中的一等公民[2]，可以赋值给变量，也可以当作参数或返回值。
这种灵活性就像一把双刃剑，一方面使得 JavaScript 蓬勃发展，无所不能，从 2013 年开始就一直蝉联最普遍使用的编程语言排行榜冠军[3]；另一方面也使得它的代码质量参差不齐，维护成本高，运行时错误多。
而 TypeScript 的类型系统，在很大程度上弥补了 JavaScript 的缺点。
先进的 JavaScript
TypeScript 提供最新的和不断发展的 JavaScript 特性，包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性，比如异步功能和 Decorators，以帮助建立健壮的组件。
TypeScript 是静态类型
类型系统按照「类型检查的时机」来分类，可以分为动态类型和静态类型。
动态类型是指在运行时才会进行类型检查，这种语言的类型错误往往会导致运行时错误。JavaScript 是一门解释型语言，没有编译阶段，所以它是动态类型，以下这段代码在运行时才会报错：
let foo = 1;
foo.split(' ');
// Uncaught TypeError: foo.split is not a function
// 运行时会报错（foo.split 不是一个函数），造成线上 bugTypeScript开发环境搭建
- 下载 node.js
- 安装 node.js
- 使用npm全局安装 typescript
npm i -g typescript- 创建一个ts文件
- 使用tsc对ts文件进行编译
- 进入命令行
- 进入ts文件所在目录
- 执行命令tsc xxx.ts 它会自动生成一个js文件
- 如果在 vscode终端中使用tsc编译出错的话可以 可以在终端输入:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser注意:
- ts的文件中如果直接书写js语法的代码,那么在html文件中直接引入ts文件,在谷歌浏览器中是可以正常使用的
- 如果ts的文件中有了ts的语法代码,那么就需要吧这个ts文件编译为js文件,在html文件中引入js文件
- ts文件函数的形参中,如果使用了 某个类型进行规范,那么在最终编译的js文件中是没有这个类型的
- ts文件中变量使用let 进行修饰,编译后的js文件变成了var
这里这个js文件每次要手动编译,就会比较麻烦点,所以编辑器有个自动编译
vscode自动编译
- 输入命令
npm --init- 自动生成一个tsconfig.json文件中修改配置
"outDir": "./js", # 把ts最终编译后放在js目录上
"strict": false, #不使用严格模式- 启动自动编译
vscode中 终端 >>> 运行任务 >>> 显示所有任务 >>> tsc:监视
使用webpack打包ts
1. 入口js:src/main.ts
document.write('Hello Webpack TS!')2.index页面: 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>Document</title>
</head>
<body>
</body>
</html>3.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' : 'cheap-module-eval-source-map',
devServer: {
host: 'localhost', // 主机名
stats: 'errors-only', // 打包日志输出输出错误信息
port: 8081,
open: true
},
}4. 下载依赖
npm init -y
tsc --init
npm install -D typescript
npm install -D webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
npm install -D html-webpack-plugin@4.5.0 clean-webpack-plugin@3.0.0 ts-loader@8.0.11 cross-env@7.0.25. 配置打包命令:package.json
"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"
},6.运行与打包
npm run dev
npm run build总结:
TypeScript 在社区的流行度越来越高，它非常适用于一些大型项目，也非常适用于一些基础库，极大地帮助我们提升了开发效率和体验。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
