客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
一、TypeScript 函数1、TypeScript 函数与 JavaScript 函数的区别：我们主要看一下不同的
2、函数有类型 let IdGenerator: (chars: string, nums: number) => string;
function createUserId(name: string, id: number): string {
return name + id;
}
IdGenerator = createUserId;
3、函数返回值 function function_name():return_type {
return value;
}
4、带参数函数 function func_name( param1 [:datatype], param2 [:datatype]) { }
5、带可选参数和默认参数 在 TypeScript 函数里，如果我们定义了参数，则我们必须传入这些参数，除非将这些参数设置为可选，可选参数使用问号标识 ？。 function buildName(firstName: string, lastName: string) {
return firstName + " " + lastName;
}
let result1 = buildName("Bob"); // 错误，缺少参数
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
将 lastName 设置为可选参数： function buildName(firstName: string, lastName?: string) {
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
let result1 = buildName("Bob"); // 正确
let result2 = buildName("Bob", "Adams", "Sr."); // 错误，参数太多了
let result3 = buildName("Bob", "Adams"); // 正确
注意：可选参数必须跟在必需参数后面。 如果上例我们想让 firstName 是可选的，lastName 必选，那么就要调整它们的位置，把 firstName 放在后面。如果都是可选参数就没关系。 我们也可以设置参数的默认值，这样在调用函数的时候，如果不传入该参数的值，则使用默认参数，语法格式为： function function_name(param1[:type],param2[:type] = default_value) { }
注意：参数不能同时设置为可选和默认。 6、剩余参数 有一种情况，我们不知道要向函数传入多少个参数，这时候我们就可以使用剩余参数来定义。剩余参数语法允许我们将一个不确定数量的参数作为一个数组传入。 function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
函数的最后一个命名参数 restOfName 以 ... 为前缀，它将成为一个由剩余参数组成的数组，索引值从0（包括）到 restOfName.length（不包括）。 7、函数重载 重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。 每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。 比如：参数类型不同、参数数量不同、参数类型顺序不同 二、TypeScript 接口在面向对象语言中，接口是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类去实现。TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。 1、接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。 我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。 customer 实现了接口 IPerson 的属性和方法。 interface IPerson {
firstName:string,
lastName:string,
sayHi: ()=>string
}
var customer:IPerson = {
firstName:"Tom",
lastName:"Hanks",
sayHi: ():string =>{return "Hi there"}
}
2、对象的形状 interface Person {
name: string;
age: number;
}
let semlinker: Person = {
name: "***",
age: 33,
};
3、可选 | 只读属性 interface Person {
readonly name: string;
age?: number;
}
只读属性用于限制只能在对象刚刚创建的时候修改其值。此外 TypeScript 还提供了 let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!
作为变量使用的话用 4、任意属性 有时候我们希望一个接口中除了包含必选和可选属性之外，还允许有其他的任意属性，这时我们可以使用 索引签名 的形式来满足上述要求。 interface Person {
name: string;
age?: number;
[propName: string]: any;
}
const p1 = { name: "***" }; // 不用可选属性
const p2 = { name: "***", age: 5 };
const p3 = { name: "***", sex: 1 } // 使用了任意属性 sex
5、接口与类型别名的区别 （1）接口和类型别名都可以用来描述对象的形状（Objects）或函数签名（Functions） // 类型别名
type Point = {
x: number;
y: number;
};
type SetPoint = (x: number, y: number) => void;
（2）与接口类型不一样，类型别名可以用于一些其他类型，比如原始类型、联合类型和元组： // primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
（3）扩展：接口和类型别名都能够被扩展，但语法有所不同。此外，接口和类型别名不是互斥的。接口可以扩展类型别名，而反过来是不行的。 // 接口继承接口
interface PartialPointX { x: number; }
interface Point extends PartialPointX {
y: number;
}
// 类型别名继承类型别名
type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
// 接口继承类型别名
type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }
// 类别别名继承接口
interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };
（4）实现：类可以以相同的方式实现接口或类型别名，但类不能实现使用类型别名定义的联合类型 （5）声明合并：与类型别名不同，接口可以定义多次，会被自动合并为单个接口。 interface Point { x: number; }
interface Point { y: number; }
const point: Point = { x: 1, y: 2 };
6、接口继承：接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。 （1）继承使用关键字 extends。 （2）单接口继承语法格式：Child_interface_name extends super_interface_name （3）多接口继承语法格式：Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name（继承的各个接口使用逗号 , 分隔） 三、TypeScript 类1、类的属性与方法：静态属性、成员属性、构造函数、静态方法、成员方法 在面向对象语言中，类是一种面向对象计算机编程语言的构造，是创建对象的蓝图，描述了所创建的对象共同的属性和方法。在 TypeScript 中，我们可以通过 class Greeter {
// 静态属性
static cname: string = "Greeter";
// 成员属性
greeting: string;
// 构造函数 - 执行初始化操作
constructor(message: string) {
this.greeting = message;
}
// 静态方法
static getClassName() {
return "Class name is Greeter";
}
// 成员方法
greet() {
return "Hello, " + this.greeting;
}
}
let greeter = new Greeter("world");
2、ECMAScript 私有字段 class Person {
#name: string;
constructor(name: string) {
this.#name = name;
}
greet() {
console.log(`Hello, my name is ${this.#name}!`);
}
}
let semlinker = new Person("Semlinker");
semlinker.#name;
// ~~~~~
// Property '#name' is not accessible outside class 'Person'
// because it has a private identifier.
与常规属性（甚至使用
getter 和 setter 方法来实现数据的封装和有效性校验，防止出现异常数据。
TypeScript支持通过getters/setters来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。 let passcode = "Hello TypeScript";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "Hello TypeScript") {
this._fullName = newName;
} else {
console.log("Error: Unauthorized update of employee!");
}
}
}
4、类的继承 继承（Inheritance）是一种联结类与类的层次模型。指的是一个类（称为子类、子接口）继承另外的一个类（称为父类、父接口）的功能，并可以增加它自己的新功能的能力，继承是类与类或者接口与接口之间最常见的关系。在 TypeScript 中，我们可以通过 class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
}
class Dog extends Animal {
bark() {
console.log('Woof! Woof!');
}
}
const dog = new Dog();
dog.bark();
dog.move(10);
dog.bark();
类的继承：TypeScript 支持继承类，即我们可以在创建类的时候继承一个已存在的类，这个已存在的类称为父类，继承它的类称为子类。: 类继承使用关键字 extends，子类除了不能继承父类的私有成员(方法和属性)和构造函数，其他的都可以继承。 TypeScript 一次只能继承一个类，不支持继承多个类，但 TypeScript 支持多重继承（A 继承 B，B 继承 C）。 语法格式如下：class child_class_name extends parent_class_name 需要注意的是子类只能继承一个父类，TypeScript 不支持继承多个类，但支持多重继承，如下实例 class Root {
str:string;
}
class Child extends Root {}
class Leaf extends Child {} // 多重继承，继承了 Child 和 Root 类
var obj = new Leaf();
obj.str ="hello"
console.log(obj.str)
5、访问控制修饰符：公共，私有、受保护与只读的修饰符 TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
以下实例定义了两个变量 str1 和 str2，str1 为 public，str2 为 private，实例化后可以访问 str1，如果要访问 str2 则会编译错误。 class Encapsulate {
str1:string = "hello"
private str2:string = "world"
}
var obj = new Encapsulate()
console.log(obj.str1) // 可访问
console.log(obj.str2) // 编译错误， str2 是私有的
abstract 关键字声明的类，我们称之为抽象类。抽象类不能被实例化，因为它里面包含一个或多个抽象方法。所谓的抽象方法，是指不包含具体实现的方法。抽象类不能被直接实例化，我们只能实例化实现了所有抽象方法的子类。
7、类方法重载：对于类的方法来说，它也支持重载。 8、继承类的方法重写 类继承后，子类可以对父类的方法重新定义，这个过程称之为方法的重写。 其中 super 关键字是对父类的直接引用，该关键字可以引用父类的属性和方法。 class PrinterClass {
doPrint():void {
console.log("父类的 doPrint() 方法。")
}
}
class StringPrinter extends PrinterClass {
doPrint():void {
super.doPrint() // 调用父类的函数
console.log("子类的 doPrint()方法。")
}
}
9、把类当做接口使用 类定义会创建两个东西：类的实例类型和一个构造函数。 因为类可以创建出类型，所以你能够在允许使用接口的地方使用类。 class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = {x: 1, y: 2, z: 3};
（1）static 关键字：用于定义类的数据成员（属性和方法）为静态的，静态成员可以直接通过类名调用 （2）instanceof 运算符：用于判断对象是否是指定的类型，如果是返回 true，否则返回 false class Person{ }
var obj = new Person()
var isPerson = obj instanceof Person;
console.log("obj 对象是 Person 类实例化来的吗？ " + isPerson); // true
|
请发表评论