TypeScript再认识
Posted 曹豆芽
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了TypeScript再认识相关的知识，希望对你有一定的参考价值。
TypeScript再认识
最近也是开始学到了Ts的后面的知识点，豆芽也是在这里去总结了一下，加深自己的印象。说到Ts的进阶知识，就要先说一说Ts的接口。
接口(Interface)
接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。
interface Person
name: string;
sayHello():void;
function fn(per: Person)
per.sayHello();
fn(name:'曹豆芽', sayHello() console.log(`Hello, 我是 $this.name`));
接口的属性
只读状态(readonly)
interface beanSprouts
readonly name: string
let bean: beanSprouts =
name: '曹豆芽'
bean.name = '豆芽菜' // 此刻会报错，此刻bean为可读的状态，不能赋值
可选状态(?)
interface beanSprouts
name: string,
age?: number
let bean: beanSprouts =
gender: '曹豆芽'
// 此刻不赋值 age 属性，因为beanSprouts是可选的
// 当我们不一定去设置对象当某一个值当时候，我们可以使用?去表示当前属性为可选状态
描述属性
interface beanSprouts
height: number;
width: number;
[propName: string]: number//此刻我们所有属性的值为number类型，key为string类型
继承(extends)
通过继承可以将父接口的规定引入到当前接口中
interface bean
height:number;
interface beanSprouts extends bean
name: string;
age: number;
let sprouts: beanSprouts =
age: 22,
name: '曹豆芽',
height:188//此刻sprouts初始化属性，要加上height,不然报错
类使用接口
interface beanSprouts
name: string;
sayHello():void;
class bean implements beanSprouts
constructor(public name: string)
sayHello()
console.log('大家好，我是'+this.name);
说完接口，那么我们讲讲泛型（Generic）
泛型(Generic）
泛型定义
定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。
function beanSprouts(arg: any): any
return arg;
//使用any类型会导致这个函数可以接收任何类型的arg参数，这样就丢失了一些信息：传入的类型与返回的类型应该是相同的。如果我们传入一个数 字，我们只知道任何类型的值都有可能被返回。
//此刻beanSprouts函数有一个参数类型不确定。要使函数的返回值的类型和参数的类型是相同的，我们可以去使用泛型，
//使用泛型
function beanSprouts<T>(arg: T): T
return arg;
//使用上面的泛型
//使用泛型我们可以二种方法去使用
//直接使用
beanSprouts(22);
//定义类型使用
beanSprouts<number>(22);
我们也可以同时去定义多个泛型
function beanSprouts<T, K>(age: T, name: K): K//使用多个泛型，只需逗号隔开
return name;
test<number, string>(22, "曹豆芽");
泛型约束
function beanSprouts<T>(age: T): number
return age.length;//此刻length这个属性就会报错
//这时我们需要实现一个接口让泛型有了这个属性，就不会去报错了。
interface bean
length: number;
function beanSprouts<T extends bean>(age: T): number
return age.length;//使用 extends指定泛型类型的继承关系
类使用泛型
class beanSprouts<T>
prop: T;
constructor(prop: T)
this.prop = prop;
类(class)
类的定义
类我们可以理解为对象的模型。
class 类名
属性名: 类型;
constructor(参数: 类型)
this.属性名 = 参数;
方法名()
....
//例子
class beanSprouts
name: string;
age: number;
constructor(name: string, age: number)
this.name = name;
this.age = age;
sayHello()
console.log(`大家好，我是$this.name`);
//使用
const bean = new Person('曹豆芽', 22);
bean.sayHello();
继承
class beanSprouts
name: string;
age: number;
constructor(name: string, age: number)
this.name = name;
this.age = age;
class bean extends beanSprouts
learn()
console.log(`$this.name在学ts！`);
const bean = new learn('曹豆芽', 22);
bean.learn();
修饰符
Ts中属性具有三种修饰符：
- public（默认值），可以在类、子类和对象中修改
- protected ，可以在类、子类中修改
- private ，可以在类中修改
public
class Person
public name: string; // 写或什么都不写都是public
public age: number;
constructor(name: string, age: number)
this.name = name; // 可以在类中修改
this.age = age;
sayHello()
console.log(`大家好，我是$this.name`);
class Employee extends Person
constructor(name: string, age: number)
super(name, age);
this.name = name; //子类中可以修改
const p = new Person('曹豆芽', 22);
p.name = '豆芽菜';// 可以通过对象修改
protected
class Person
protected name: string;
protected age: number;
constructor(name: string, age: number)
this.name = name; // 可以修改
this.age = age;
sayHello()
console.log(`大家好，我是$this.name`);
class Employee extends Person
constructor(name: string, age: number)
super(name, age);
this.name = name; //子类中可以修改
const p = new Person('曹豆芽', 22);
p.name = '豆芽菜';// 不能修改
private
class Person
private name: string;
private age: number;
constructor(name: string, age: number)
this.name = name; // 可以修改
this.age = age;
sayHello()
console.log(`大家好，我是$this.name`);
class Employee extends Person
constructor(name: string, age: number)
super(name, age);
this.name = name; //子类中不能修改
const p = new Person('曹豆芽', 22);
p.name = '豆芽菜';// 不能修改
类的只读属性
如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
类的属性存取器
-
对于一些不希望被任意修改的属性，可以将其设置为private
-
直接将其设置为private将导致无法再通过对象修改其中的属性
-
我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
-
读取属性的方法叫做setter方法，设置属性的方法叫做getter方法
class beanSprouts private userName: string; constructor(name: string) this.userName = name; get name() return this.userName; set name(name: string) this.userName = name; const bean = new beanSprouts('曹豆芽'); console.log(bean.name); // 通过getter读取name属性 bean.name = '豆芽菜'; // 通过setter修改name属性
静态属性
-
静态属性（方法），也称为类属性。使用静态属性无需创建实例，通过类即可直接使用
-
静态属性（方法）使用static开头
class beanSprouts
static PI = 3.1415926;
static sum(num1: number, num2: number)
return num1 + num2
console.log(beanSprouts.PI);
console.log(beanSprouts.sum(123, 456));
this
在类中，使用this表示当前对象
至此，这一篇也结尾了，后面的豆芽也是会对于高阶知识进行学习和总结，最新的总结也是会同步于我的公众号，感兴趣的也可以关注看看。
以上是关于TypeScript再认识的主要内容，如果未能解决你的问题，请参考以下文章