TypeScript

Posted 2022-10-16 鲸渔要加油

文章目录

• 1、什么是 TypeScript
• 2、基础类型
• 3、类
• 4、constructor 构造函数
• 5、extends 继承
• 6、super
• 7、抽象类
• 8、接口
• 9、属性的封装
• 10、泛型

1、什么是 TypeScript

TypeScript 是 javascript 的一个超集，主要提供可选的静态类型，类和接口

2、基础类型

1、数字 let a: number

2、字符串 let a: string

3、布尔 let a: boolean

4、字面量 let a: 123

5、联合

let a: number | string // 表示或
let a: number & string // 表示且，满足的这种类型不存在，没有意义

let b: name: string & age: number
b = name: '远近渔', age: 18

6、any 关闭类型检测，会影响其他变量

7、unknow 不会影响其他变量，不能直接赋值给其他变量

let e = unknown
let s = string
// 如果想赋值则需要判断
if(typeof e === 'string')
	s = e

// 还可以使用类型断言
s = e as string
s = <string>e

8、void 空值，可以是undefined和null，函数返回值

function fn(): string | number 限制函数返回值

9、Never 没用值，永远不会返回结果

10、object let a:object 不实用因为都是对象

let b: name: string
b = name: '远近渔' // 必须这样才正确

let b: name?: string
b =  // 加问好就变成可选值，可写或不写

// propName是自定义名称，后面可随意添加，这里只能写any或string要符合前面name的类型
let b = name: string, [propName: string]: any

// 用箭头函数来规定函数的参数和返回值
ler c: (a: number, b: number) => number
c = function(n1, n2): number
	return n1 + n2

11、arrary

// 表示字符串数组，两种方式
let a: string[]
let a: Arrary<string>

12、tuple 元组，就是固定长度的数组

let a: [string, string]
a = ['远近渔', '鱼鱼鱼']

13、enum 枚举

enum Gender
	Male,
	Female = 1 // 可以写 = 1 也可以不写，不写自动为索引


let a: name: string, gender: Gender
a = 
	name: '远近渔'
	gender: Gender.Male

// 判断
console.log(a.gender === Gender.Male)

14、类型的别名 type

type myType = string
let m: myType

type k = 1 | 2 | 3 | 4 | 5
let l: k

3、类

面像对象，这里类就是对象的模型，相当于模具

对象主要包含了两部分，属性 和 方法

属性

class Person
	// 这种叫做实例属性，只有new了之后在 实例.属性 访问
	name: string = '远近渔'
	static age: number = 18

const per = new Person()

per.name 实例属性，只能实例访问
Person.age 类属性 也叫静态属性 用 static 关键字来定义，只能类访问

前面加 static 就是静态属性，只能类访问
前面加 readonly 就是只读属性，无法修改
前面加 static readonly 静态只读，readonly 要放在 static 的后面
前面加 public 默认公共的，属性可以在任意位置修改
前面加 private 私有属性只能在类内部访问修改
前面加 protected 受保护的属性，只能在当前类和当前类的子类中访问或修改

方法

class Person
	sayHello() 
		console.log('远近渔')
	

const per = new Person()

静态定义和属性一样

4、constructor 构造函数

constructor 会在 new 一个实例的时候自动调用，可传参

class Dog 
	name: string;
	age: number;
	constructor(name: string, age: number) 
		this.name = name
		this.age = age
	
	back() 
		alert('wang')
	


const dog = new Dog('小黑', '3')

5、extends 继承

class Animal 
	name: string;
	age: number;
	constructor(name: string, age: number) 
		this.name = name
		this.age = age
	
	back() 
		console.log('who')
	

// 继承后子类拥有父类的所有方法和属性
// 重名方法会覆盖，叫做方法的重写
class Dog extends Animal 
class Cat extends Animal 

const dog = new Dog('小黑', '3')

6、super

class Animal 
	name: string;
	constructor(name: string) 
		this.name = name
	
	back() 
		console.log('who')
	


class Dog extends Animal 
	age: number;
	// 如果子类写了构造函数，相当于覆盖了夫类的构造函数
	// 父类构造函数的操作就失效了，所以要用 super() 调用
	constructor(name: string, age: number) 
		super(name); // 调用父类的构造函数
		this.age = age
	
	back() 
		// 在类方法中 super 就表示当前类的父类
		// 像当于调用父类的方法
		super.back()
	


