typescript 学习第二周

学习目标：

一周计划：

• 接口、类、范型，将其基本概念看完。
• 记录出来与javascript不一样的地方

---

学习内容：

1、 接口
2、 类
3、范型

---

---

前言

上周学完了基础类型和类型声明，东西还是蛮多的，也许对有后端经验的人比较友好，但是我觉得还是有些吃力的，需要多写多练，去巩固，毕竟难的只是他的写法。

一.接口

用来一个类中应该包含哪些属性，可以当作类型声明去使用

interface myInter{
	name:string;
	sayHello():void;
}
// 对类的限制，必须满足接口中的限制
class MyClass implements myInter{
	name:string;
	constructor(name:string){
		this.name = name
	}
	sayHello(){
	}
	
}

二.类

1.属性

class Person {
	// 实例属性
	name:string = '小明';
	// 静态属性
	static age:number = 10
}

console.log(Person.age) // 获取静态属性
let per = new Person()
console.log(per.name)   // 获取实例属性

2.构造函数

class Person {
	name:string;
	age:number;
// 构造函数。实例化的时候调用;this是当前调用的实例
 constructor(name:string,age:number){
 this.name = name,
 this.age=age
 }
}

3.继承

class Person {
	name:string;
	age:number;
// 构造函数。实例化的时候调用;this是当前调用的实例
 constructor(name:string,age:number){
 this.name = name;
 this.age=age
 }
}

class Student extends Person {
	// 如果有与父类重名的方法，需要加super，否则的话会重写，普通的方法可以重写，但是constructor不能进行重写，否则就没有继承的意义了
}

4.抽象类

与普通类没什么差别，只是不能被创建实例，只能被继承
写法如下

abstract class Person{
	// 抽象方法，实例必须进行重写
	abstract sayHello():void
}

三.范型

定义函数中类型不明确的参数

function fn<T>(a: T):T{
	return a 
}
fn(10)   // 自动指定类型
fn<string>('s')   // 直接指定类型

interface Inter{
	name:string
}
function fn<T extends Inter>(a:T): number{
	return a.name
}

四.编译

package.json，使用webpack-dev-server之后，启动运行环境的配置（start）
window是webpack serve --open chrome.exe
mac是webpack serve --open ‘google chrome’

const path = require('path')
// 用于打包的html中的内容自动引入
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',
        // 不让webpack使用箭头函数   用于兼容ie
        environment:{
            arrowFunction:false
        }
    },
    // 指定打包时使用的模块
    module:{
        // 指定要加载的规则
        rules: [
            {
                // 指定规则生效的文件，正则
                test: /\.ts$/,
                // 使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        option: {
                            // 设置预定义环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    '@babel/preset-env',
                                    {
                                        // 指定浏览器
                                        targets: {
                                            "chrome":'88'
                                        },
                                        // 指定版本
                                        "corejs":'3',
                                        // 使用corejs的方式，按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude:/node-modules/
            },
            {
            // less配置
			test:/\.less$/,
			use:[
				"style-loader",
				"css-loader",
				// 配置css的兼容，如一些前缀等
				{
					loader:"postcss-loader",
					options: {
							postcssOptions: {
									plugins:[
											[
												"potscss-preset-env",
												{
													browsers:'last 2 wersion'
												}
											]
										]
								}
							}
				}
				"less-loader"
				]
			}
        ]
    },
    // 配置webpack插件
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            // 指定输出的huml文件
            template: "./index.html"
        }),
    ],
    // 用来设置引用模块
    resolve: {
        extensions: ['.ts','.js']
    }
}