typescrpit学习

用于记录自己对typescript学习笔记
1.类型断言
① 变量 as 类型
②<类型>变量
2.类型
基本类型 number / string / boolean / any(不推荐)

let a:number; // 类型声明

let a:object; // 不推荐用于声明对象

在js中object类型 { } / [ ] / function(){}

// 对象声明
let b:{name:string,age?:number}
b= {name:'green',age:19} // 这样子声明表示b对象中必须要有name属性，age属性可选，但不能添加其他属性

{ } 用来指定对象中可以包含哪些属性
{属性名：属性值，属性名：属性值} ，在属性名后面加上？表示属性是可选的。

// 如果在字典中只想对部分属性进行属性设置
//[propName:string]:any 表示任意类型的属性
let c:{name:string,[propName:string]:any}

函数类型定义

let d:(a:number,b:number)=>number
// 表示d是一个函数，有两个形参，类型为number类型，返回值也是number类型

数组类型的声明
① 类型[]
②Array<类型 >

let e:string[] // 表示字符串数组

let f:number[] // 表示数值数组

元组，就是固定长度的数组

let h:[string,number] // 元组
// 表示h是长度为二的数组，一个类型为字符串，一个类型为数字

enum 枚举,所有可能的情况进行列举

// 枚举使用
enum Gender{
	Male=0,
	Female=1
}
let i:{name:string,gender:Gender}
i={
	name:'green',
	gender:Gender.Female,
}

let j : string | number//  “ | ” 表示或

类型的别名

type myType = 1 | 2 | 3 | 4
let a :myType

3.编译选项
监视ts文件变化，对ts文件实时编译成js文件

tsc app.ts(文件名) -w

新建一个tsconfig.json 文件
tsconfig.json 是ts编译器的配置文件，ts编译器可以根据它的信息来对代码进行编译

tsc --init // 可以使用改命令进行生成tsconfig.json 文件

配置选项
1、include：用来指定哪些ts文件需要被编译，里面写路径
路径：** 表示任意目录
* 表示任意文件
2、exclude：不需要编译,本身存在着默认值[“node_modules”,“bower_components”,“jspm_packages”]

{
	"include":[
	"./src/**/*"
	],
	"exclude":[]
}

3、compilerOptions 编译器的选项
target： 用来指定ts被编译为的es的版本
module：指定要使用的模块化的规范
lib： 用来指定项目中要使用的库
outDir：用来指定编译后文件所在的目录
outFile：将代码合并为一个文件，设置outFile后，所有的全局作用域中的代码会合并到同一个文件中
allowJs :是否对js文件编译，默认时false
cheackJs ：是否检查js代码是否符合语法规范，默认时false
removeComments：是否移除注释 类型：Boolean
noEmit: 不生成编译后的文件 类型：Boolean
noEmitOnError：当有错误时不生成编译文件 类型:Boolean
alwaysStrict：在ts编译后的文件是否使用严格模式，默认false,当文件中使用了模块，默认进入到严格模式
noImplicitAny：不允许隐式的any类型 ，类型：Boolean
noImplicitThis：不允许不明确类型的this， 类型：Boolean
strictNullChecks：严格的检查空值
strict：所有严格检查的总开关 ，类型：Boolean

{
	"compilerOptions":{
		"target":"ES6",
		"outDir":"./dist",
		"outFile":"./dist/app.js", // 将多个ts文件编译在一个文件中
	}
}

4.webpack 打包ts代码
1、依赖的安装

npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin webpack-dev-server clean-webpack-plugin @babel/core @babel/preset-env babel-loader core-js

// html-webpack-plugin 帮助我们自动的生成html文件
// webpack-dev-server webpack开发服务器，相当于安装了一个内置的服务器，热更新
// clean-webpack-plugin 在打包的时候自动删除原来的dist文件，保证每次打包的dist文件都是最新的
在package.json 文件中添加两行指令

//@babel-loader 使得webpack和js结合的一个工具
// @babel/preset-env 解决浏览器兼容的问题

"bulid": "webpack",
"start":"webpack serve --open chrome.exe"

2、tsconfig.json 文件 的生成