const dog = new Dog('小黑', '3')

7、抽象类

一个类如果只用来继承，不希望用来创建对象
可以使用 abstract
抽象类中可以添加抽象方法

// 以 abstract 开头的类是抽象类
// 抽象类和其他类的区别不大，只是不能用来创建对象
abstract class Animal 
	name: string;
	constructor(name: string) 
		this.name = name
	
	// 定义一个抽象方法，返回值为空
	// 抽象方法没有方法体，只能定义在抽象类里面
	// 子类必须对抽象方法进行重写，强制要你实现方法，不然报错
	abstract back():void;

8、接口

之前的 type 和接口很像

// 描述一个对象的类型
type myType = 
	name: string,
	age: number,


const obj: myType = 
	name: 'sss',
	age: 111

接口类似于抽象类
接口用来定义一个类结构
用来定义一个类中应该包含哪些属性和方法
同时也可以当成类型声明 type 去使用
但是 type 只能声明一次，interface 可以多次

interface myInterface 
	name: string;
	age: number;

interface myInterface 
	gender: string


const obj: myInterface = 
	name: 'yyy',
	age: 18,
	gender: 'y'

接口可以在定义类的时候去限制类的结构
接口中的所有属性都不能有实际的值，只定义对象的结构
在接口中所有的方法都是抽象方法

定义类时，可以实现一个接口用 implements

interface myInterface 
	name: string;
	sayHello(): void;


// 定义类时，可以实现一个接口
// 实现接口就是使类满足接口的要求
class MyClass implements myInterface 
	name: string;
	
	constructor(name: string) 
		this.name = name
	
	
	sayHello() 
		console.log('yyy')
	

9、属性的封装

属性可以被任意修改将会导致对象的数据非常不安全
前面加 private 私有属性只能在类内部访问修改
可以暴露方法来修改，方法里面就可控了，可以写判断

class Person 
	private name: string;
	private age: number;

	constructor(name: string, sge: number) 
		this.name = name;
		this.age = age
	
	// 定义方法，用来获取 name 属性
	getName() 
		return this.name
	
	// 定义方法，用来设置 name 属性
	setName(value: string) 
		this.name = value
	


const per = new Person('yyy', 18)

per.getName()
per.setName('yyy')

// TS 中设置的了更简洁的方法的方式
get name() 
	return this.name


set name(value: string) 
	this.name = value


// 直接
per.name 拿值
per.name = 'yyy' 改值

// 复杂定义属性的写法
class a 
	name: string;
	age: number

	constructor(name: string, age: number) 
		this.name = name;
		this.age = age;
	


// 简单写法等于上面
class a 
	// 可以直接将属性定义在构造函数中
	// 记得加上修饰符 public
	constructor(public name: string, public age: number) 
	

10、泛型

定义函数或者类时遇到不确定类型的时候可以使用泛型

<T> 尖括号里面定义，相当于定义变量
a: T 使用

// a 传进来是什么类型，T就是什么类型
function fn<T>(a: T): T 
	return a

// 可以直接调用具有泛型的函数
fn(10) // 这是用到了TS的类型制动推断
fn<string>('yyy') // 手动指定泛型 T 为 string

指定多个泛型

// 可以指定多个泛型
function fn<T, K>(a: T, b: K): T 
	return a;

fn(123, 'yyy')
fn<number, string>(123, 'yyy')

接口定义泛型

// 用接口限制泛型的范围
interface Inter 
	// 被指定的变量必须有length属性
	length: number;

// T extends Inter 表示泛型T必须是Inter的实现类(子类)
function fn<T extends Inter>(a: T): number 
	return a.length

fn('123')
fn(length: 10)

除了以上的函数使用泛型，类中也可以使用泛型

class MyClass<T> 
	name: T;
	constructor(name: T) 
		this.name = name
	


const mc = new MyClass('yyy') // 可以让他自动判断
const mc = new MyClass<string>('yyy') // 也可以写一个尖括号直接告诉他

总而言之，泛型就是在我们类型不明确的时候整一个变量，用这个