快速学习TypeScript

最新推荐文章于 2024-07-04 22:42:29 发布

大雾四时起

最新推荐文章于 2024-07-04 22:42:29 发布

阅读量187

点赞数

文章标签： typescript

本文链接：https://blog.csdn.net/qq_45666837/article/details/118278837

版权

什么是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 不是一个函数），造成线上 bug

TypeScript开发环境搭建

下载 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.2

5. 配置打包命令: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"
},