TypeScript笔记

属性名后边加上?，表示属性是可选的
如

let b:{name: string, age?:number}

[propName: string]: any 表示任意类型的属性

let c:{name:string, [propName:string]:any};
c = {name:'猪八戒', age: 18, gender: '男'}

设置函数结构的类型声明：
语法：（形参：类型，形参：类型…） => 返回值

let d: (a:number, b: number) => number;
	d = function (n1: number, n2:number) : number {
		return 10;
}

number[]表示数值数组

let f: number[];

let g: Array<number>;
g = [1, 2, 3]; 

元组就是固定长度的数组

let h: [string, string];
h = ['hello', '123'];

enum 枚举

//枚举类
enum Gender{
	Male = 0,
	Female = 1
}
let i: {name: string, gender: Gender};
i = {
	name:'孙悟空',
	gender: Gender.Male
}

&表示同时

let j: {name: string} & {age: number};
j = {name:'孙悟空' age: 18}

tsconfig.json编译选项

{
	/* "include"用来指定哪些ts文件需要被编译
		*表示任意文件，**表示任意目录
		"exclude" 不需要被编译的文件目录
			默认值：["node_modules", "bower_components", jspm_packages"]
	*/
	"include":[
		"./src/**/*"
	]
	"exclude":[
		"./src/hello/**/*"
	]
	/*  extends定义被继承的配置文件 */
	"extends": "./configs/base"
	/*	files指定被编译的文件列表，只有需要编译的文件少时才会用到 */
	"files":[
		"core.ts",
		"sys.ts",
		"types.ts"
	]
	/* 	compilerOptions 编译器的选项， target表示编译成的目标ES的版本*/
	// 'es3', 'es5', 'es6',...
	"compilerOptions":{
		"target": "ES3",
		//module 指定要使用的模块化规范
		//'none', 'commonjs', 'amd'....
		"module": "abc",
		//lib 用来指定项目中要使用的库
		"lib": ["es6", "dom"]
	}
	//outDir 用来指定编译后文件所在的目录
	"outDir": "./dist",
	//将代码合并为一个文件
	//设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
	"outFile": "./dist/app.js",

	//是否对js文件进行编译，默认是false
	"allowJS": true,
	//是否检查js代码是否符合语法规范，默认是false
	"checkJS": true,
	//是否移除注释
	"removeComments": true,
	// 不生成编译后的文件
	"noEmit": true,
	// 当有错误时不生成编译后的文件，默认是false
	"noEmitOnError": true,
	// 所有严格检查的总开关
	"strict": true,
	//用来设置编译后的文件是否使用严格模式，默认是false
	"alwaysStrct": false,
	// 不允许设置隐式的any类型
	"noImplicitAny": true，
	// 不允许不明确类型的this
	"noImplictThis": true,
	// 严格检查空值
	"strictNullChecks": true
}

webpack.config.js配置选项

module.exports = {
	//entry:指定入口文件
	entry: "./src/index.ts",
	
	//指定打包文件所在目录
	output:{
		//指定打包文件的目录
		path: path.resolve(__dirname, 'dist')
		//打包后文件的文件名
		filename: "bundle.js",
		//告诉webpack不使用箭头函数
		environment:{
			arrowFuction: false
		}
	},
	//webpack打包时要使用的模块
	module:{
		//指定加载的规则
		rules:[
			{
				//test指定的是规则生效的文件
				//匹配以.ts结尾的文件
				test:/\.ts$/,
				//要使用的loader
				use: [
					//配置babel
					{
						//指定加载器
						loader: "babel-loader",
						//设置babel
						options:{
							//设置预定义的环境
							presets:[
								[
									//指定环境的插件
									"@babel/preset-env",
									//配置信息
									{
										//要兼容的目标浏览器
										targets:{
											"chrome": "88"
										},
										//指定的corejs版本
										"corejs": "3",
										// 使用corejs的方式 "usage"表示按需加载
										"useBuiltIns": "usage"
									}
								]
							]
						}
					}
				],
				//要排除的文件
				exclude: /node-modules/
			}
		]
	},
  //配置webpack插件
  plugins: [
	new HTMLWebpackPlugin(options:{
		title:"这是一个自定义的title"
	})
	]
}

类

class Person {
	name: string = '孙悟空';
	age: number = 18;
}
//抽象类：只能被继承，不能被实例化
abstract class Person{
	name: string = '孙悟空';
	age: number = 18;
}

接口
接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法
同时接口也可以当成类型声明去使用

interface myInterface{
	name: string;
	age: number;
}

const obj: myInterface = {
	name: 'sss',
	age: 111
}

属性的封装

//protected 只能在类内部和子类访问
class Person{
	private name: string = '孙悟空';
	private age: number = 18;
	//TS中设置getter的方法
	get name(){
		return this.name
	}
	set name(value){
		this.name = value
	}
}

泛型
在定义函数或是类时，如果遇到类型不明确就可以使用泛型

function fn<T> (a: T): T{
	return a;
}
fn(a: 10);
fn<string>("hello");