TypeScript学习笔记（中）

最新推荐文章于 2024-08-08 07:36:16 发布

sunpermeer

最新推荐文章于 2024-08-08 07:36:16 发布

阅读量115

点赞数

分类专栏：日常总结个人总结文章标签： typescript

本文链接：https://blog.csdn.net/CRCFeng/article/details/112793622

版权

日常总结同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

个人总结

34 篇文章 0 订阅

订阅专栏

TypeScript中类的访问类型
（1）一个简单的类

class Person {
	name: string;
}
const person = new Person();
person.name = "张三";
console.log(person.name);

（2）public访问属性讲解
如果对一个属性不加限制，那么这个属性默认就是public
上面的代码相当于：

class Person {
	public name: string;
}

public意思是允许在类的内部和外部调用。
比如我们在类内部调用sayHello：

class Person {
	public name: string;
	public sayHello() {
		console.log(this.name + 'say hello');
	}
}

这里的sayHello中的this.name就是类的内部调用。
在类的外部调用：

class Person {
	public name: string;
	public sayHello() {
		console.log(this.name + 'say hello');
	}
}
const person = new Person();
person.name = '张三';
person.sayHello();

（3）private访问属性

class Person {
	private name: string;
	public sayHello(){
		console.log(this.name + 'say hello');
	}
}
const p = new Person();
p.name = '张三';//访问私有属性会报错
p.sayHello();

（4）protected访问属性
protected允许在类内部集齐子类中使用。

class Person {
	protected name: string;
	public sayHello() {
		console.log(this.name + 'say hello');
	}
}
class Teacher extends Person {
	public sayHi() {
		console.log(this.name);
	}
}

TypeScript类的构造函数
构造函数就是在类被初始化的时候，自动执行的一个方法。

（1）类的构造函数

class Person {
	public name: string;
	constructor(name: string) {
		this.name = name;
	}
	//简写 相当于定义了一个name，然后再构造函数里进行了赋值
	//constructor(public name: string){
	//}
}
const person = new Person('张三');
console.log(person.name);

（2）类继承中的构造器写法

class Person {
	constructor(public name: string)
}
class Teacher extends Person {
	constructor(public age: number) {
		super('张三');
	}
}
const teacher = new Teacher(18);
console.log(teacher.age);
console.log(teacher.name);

这就是子类继承父类并有构造函数的规则，就是在子类里写构造函数时，必须用super调用父类的构造函数。就算父类没有自定义构造函数，子类也要使用super()来调用，否则会报错。

TypeScript类的Getter、Setter和static的使用
访问类型中的private属性可以通过Setter和Getter来修改和访问，实现对象的封装。
（1）类的Getter和Setter

getter属性的关键字是get，后面跟着类似方法的东西，但是它并不是方法，归根到底还是属性。
```
class Person {
	constructor(private _age: number){
	}
	get age() {
		return this._age;
	}
	set age(age: number) {
		this._age = age;
	}
}
const p = new Person(18);
console.log(p.age);
p.age = 20;
console.log(p.age);
```
（2）类中的static
用static声明的属性和方法，不需要进行声明对象就可以直接使用：
```
class Girl {
	static sayHi() {
		return "hi world";
	}
}
console.log(Girl.sayHi());
```

类的只读属性和抽象类

（1）readonly属性

class Person {
	readonly _name: string;
	constructor(name: string) {
		this._name = name;
	}
}
const person = new Person('张三');
//person._name = '李四';//由于_name是readonly属性，所以不能在外部修改
console.log(person._name);

（2）抽象类的使用
抽象类的关键词是abstract

abstract class Person {
	abstract skill() //因为没有具体方法，所以我们不写括号
}

有了这个抽象类，三个类就可以继承这个类，然后会要求不需实现skill()方法：

class Waiter extends Girl {
	skill() {
		console.log('倒水');
	}
}
class BaseTeacher extends Girl {
	skill() {
		console.log('按摩');
	}
}
class SeniorTeacher extends Girl {
	skill() {
		console.log('SPA');
	}
}

联合类型展示
所谓联合类型，可以认为一个变量可能有两种或两种以上的类型。

interface Waiter {
	say: () => {}
}
interface Teacher {
	skill: () => {}
}
function selectWho(person: Waiter | Teacher) {
	person.say()；
}

但是这时候问题来了，如果直接写一个这样的方法，就会报错，因为selectWho不能准确判断联合类型的实例到底是什么
这时候引出一个概念叫类型保护。
①类型断言

