TypeScript学习笔记

TypeScript学习笔记,第1张

webpack环境搭建

webpack.config.js

// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
//引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// npm init -y 初始化 创建package.json文件
// npm i -D webpack webpack-cli typescript ts-loader  安装四个依赖
// 编写webpack配置文件
// 编写tsconfig.json文件
// 修改package.json中加上build命令
// npm i -D html-webpack-plugin //自动生成html
// npm i -D webpack-dev-server //自动响应浏览器更新
// npm i -D clean-webpack-plugin //清楚dist目录旧文件

//webpack 中所有的配置信息都应该写在module.exports中
module.exports = {

    // 指定入口文件
    entry: "./src/index.ts",

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

    },
    //指定webpack打包时要使用的模块
    module: {
        // 指定要loader加载的规则
        rules: [
            // 设置ts文件的处理
            {
                // test指定的时规则生效的文件
                test: /\.ts$/,//以ts结尾的文件
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        //指定加载器
                        loader: "babel-loader",
                        // 设置babel
                        options: {
                            //设置预定义的环境
                            presets: [
                                [
                                    //指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器及版本
                                        targets: {
                                            "chrome": "58",
                                            "ie": "11"
                                        },
                                        //指定corejs的版本
                                        "corejs": "3",
                                        //使用corejs的方式 "usage"  表示按需加载
                                        "useBuiltIns": "usage" 
                                    }

                                ]
                            ]
                        }
                    },
                    // 'babel-loader',
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/
            },
            // 设置less文件的处理
            {
                test: /\.less$/,
                use:[
                    "style-loader",
                    "css-loader",
                    //  引入postcss
                    {
                        loader: "postcss-loader",
                        options:{
                            postcssOptions:{
                                plugins:[
                                    [
                                        "postcss-preset-env",
                                        {
                                            browsers: 'last 2 versions',//兼容每个浏览器最新的两个版本
                                        }
                                    ]
                                ]
                            }
                        }

                    },
                    "less-loader"
                ]
            }

        ]
    },
    // mode: "development", //设置mode
    //配置Webpack 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            // title: "这是一个自定义的title"、
            template: "./src/index.html" 
        }),
    ],

    // 用来设置引用模块,可以将这些文件识别为模块
    resolve: {
        extensions: ['.ts', '.js']
    }
}

tsconfig.js

{
    "compilerOptions": {
        "module": "ES2015",
        "target": "ES2015",
        // "sourceMap": false
        "strict": true,
        "noEmitOnError": true
    }
}

package.json

{
    "name": "part02",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack",
        "start": "webpack serve --open chrome.exe"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.13.15",
        "@babel/preset-env": "^7.13.15",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^4.0.0-alpha.0",
        "core-js": "^3.10.1",
        "css-loader": "^5.2.1",
        "html-webpack-plugin": "^5.3.1",
        "less": "^4.1.1",
        "less-loader": "^8.1.0",
        "postcss": "^8.2.10",
        "postcss-loader": "^5.2.0",
        "postcss-preset-env": "^6.7.0",
        "style-loader": "^2.0.0",
        "ts-loader": "^8.1.0",
        "typescript": "^4.2.4",
        "webpack": "^5.32.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2"
    }
}
TS常用的变量类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30WouFsZ-1652340089664)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220505152237944.png)]

TS声明变量基本语法 注意点:如果声明变量不指定类型 那么编译器会自动给该变量声明为any类型 例:let b; 等同于 let b:any; 基本语法
// 声明一个number类型的变量
// 1.第一种方式 先声明后赋值
let num:number;
num=2;
// 2.第二种方式 声明并赋值 以下声明皆同理
let num2:number=2;

// 声明一个string类型的变量
let str:string;
str='asd';

// 声明一个字符串类型的数组
let arr:string[]; //let arr:number[] number类型数组
arr=['a','b','c'];// arr=[1,2,3]
let arr:string[] = ['a','b','c']; //let arr:number[] number类型数组并赋值