tsc --init

3、webpack.config.js 文件的配置

// 引入一个包
const path = require('path');
// 引入html插件
const ClearWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // 指定入口文件
    entry: './src/index.ts',

    // 指定打包文件所在目录
    output: {
        // 指定打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件
        filename: "bunndle.js",
        // 告诉webpack不使用箭头函数
        environment:{
            arrowFunction:false
        }

    },
    // 指定webpack打包时要使用的模块
    module: {
        // 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件 
                //  /\.ts$/匹配所有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"


                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'],
                // 要排除的文件
                exclude: /node-modules/
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        new ClearWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 定义了网页模板
            template: './src/index.html'
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts', '.js'] // 表示ts 和js文件结尾的文件都可以作为模块使用
    }
}

5.ts中类定义

class Person{
	// 定义实例属性（可读可写）
	name:string = 'green'
	// readonly 开头的属性只读，不可修改
	// static readonly 静态只读属性
	readonly sex:string = 'male'
	// 在属性前使用static关键字，可以定义类属性(静态属性)
	static age:number = 18
}
const per = new Person()
// 静态属性的调用，通过类去调用，实例无法调用
console.log(Person.age)

// 直接定义的属性是实例属性，需要通过实例对象去访问
// 使用static开头的属性是静态属性(类属性)，可以直接通过类去访问

抽象类：以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象，抽象类就是专门用来被继承的类,抽象类中可以添加抽象方法

abstract class Animal{
	name:string,
	constructor(name:string){
	this.name = name
	}
	// 定义一个抽象方法
	// 抽象方法没有方法体，只能定义在抽象类中，子类必须对抽象方法进行重写 --> 提供给子类重写 
	abstract say():void;// void没有返回值
}

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

// 接口 
interface myInterface{
	name:string;
	age:number;
}

1、接口可以在定义类型的时候去限制类的结构,接口中的所有属性都不能有实际的值，
2、接口只定义对象的结构，而不考虑实际值
3、在接口中所有的方法都是抽象方法

// 定义类时，可以使用类去实现一个接口（类似继承）,通过 implements 去实现

// 接口就是一个规范
class Myclass implements myInterface{

}

7.属性的封装

(function(){
	// TS 可以在属性钱添加属性的修饰符
	// public 修饰的属性可以在任意位置访问(修改)公共属性
	// private 私有属性，私有属性只能在类内部进行访问（修改） -- 通过在类中添加方法使得私有属性可以被外部访问
	// protected 受包含的属性，只能在当前类和当前类的子类中访问（修改） --该属性只能在继承的子类中访问，实例对象无法访问到该属性
	class Person{
		public name:string;
		private age:number;
	}
	constructor(name:string,age:number){
		this.name = name;
		this.age = age
	}
	
	// getter 方法用来读取属性
	// setter 方法用来设置属性 - 她们被称为属性的存取器
	
	// 定义方法，用来获取name属性
	getName(){
		return this.name
	}
	// 定义方法，用来设置name属性
	setName(value:string){
		this.name= value
	}

	// TS中设置getter方法的方式 
	// get -- 表示getter 方法
	// name -- 表示方法名
	get name(){
		return this.name;
	}
	set name(value:string){
		this.name = value;
	}
	const per = new Person(name:'green',age:18)
	per.name = "aaaa" // 这里的name调用的时setter里的name方法
)()

class C{
	// 这样的写法，构造函数里直接生成了，不用写类似nmae=this.name 的代码了
	constructor(publice name:string,public age:num){
	}
}

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

// 这几个T表示同一个类型
function fn<T>(a:T):T{
	return
}

// 可以直接调用具有泛型的函数
fn(a:10);  // 此时T就表示number类型; --不指定泛型，TS可以自动对类型进行判断
fn<string>(a:'hello'); // 指定泛型，此时泛型就表示string

可以指定多个泛型

function fn2<T,K>(a:T,b:K):T{
	return a
}

interface Inter{
	length:number;
}

// T extends Inter  表示泛型T必须是Inter实现类（子类）
function fn3<T extends Inter>(a){
	return a.length
}