一、TypeScript是什么？

1、以JavaScript为基础构建的语言

2、一个JavaScript的超集

3、可以在任何支持JavaScript的平台中执行

4、TypeScript扩展了JavaScript并添加了类型

注意：

二、TypeScript增加了什么？

1、类型

2、支持ES的新特性

3、添加ES不具备的新特性

4、丰富的配置选项

5、强大的开发工具

注意：

三、TypeScript开发环境搭建

1、下载nodejs

https://www.123pan.com/s/QvTuVv-Ej5w.html

2、按照nodejs

3、使用npm全局按照typescript

npm i -g typescript

4、创建ts文件

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

tsc xxx.ts

四、数据类型

1、number

typescript

let a;
a=123;			//对
a="hdq";		//错

2、string

typescript

let a;
a="hdq";			//对
a=123;		   		//错

typescript

let a=false;		//默认为boolean类型了
a=true;				//对
a=123;				//错

为函数返回值和形参指定类型

typescript

function(a:number,b:number):number{
	return a+b;
}

为一个值设置多个可选类型

typescript

let c:boolean | string;
c=ture;
c="123"

3、boolean

typescript

let a:boolean;
a=true;

4、字面量

typescript

let a:"female" | "man";
let b:10;

5、any

any表示的是任意类型，一个变量设置类型为any后相当于该变量关闭了TS的类型检测

声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）

6、unknown

unknown表示未知类型的值。

unknown实际上就是一个类型安全的any

unknown类型的变量不能直接赋值给其他变量

除非

方法一：

typescript

let a:unknown="huangdaquan";
let b:string;
if(typeof a === "string"){
	b=a;
}

方法二： as类型断言

1、格式一：

typescript

let a:unknown="huangdaquan";
let b:string;
b=a as string;

2、格式二：

typescript

let a:unknown="huangdaquan";
let b:string;
b=<string>a;

7、void

如果一个函数没写返回值，那么自动返回值为any类型

typescript

function fn():void{
	return undefined/null/;		//三种都可以写，最好啥也不写
}

从哲学上讲，void没有返回值，在某种意义上讲，没有返回值也算是一种返回值

8、never

never表示永远不会返回结果

typescript

function fn():never{
	throw new Error('报错了')
}

9、object

object表示一个js对象，一般使用ts开发中不使用，使用{}

typescript

let a:object;		//合法，不推荐
let b:{};			//推荐

语法：{属性名：属性值,属性名：属性值}

1、在属性名后边加上?,表示属性是可选的

typescript

let a:{name:string,age?:number};
a={name:"hdq"};				//合法
a={name:"hdq",age:20};		//合法

2、添加额外的属性

typescript

let a:{name:string,[propName:string]:any};
a={name:"hdq",age:20,gender:"男"};

3、声明箭头函数，添加额外参数

typescript

let a=(a:number,b:number)=>number{}

10、Array

typescript

let a:string[];
let a:Array<string>

let b:number[];
let b:Array<number>

11、tuple（元组）

元组就是固定长度的数组，多一个少一个元素都不行

typescript

let a:[number,string];			//a是一个元组，长度为2，第一个元素必须是number，第二个元素必须是string
a=[123,"hdq"];

12、enum（枚举）

多个值之间选择的适合使用enum枚举

typescript

enum Gender{
	Male=0,
	Female=1
}
let a:{name:string,gender:Gender};
a={
	name:"孙悟空",
	gender:Gender.Male
}

13、|

typescript

let a:number | string;			//a可以是number类型，也可以是string类型

14、&

typescript

let a:{name:string} & {age:number};
a={name:"hdq",age:20}					//a中name属性和age属性必须同时满足，name属性为string类型，age为number类型

15、类型的别名

typescript

type myType=1 | 2 | 3 | 4 | 5;
let a:myType;			//相当于let a:1 | 2 | 3 | 4 | 5;

五、tsconfig.json

一、实时编译

1、单个ts文件发生变化，实时编译为js文件

tsc app.ts -w

2、如果想实时编译全部ts文件，需要配置项目

（1）新建tsconfig.json文件（可写注释）

{

}

（2）使用tsc

typescript
```
tsc				//编译全部ts文件
```
1
typescript
```
tsc -w			//实时编译全部ts文件
```
1

二、tsconfig.json文件

1、include

指定编译包含哪些ts文件

json

{
	"include":[
		"./src/**/*"		//**表示任意目录，*表示任意文件
	]
}

2、exclude

指定编译时不包含哪些ts文件