function selectWho(person: Waiter | Teacher) {
	if(person as Teacker) {
		person.skill();
	} else {
		(person as Waiter).say();
	}
}

②in语法

function selectWho(person: Waiter | Teacher) {
	if("skill" in animal) {
		person.skill();
	} else {
		person.say();
	}
}

③typeof语法

function add(first: string | number, second: string | number) {
	return first + second;
}

function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
	return `${first}${second}`;
}
return first + second;
}

④instanceof语法
保护的是一个对象，可以用instanceof

class NumberObj {
	count: number;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
	if(first instanceof NumberObj && second instanceof NumberObj) {
		return first.count + second.count;
	}
	return 0;
}

Enum枚举类型讲解

enum Status {
	MASSAGE, //0
	SPA, //1
	DBJ //2
}
function getServe(status: any) {
	if(status === Status.MASSAGE) {
		return "message";
	} else if(status === Status.SPA) {
		return 'spa'
	}
}

枚举值默认是从0开始的。

泛型
泛型的定义使用<>（尖括号）进行定义

（1）TypeScript函数泛型

function join<T>(first: T, second: T) {
	return `${first}${second}`;
}
join<string>("a","b")
//如果是number类型
join<number>(1, 2);

（2）泛型中数组的使用

function fun<T>(params: T[]) {
	return params;
}
fun <string>["123", "456"]
//第二种写法
function fun<T>(params: Array<T>) {
	return params;
}
fun< string > ['123', '456'];

（3）多个泛型的定义

function join<T, P>(first: T, second: P) {
	return `${first}${second}`;
}
join<number, string> (1, "2");

（4）泛型的类型推断

function join<T, P> (first: T, second: P) {
	return `${first}${second}`;
}
join(1, "2");

（5）类的泛型

class SelectPerson<T> {
	constuctor(private person: T[]) {};
	getPerson(index: number): T {
		return this.person[index];
	}
}
const selectPerson = new SelectPerson <string> (['张三', '李四', '王五']);
console.log(selectPerson.getPerson(1));

（6）泛型中的继承

interface Person{
	name: string;
}
class SelectGirl<T extends Person> {
	constructor(private people: T[]){};
	getPerson(index: number): string {
		return this.people[index].name
	}
}
const selectGirl = new SelectGirl([
	{name: '张三'},
	{name: '李四'},
	{name: '王五'}
])
console.log(selectGirl.getPerson(1));

（7）泛型约束
泛型可以使任意类型，可以是对象、字符串、布尔、数字都是可以的。
但是现在要求泛型必须是string或者number类型。

class SelectGirl<T> {
	constructor(private girls: Array<T>) {};
	getGirl(index: number): T {
		return this.girls[index];
	}
}
const selectGirl = new SelectGirl<string>(['张三', '李四']);
console.log(selectGirl.getGirl(1));

class SelectGirl<T extends number | string> {//可以限制只输入nuber或者string
	
}

命名空间-Namespace
命名空间这个语法，很类似编程中的模块化思想，比如webpack打包的时候每个模块有自己的环境，不会污染其他模块，不会产生全局变量。命名空间跟这个很类似。
命名空间的关键字是namespace，需要暴露出去的类可以使用export关键词，这个只有暴露出去的类时全局的，其他的就不会再全局污染了：

namespace Home {
	class Header {
		constructor() {
  			const elem = document.createElement("div");
      		elem.innerText = "This is Header";
	  		document.body.appendChild(elem);
		}
	}

	class Content {
		constructor() {
	    const elem = document.createElement("div");
	    elem.innerText = "This is Content";
	    document.body.appendChild(elem);
	  }
	}

	class Footer {
		constructor() {
	    const elem = document.createElement("div");
	    elem.innerText = "This is Footer";
	    document.body.appendChild(elem);
	  }
	}

	export class Page {
		constructor() {
			constructor() {
				new Header();
				new Content();
				new Footer();
			}
		}
	}
}

new Home.Page();

（1）子命名空间

namespace Components {
	export namespace SubComponents{
		export class Test {};
	}
}

个人理解：命名空间中只有export的内容在外部才能访问

TypeScript如何使用import语法

//components.ts
export class Header {
	constructor() {
		const elem = document.createElement("div");
		document.body.appendChild(elem);
	}
}
//引入
import { Header } from "./components"

sunpermeer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript学习笔记（中）

TypeScript中类的访问类型（1）一个简单的类class Person { name: string;}const person = new Person();person.name = "张三";console.log(person.name);
复制链接

扫一扫