// 声明一个只有两个元素的元组 (元组就是有特定长度的数组)
let arr2:[string,string];
arr2=['a','b'];
 
// 1.1 声明一个对象 有且只有name和age两个属性
let obj:{name:string,age:number};
obj={name:'孙悟空',age:18};

// 1.2 声明一个对象 有name但是不确定有没有age属性
let obj2:{name:string,age?:number};
obj2={name:'孙悟空'}; // obj2={name:'孙悟空',age:18}都可以

// 1.3 声明一个对象 有name但是不确定有没有其他属性 
// name值为string类型,其他属性 key为string类型 value为任意类型
let obj3:{name:string,[propName:string]:any};
obj3={name:'孙悟空',age:18,gender:'male'};

// 2.声明一个对象 不常用 因为js中数组,函数都是对象类型
let obj4:object;

// 声明一个函数 变量类型都为string 返回值类型也为string
// 1.第一种方式
let fn:(a:string,b:string)=>string;
fn=function(a,b){
	return a+b;
};
// 2.第二种方式
function fn2(a:string,b:string) :string{
	return a+b;
};

// enum 枚举 创建一个枚举类型的变量存储男女性别
enum Gender{
	male=0,
	famale=1
};
let i:{name:string,gender:Gender};
i={
	name:'孙悟空',
	gender:Gender.male
}
//类型的别名 自定义一个类型别名 用自定义的mytype代替string声明变量
type mytype = string; // type mytype = 1|2|3|4|5
let a1:mytype; // a1:mytype
a1='abc'	// a1=1 || a1=2 ...
类(class) 通过class关键字创建一个类
class Dog{
    //构造函数,创建实例的时候自动调用
    constructor(){
        
    }
}
基本语法
class Dog{
    //静态属性 只能在类访问到的属性 实例访问不到
    //也可以设置静态方法
    static kind:string = '金毛'
    name:string,
    age:number,
    constructor(name:string,age:number){
        this.name=name,
        this.age=age
    }
    sayHello(){
        console.log('汪汪汪!')
    }
}
const dog=new Dog('旺财',7)
console.log(dog) // Dog{name:'旺财',age:7}
console.log(dog.name) // '旺财'
//用类访问静态属性
console.log(Dog.kind) // '金毛'
dog.sayHello() // '汪汪汪'
语法糖形式创建类
//语法糖形式
class Dog{
    //静态属性 只能在类访问到的属性 实例访问不到
    //也可以设置静态方法
    constructor(public name:string,public age:number){
    }
    sayHello(){
        console.log('汪汪汪!')
    }
}
const dog=new Dog('旺财',7)
console.log(dog) // Dog{name:'旺财',age:7}
类的继承(extend,super)
//父类
class Animals{
    name:string,
    constructor(name:string){
        this.name=name,
    }
    sayHello(){
        console.log('动物在叫!') 
}
//子类通过extend关键字继承父类
class Dog extend Animals{
    age:number,
    constructor(name:string,age:number){
        //通过super关键字调用父类的构造函数,把name传过去
        super(name),
        this.age=age,
    }
    //1.第一种
    sayHello(){
        //super相当于调用了父类
        super.sayHello()
    }
    //2.第二种 也可以重写父类方法
    sayHello(){
        console.log('汪汪汪!')
    }
}
const dog = new Dog('旺财',6)
console.log(dog) // Dog{name:'旺财',age:6}
dog.sayHello() // 1.'动物在叫'
dog.sayHello() // 2.'汪汪汪!'
抽象类(abstract)
//将父类定义成抽象类 此时父类只能用来继承 不能用来当作构造函数使用
abstract class Animals{
    name:string,
    constructor(name:string){
        this.name=name,
    }
    //将方法定义为抽象方法 此时子类必须要重写此方法 不然会报错
    abstract sayHello(){
        console.log('动物在叫!') 
}
//子类通过extend关键字继承父类
class Dog extend Animals{
    age:number,
    constructor(name:string,age:number){
        //通过super关键字调用父类的构造函数,把name传过去
        super(name),
        this.age=age,
    }
    sayHello(){
        console.log('汪汪汪!')
    }
}
const dog = new Dog('旺财',6)
console.log(dog) // Dog{name:'旺财',age:6}
dog.sayHello() // 2.'汪汪汪!'
接口(interface)
//类型别名 作用:对对象的结构做了一个限制 类型别名不能重复定义
type:mytype = {
    name:string,
    age:number
}
//限制了obj对象必须要有name和age俩个属性
const obj:mytype = {
    name:'张三',
    age:18
}
//定义接口 也是对对象结构的限制 接口可以重复定义 内容会进行叠加
interface myInterFace{
    name:string,
    age:number
}
interface myInterFace{
    gender:'male'
}
//由于定义了两个相同名字的接口 所有内容进行了叠加 因此这个接口要求有三个属性
const obj:myInterFace = {
    name:'张三',
    age:18,
    gender:male
}
实现接口
//定义接口 接口也可以对类进行限制
//接口中的属性和方法不能有实际的值,相当于抽象类,只限制类的结构
interface myInter{
    name:string,
    age:number,
    sayHello():void
}
//用类来实现接口
    //就是定义类满足接口的结构
class MyClass implements myInter{
    //满足接口的结构
    name:string,
    age:number,
    //构造函数
    constructor(name:string,age:number){
        this.name=name,
        this.age=age
    }
    sayHello(){
        console.log('sss')
    }
}
private(私有属性)
class Animals{
    //private标识符表示该属性只能在此类中访问 外部访问不到
    private _name:string,
    constructor(name:string){
        this.name=name,
    }
    //js语法糖 使外部能够访问到内部的私有属性
    get name(){
        return this._name
    }
     //js语法糖 使外部能够设置内部的私有属性
    set name(value:string){
        this._name = value
    }
    sayHello(){
        console.log('动物在叫!') 
}

const dog = new Dog('旺财')
console.log(dog.name) //报错 不能访问到私有属性 要想访问到可以通过getter 和setter方法
console.log(dog.name) //'旺财' 使用语法糖后能够访问到
dog.name='张三' //使用语法糖后能够在外部改变属性值
console.log(dog.name) // '张三'

泛型(<>)
//当变量类型不明确时,可以定义一个泛型来占位
//当函数调用时,就会知道T的类型是什么
function fn (a:T) :T{
    return a;
}
fn(10) //此时泛型T的类型就是number
fn(10) //也可以在调用的时候手动指定泛型的类型为number

//泛型也可以同时使用多个 
function fn (a:T,b:K) :T{
    console.log(b);
    return a;
}

//使用接口限制泛型的结构
interface myInter{
    length:number;
}
//泛型实现接口直接使用extend关键字
function fn2(a:T) :number{
    return a.length;
}
//此时泛型必须满足接口的结构 也就是必须要有length属性
fn2('123') // 3
fn2({length:5}) // 5
fn2(123) //报错

//当变量类型不明确时,可以定义一个泛型来占位
//当函数调用时,就会知道T的类型是什么
function fn (a:T) :T{
return a;
}
fn(10) //此时泛型T的类型就是number
fn(10) //也可以在调用的时候手动指定泛型的类型为number

//泛型也可以同时使用多个
function fn (a:T,b:K) :T{
console.log(b);
return a;
}

//使用接口限制泛型的结构
interface myInter{
length:number;
}
//泛型实现接口直接使用extend关键字
function fn2(a:T) :number{
return a.length;
}
//此时泛型必须满足接口的结构 也就是必须要有length属性
fn2(‘123’) // 3
fn2({length:5}) // 5
fn2(123) //报错


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/940577.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-17
下一篇 2022-05-17

发表评论

登录后才能评论

评论列表(0条)

保存