json

{
	"exclude":[
		"./src/hello/**/*"		//编译时排除hello文件
	]
}

3、extends

定义被继承的配置文件

typescript

"extends":"./config/base"

4、files

指定被编译文件的列表，只有需要编译的文件少时才会用到

json

"files":[
	"index1.ts",
	"index2.ts",
	"index3.ts"
]

列表中的文件都会被TS编辑器编辑

5、compilerOptions

1、target

用来指定ts指定编译后的es版本

json

"compilerOptions":{
	"target":"es6"
}

2、module

指定要使用的模块化的规范

json

"compilerOptions":{
	"module":"es6"
}

3、lib

用来指定项目中要使用的库

json

"compilerOptions":{
	"lib":["dom,..."]//一般不要求你改
}

4、outDir

用来指定编译后的js文件所在的目录

json

"compilerOptions":{
	"outDir":"./dist"
}

5、outFile

将代码合并为一个文件

设置outFile后，所有的全局作用域中的代码会合并到同一个文件里去

6、allowJs

是否对js文件进行编译，默认值为false

json

"compilerOptions":{
	"allowJs":false
}

7、checkJs

是否检测js代码是否符合语法规范，默认是false

json

"compilerOptions":{
	"checkJs":flase
}

8、removeComments

ts编译为js文件后是否移除注释

json

"compilerOptions":{
	"removeComments":true
}

9、noEmit

不生成编译后的文件

json

"compilerOptions":{
	"noEmit":true
}

10、noEmitOnError

ts文件有错误时，就不生成编译后的js文件

json

"compilerOptions":{
	"noEmitOnError":true
}

11、alwaysStrict

用来设置编译后的文件是否使用严格模式，默认false

json

"compilerOptions":{
	"alwaysStrict":true
}

12、noImplicitAny

不允许隐式的any类型

json

"compilerOptions":{
	"noImplicitAny":true
}

13、noImplicitThis

不允许不明确类型的this

json

"compilerOptions":{
	"noImplicitThis":true
}

14、strictNullChecks

是否严格的检查空值

json

"compilerOptions":{
	"strictNullChecks":true
}

15、strict

所有严格检查的总开关，一开，所有关于严格检查的都打开，反之相反

json

"compilerOptions":{
	"strict":true
}

六、webpack

一、安装依赖

npm i -D webpack webpack-cli typescript ts-loader

二、编写webpack.config.js配置文件

const path=require("path")
module.exports={
	//指定入口文件
	entry:"./src/index.ts",
	output:{
		//指定打包文件的目录
		path:path.resolve(__dirname,'dist'),
		//打包后文件的名字
		filename:"bundle.js"
	},
	//指定webpack打包时要使用的模块
	module:{
		//指定要加载的规则
		rules:[
			{
				//test指定的时规则生效的文件
				test:/\.ts$/,
				//要使用的loader
				use:'ts-loader',
				//要排除的文件
				exclude:"/node-modules/"
			}
		]
	}
}

三、webpack自动生成html文件

npm i -D html-webpack-plugin

webpack.config.js文件

//引入html插件
const HTMLWebpackPlugin=require("html-webpack-plugin")

module.exports={
    plugins:[
      new HTMLWebpackPlugin({
          title:"html文件自定义title",		//自定义title
          //也可也指定一个html文件作为生成html网页的模板
          template:"./src/index.html"
      })
    ]
}

四、实时更新项目至浏览器

npm i -D webpack-dev-server

在package.json中

json

"scripts":{
	"start":"webpack serve --open chrome.exe"
	//"start":"webpack serve --open --mode development"  弹幕修正
	//"start":"webpack serve --open"
}

五、清空dist目录，再重新生成js文件，防止有旧的文件存在

npm i -D clean-webpack-plugin

在webpack.config.js

const {CleanWebpackPlugin}=require('clean-webpack-plugin')

module.exports={
    plugins:[
      new CleanWebpackPlugin()
    ]
}

六、设置引用模块

在webpack.config.js

module.exports={
    resolve:{
    	extensions:['.ts','.js']
    }
}

七、打包后的文件不想用箭头函数，想兼容老版本浏览器

const path=require("path")
module.exports={
	output:{
		//告诉webpack不使用箭头函数
		environment:{
			arrowFunction:false,
            const:fasle			//不适用变量const
		}
	}
}

八、打包

在package.json

json

"scripts":{
	"build":"webpack"
}

执行命令打包

npm run build

七、babel

一、安装依赖

