TypeScript小白学习进阶

一、快速入门

TypeScript简介

	1. TypeScript是JavaScript的超集。
	2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
	3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
	4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
	5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

二、TypeScript 开发环境搭建

1. 下载Node.js

	   - 64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
	   - 32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi

2. 安装Node.js

3. 使用npm全局安装typescript

• 进入命令行
• 输入：npm i -g typescript
• 检查是否安装成功：tsc

4. 创建一个ts文件

5. 使用tsc对ts文件进行编译

• 进入命令行
• 进入ts文件所在目录
• 执行命令：tsc xxx.ts

三、TypeScript类型

	1.基本类型
	2.对象
	3.数组
	4.字面量
	5.元祖
	6.枚举
	7.函数返回值
	8.泛型：在函数或者类中，对象类型不明确的时候。
	9.对象的属性（public、private、protected 、static、abstract ）
	10.接口类型 （interface）
	11.高级用法

泛型

高级用法
1.Partial & Required
-Partial是将一个接口的参数全部变为非必填

-Required

2.Record 译为 记录/记载, 作用是将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型

3.keyof用于获取某种类型的所有键，其返回类型是联合类
4.extends并不是继承，而是限制的意思。
5.Pick：挑选属性组成新的类型

Omit整好与Pick相反，将挑选的属性删除掉。

6.Exclude：Exclude<T, U> 表示从T中排除那些可分配给U的类型, 简单点说就是将 T 中某些属于 U 的类型移除掉。

7.Extract：取交集

四、tsconfig.json配置

		1.自动编译文件： tsc xxx.ts  -w
		2.tsconfig.json是一个JSON文件，添加配置文件后，只需只需 tsc 命令即可完成对整个项目的编译
			**配置选项**：
		- include 需要被编译的文件 `"include":["src/**/*", "tests/**/*"]`
		- enclude 不需要被编译的文件`["./src/hello/**/*"]`
		- files  和include差不多，指定需要被编译的文件,当文件较少的时候可以用`files": ["core.ts","core.ts",]`
		- extends  继承某一个文件`"extends": "./configs/base"`
		
		在开发中一般配置
			`{
				  "compilerOptions":{
					    "target": "ES6", //开启编译后文件目标版本
					    "module": "ES6", //要是用的模块规范
					    "strict": true,  //一键开启严格模式
					
					    "lib": ["ES6", "DOM"],    //代码运行时所要包含的库，体现在用法提示方面
					    "outDir": "dist",         //编译后文件所要存放的位置
					    "outFile": "dist/aa.js",  //编译后的文件合并到一个js文件中去
				  }
			}`

五、webpack配置

	1.初始化文档`npm init  -y`
	2.在根目录下新建webpack.config.js文件，在里面做简单配置如下：

• 核心配置
• 1.出入口文件
• module编译配置，plugins插件配置
• 安装webpack webpack-cli typescript ts-loader
• 安装webpack-dev-server
• 在pack.json中配置启动和打包方式:"start":"webpack serve --open chrome.exe" "build":'webpack'
• 安装html打包、和清除上次打包：html-webpack-plugin clean-webpack-plugin
• 安装babel兼容低版浏览器:@babel/core @babel/preset-env babel-loader core-js
• 安装less解析css：less less-loader style-loader css-loader
• css兼容相关：postcss post-loader post-preset-ent

//引入路径
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//配置导出项
module.exports = {

  //入口文件
  entry: './src/index.ts',
  //配置出口文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    environment: {
      arrowFunction: false //关闭webpack的箭头函数，可选(babel-core)
    }
  },

  // optimization: {
  //   minimize: false // 关闭代码压缩，可选
  // },

  resolve: {
    extensions: [".ts", ".js"]
  },

  //配置编译文件
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [
                [
                  "@babel/preset-env",
                  {
                    "targets": {
                      "chrome": "58",
                      "ie": "11"
                    },
                    "corejs": "3",
                    "useBuiltIns": "usage"
                  }
                ]
              ]
            }
          },
          {
            loader: 'ts-loader'
          }
        ],
        exclude: /node_modules/
      }
    ]
  },

  //插件使用
  plugins: [
    new CleanWebpackPlugin(),
    
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),
  ]
}