快速上手TS（自学笔记版）

TS中的类型赋值

格式：let a:类型；

注意：如果变量的类型和赋值是同时进行的，ts会自动识别变量的类型

比如 let a=false

此时ts将a视为boolean，若 a=“字符串”;则会报错。

函数中也可声明变量类型

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

ts中可以使用字面量直接赋值

let b:"male" | "female"

此时b只能为male或female

也可以通过字面量的方式限制变量类型，比如

let b : boolean | string ;

b=false;

b="字符串";

any 任意类型，相当于js

尽量不用any

类型断言

s=e as string;

s=<string>e;

非空断言

在变量后面加 ! 表示不会为undefined和null

void 类型

以函数为例，表示函数的返回值为空

never 类型

什么都不返回，连空都不返回

object

普通对象

{}表示对象类型，多用于指定对象中的属性

let person:{name:string};

表示person只有一个属性为name

let person:{name:string,age?:number};

?代表属性是可选的，此时person中有无age属性都可以，但必须有name属性

let person:{name:string,[propName:string]:any};

表示person中必须有name属性，其他所有属性都是可选的

函数对象

let fn:(a:number,b:number)=>number;

表示函数接收两个形参，a为number，b为number，返回值为number

数组

两种表示类型

let arr:number[];

let arr:Array <number>;

元组：固定长度的数组

语法：let arr:[string,string];

枚举

enum Gender{
	male=0,
	female=1
}
let person:{name:string,gender:Gender}
person={
	name:"孙悟空",
	genger:Gender.male
}

&同时

let person :{name:string}&{age:number};

type类型

type mytype= 1 | 2 | 3 | 4 | 5 ;

let a:mytype;

let b:mytype;

TS配置文件

tsconfig.json

include：那些文件需要被编译

路径：**任意目录，*任意文件

exclude 不需要被编译的文件

compilerOptions

target:用来指定ts被编译为ES的版本

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

lib:指定项目中要使用的库

outDir

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

outFile(不常用)

将代码合并为一个文件

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

allowJS

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

checkJS

是否检查js代码是否符合语法规范。默认为false

removeComments

是否移除注释

noEmit

不生成编译后的问价

noEmitOnerror

当有错误时不生成编译后的文件

语法检查相关选项

strict

所有严格检查总开关

alwaysStrict

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

noImplicitAny

不允许隐式的any类型

noImplicitThis

不允许不明确类型的this

strictNullChecks

严格的检查空值

小技巧：如果不知道配置项中可以写什么，可以先写一个错的，查看报错信息

使用webpack打包ts

初始化 npm init -y

目的：生成package.json

安装依赖

四个核心包：webpack,webpack-cli,typescript,ts-loader

命令：npm i -D webpack webpack-cli typescript ts-loader

webpack配置文件

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',  // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'),  // 输出目录
    filename: 'bundle.js'  // 输出文件名
  },
  module: {
    rules: [
      {
        test: /\.ts$/,  // 对于所有.ts文件
        exclude: /node_modules/,  // 排除node_modules文件夹
        use: {
          loader: 'ts-loader' 
        }
      }
    ]
  },
  devServer: {
    contentBase: './dist',  // 开发服务器从哪个目录提供内容
    port: 8080,  // 端口号
    open: true  // 自动打开浏览器
  }
};

安装插件：npm i -D html-webpack-plugin

作用：自动生成html文件并引入js

需要在webpack.config.js中配置

安装webpack内置服务器 : npm i -D webpack-dev-server

需要在package.json中配置

面向对象

程序中的所有操作都要通过对象来完成

类

class关键字

注意：

readonly只读属性

static 静态属性

只能被类访问而不能被实例访问

构造函数

constructor ( 参数1 , 参数2 ){}

继承

extends关键字

super关键字

多用于子类想添加其他属性时，constructor里面必须调用一下super

super表示父类

class Dog extends Animals{ 
    age: number
    constructor(name:string,age:number) { 
        super(name)
        this.age=age
    }
}

抽象类

abstract关键字

抽象类只能用来定义，可以被继承，不能被实例

抽象方法可以规定一下结构，在子类里必须被重写

接口

接口中所有的属性都不能有实际值，所有方法都为抽象方法

定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

interface myInter { 
    name: string
    say():void
}
class Myclass implements myInter{ 
    name: string
    constructor(name:string) { 
        this.name=name
    }
    say() { 
        console.log("你好")
    }
}

属性的封装

public公共属性，可读可写

private私有属性，不能够被读写，但可以通过get,set方法读写

class Person{
    public _name: string
    private _age: number
    constructor(name: string, age: number) { 
        this._name = name
        this._age=age
    }
    get age() { 
        return this._age
    }
    set age(age) { 
        if(age>=0)
        this._age=age
    }
}
let p = new Person("张三", 18)
p.age=-30

protected受保护的

只能在类和子类里访问修改，在实例里不行

可以直接将属性定义在构造函数中

class Person{
	constructor(public name:string,public age:number)
}

等同于

class Person{
	public name:string
	public age:number
	constructor(name:string,age:number){
		this.name=name
		this.age=age
	}
}

泛型

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

function fn<T>(a:T):T { 
    return a
}

可以指定泛型

fn<string>("hello")

可以使用多个泛型

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

可以限制泛型的范围，比如限制泛型是某个接口的子类

interface myInter { 
    name:string
}
function fn2<T extends myInter>(a:T):T{ 
    return a
}
let p = { name: "张三", age: 18 }
let result = fn2(p)
console.log(result)