npm i -D @babel/core @babel/preset-env babel-loader core-js

二、配置

在webpack.config.js

module.exports={
	module:{
		rules:[
			{
				...
				use:[//从后往前执行加载器
					//可"babel-loader",
					//或
					{
						//指定加载器
						loader:"babel-loader",
						//设置babel
						options:{
							//设置预定义的环境
							presets:[
								[
									//指定环境的插件
									"@babel/preset-env",
									//配置信息
									{
										targets:{
											//浏览器版本
											"chrome":"88",
                                            //"ie":"11"
										},
                                        //指定corejs的版本
										"corejs":"3",
                                        //使用corejs的方式  "usage"表示按需加载
                                        "useBuiltIns":"usage"
									}
								]
							]
						}
					},
					"ts-loader"
				]
			}
		]
	}
}

八、css

npm i -D less less-loader css-loader style-loader

在webpack.config.js

module.exports={
	module:{
		rules:[
			{
				//test指定的时规则生效的文件
				test:/\.less$/,
				//要使用的loader
				use:[
					"style-loader",
					"css-loader",
					"less-loader"
				]
			}
		]
	}
}

九、postcss

npm i -D postcss postcss-loader postcss-preset-env

module.exports={
	module:{
		rules:[
			{
				//test指定的时规则生效的文件
				test:/\.less$/,
				//要使用的loader
				use:[
					"style-loader",
					"css-loader",
					{
						loader:"postcss-loader",
						options:{
							postcssOptions:{
								plugins:[
									"postcss-preset-env",
									{
										browser:"last 2 versions"
									}
								]
							}
						}
					},
					"less-loader"
				]
			}
		]
	}
}

一、TypeScript是什么？ ​

二、TypeScript增加了什么？ ​

三、TypeScript开发环境搭建 ​

四、数据类型 ​

1、number ​

2、string ​

3、boolean ​

4、字面量 ​

5、any ​

6、unknown ​

7、void ​

8、never ​

9、object ​

10、Array ​

11、tuple（元组） ​

12、enum（枚举） ​

13、| ​

14、& ​

15、类型的别名 ​

五、tsconfig.json ​

一、实时编译 ​

1、单个ts文件发生变化，实时编译为js文件 ​

2、如果想实时编译全部ts文件，需要配置项目 ​

二、tsconfig.json文件 ​

1、include ​

2、exclude ​

3、extends ​

4、files ​

5、compilerOptions ​

1、target ​

2、module ​

3、lib ​

4、outDir ​

5、outFile ​

6、allowJs ​

7、checkJs ​

8、removeComments ​

9、noEmit ​

10、noEmitOnError ​

11、alwaysStrict ​

12、noImplicitAny ​

13、noImplicitThis ​

14、strictNullChecks ​

15、strict ​

六、webpack ​

一、安装依赖 ​

二、编写webpack.config.js配置文件 ​

三、webpack自动生成html文件 ​

四、实时更新项目至浏览器 ​

五、清空dist目录，再重新生成js文件，防止有旧的文件存在 ​

六、设置引用模块 ​

七、打包后的文件不想用箭头函数，想兼容老版本浏览器 ​

八、打包 ​

七、babel ​

一、安装依赖 ​

二、配置 ​

八、css ​

九、postcss ​

一、TypeScript是什么？

二、TypeScript增加了什么？

三、TypeScript开发环境搭建

四、数据类型

1、number

2、string

3、boolean

4、字面量

5、any

6、unknown

7、void

8、never

9、object

10、Array

11、tuple（元组）

12、enum（枚举）

13、|

14、&

15、类型的别名

五、tsconfig.json

一、实时编译

1、单个ts文件发生变化，实时编译为js文件

2、如果想实时编译全部ts文件，需要配置项目

二、tsconfig.json文件

1、include

2、exclude

3、extends

4、files

5、compilerOptions

1、target

2、module

3、lib

4、outDir

5、outFile

6、allowJs

7、checkJs

8、removeComments

9、noEmit

10、noEmitOnError

11、alwaysStrict

12、noImplicitAny

13、noImplicitThis

14、strictNullChecks

15、strict

六、webpack

一、安装依赖

二、编写webpack.config.js配置文件

三、webpack自动生成html文件

四、实时更新项目至浏览器

五、清空dist目录，再重新生成js文件，防止有旧的文件存在

六、设置引用模块

七、打包后的文件不想用箭头函数，想兼容老版本浏览器

八、打包

七、babel

一、安装依赖

二、配置

八、css

九、postcss