数据分析对网站建设的重要性,福田营销型网站建站推广外包,建站软件免费试用,宁波网站制作网站文章目录 前言ts和js的区别#xff1f;什么是Typescript的方法重载#xff1f;Typescript中never 和 void 的区别#xff1f;typescript 中的 is 关键字有什么用#xff1f;TypeScript支持的访问修饰符有哪些#xff1f;如何定义一个数组#xff0c;它的元素可能是字符串… 文章目录 前言ts和js的区别什么是Typescript的方法重载Typescript中never 和 void 的区别typescript 中的 is 关键字有什么用TypeScript支持的访问修饰符有哪些如何定义一个数组它的元素可能是字符串类型也可能是数值类型Typescript中泛型是什么TypeScript 的内置数据类型有哪些ts中any和unknown有什么区别如何将 unknown 类型指定为一个更具体的类型说说对 TypeScript 中命名空间与模块的理解区别ts中的枚举类型typeScript中的方法重写是什么?什么是TypeScript映射文件Typescript中 interface 和 type 的差别是什么说一说TypeScript中的类及其特性。Typescript中什么是装饰器它们可以应用于什么TypeScript mixin。后言 前言 hello world欢迎来到前端的新世界 当前文章系列专栏Typescript ‍博主在前端领域还有很多知识和技术需要掌握正在不断努力填补技术短板。(如果出现错误感谢大家指出) 感谢大家支持您的观看就是作者创作的动力 ts和js的区别 ts和js的区别 什么是Typescript的方法重载 在TypeScript中方法重载Method Overloading是一种允许函数在不同参数数量或参数类型下具有不同的返回类型或行为的特性。这允许您以一种更灵活的方式定义函数并根据传入的参数类型或数量来选择适当的行为或返回类型。 方法重载通常用于提供更加严格的类型检查和更好的类型推断以及在代码中提供更清晰的接口。它使得函数可以根据不同的参数签名提供不同的实现方式而无需使用额外的运行时检查。 要定义方法重载您需要按照以下步骤进行 首先定义一个函数的多个签名overload signatures。每个签名包含一个参数列表和一个返回类型。然后定义一个实际的函数体这个函数体实现了多个签名所涵盖的不同情况。 这里有一个简单的例子演示了如何在TypeScript中使用方法重载 function greet(name: string): string; function greet(age: number): string; function greet(value: string | number): string {if (typeof value string) {return Hello, ${value}!;} else {return You are ${value} years old!;} }console.log(greet(Lydia)); // Output: Hello, Lydia! console.log(greet(30)); // Output: You are 30 years old!上面定义了greet函数的两个不同的签名一个接受string类型参数另一个接受number类型参数。然后我们实现了一个函数体根据传入的参数类型进行相应的处理。 使用方法重载TypeScript能够更好地检查函数调用以确保传递的参数类型与预期的类型相符并提供适当的类型推断从而增加代码的类型安全性和可读性。 Typescript中never 和 void 的区别 void 表示没有任何类型可以被赋值为 null 和 undefined。never 表示一个不包含值的类型即表示永远不存在的值。拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回无法终止或会抛出异常。 typescript 中的 is 关键字有什么用 TypeScript 中的 is 关键字用于类型保护可以在运行时判断一个对象是否属于某个类型并根据不同的类型执行不同的逻辑。 具体来说is 关键字通常和 instanceof 运算符一起使用用于判断一个对象是否是某个类的实例。例如 class Animal {name: string;constructor(name: string) {this.name name;} }class Dog extends Animal {breed: string;constructor(name: string, breed: string) {super(name);this.breed breed;} }function isDog(animal: Animal): animal is Dog {return (animal as Dog).breed ! undefined; }let a1 new Animal(Tom); let d1 new Dog(Tony, Poodle);console.log(isDog(a1)); // false console.log(isDog(d1)); // true在上面的代码中我们定义了一个 isDog 函数它接受一个 Animal 类型的参数返回值是一个布尔值。如果这个参数是 Dog 类型的实例则返回 true否则返回 false。注意这里我们使用 animal is Dog 语法来显式地指定返回值类型为布尔值表示这个函数就是一个类型谓词函数。 在 isDog 函数中我们通过判断传入的 animal 参数是否含有 breed 属性来判断它是否是 Dog 类型的实例。如果是则返回 true否则返回 false。 最后我们可以通过调用 isDog 函数来判断一个对象是否是 Dog 类型的实例并根据不同的类型执行相应的逻辑。 TypeScript支持的访问修饰符有哪些 公共public类的所有成员其子类以及该类的实例都可以访问。 受保护protected该类及其子类的所有成员都可以访问它们。 但是该类的实例无法访问。 私有private只有类的成员可以访问它们。 如何定义一个数组它的元素可能是字符串类型也可能是数值类型 // 方法1 let arr1: (number | string)[] [1] arr1.push(1) arr1.push(3)// 方法2 let arr2 : Arraystring | number [1, 2] arr2.push(1) arr2.push(3)// 方法3 type newType number|string let arr3:newType [] [3] arr3.push(1) arr4.push(5)Typescript中泛型是什么 泛型程序设计generic programming是程序设计语言的一种风格或范式 泛型允许我们在强类型程序设计语言中编写代码时使用一些以后才指定的类型在实例化时作为参数指明这些类型 在typescript中定义函数接口或者类的时候不预先定义好具体的类型而在使用的时候在指定类型的一种特性 假设我们用一个函数它可接受一个 number 参数并返回一个 number 参数如下写法 function returnItem (para: number): number {return para }如果我们打算接受一个 string 类型然后再返回 string类型则如下写法 function returnItem (para: string): string {return para }上述两种编写方式存在一个最明显的问题在于代码重复度比较高 虽然可以使用 any类型去替代但这也并不是很好的方案因为我们的目的是接收什么类型的参数返回什么类型的参数即在运行时传入参数我们才能确定类型 这种情况就可以使用泛型如下所示 function returnItemT(para: T): T {return para }可以看到泛型给予开发者创造灵活、可重用代码的能力 使用方式 函数 接口 类 函数声明 声明函数的形式如下 function returnItemT(para: T): T {return para }定义泛型的时候可以一次定义多个类型参数比如我们可以同时定义泛型 T 和 泛型 U function swapT, U(tuple: [T, U]): [U, T] {return [tuple[1], tuple[0]]; }swap([7,seven]);//[seven, 7]接口声明 声明接口的形式如下 interface ReturnItemFnT {(para: T): T }那么当我们想传入一个number作为参数的时候就可以这样声明函数: const returnItem: ReturnItemFnnumber para para类声明 使用泛型声明类的时候既可以作用于类本身也可以作用与类的成员函数 下面简单实现一个元素同类型的栈结构如下所示 class StackT {private arr: T[] []public push(item: T) {this.arr.push(item)}public pop() {this.arr.pop()} }使用方式如下 const stack new Stacnnumber()如果上述只能传递 string 和 number 类型这时候就可以使用 的方式猜实现约束泛型如下所示 除了上述的形式泛型更高级的使用如下 例如要设计一个函数这个函数接受两个参数一个参数为对象另一个参数为对象上的属性我们通过这两个参数返回这个属性的值 这时候就设计到泛型的索引类型和约束类型共同实现 索引类型、约束类型 索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型这里的泛型 U 被约束在这个联合类型中如下所示 function getValueT extends object, U extends keyof T(obj: T, key: U) {return obj[key] // ok }上述为什么需要使用泛型约束而不是直接定义第一个参数为 object类型是因为默认情况 object 指的是{}而我们接收的对象是各种各样的一个泛型来表示传入的对象类型比如 T extends object 使用如下图所示 多类型约束 例如如下需要实现两个接口的类型约束 interface FirstInterface {doSomething(): number }interface SecondInterface {doSomethingElse(): string } 可以创建一个接口继承上述两个接口如下 interface ChildInterface extends FirstInterface, SecondInterface {}正确使用如下 class DemoT extends ChildInterface {private genericProperty: Tconstructor(genericProperty: T) {this.genericProperty genericProperty}useT() {this.genericProperty.doSomething()this.genericProperty.doSomethingElse()} }TypeScript 的内置数据类型有哪些 boolean表示布尔值可以是 true 或 false。number表示数字包括整数和浮点数。string表示字符串。可以使用单引号或双引号来表示字符串。void表示没有任何返回值的函数的返回类型。null 和 undefined这两个类型是所有类型的子类型。 symbol表示独特的值类似于数字或字符串。 除此之外TypeScript 还支持以下复合类型 array表示一个元素类型为 T 的数组。例如number[] 表示一个数字数组。tuple表示已知元素数量和类型的数组。例如[string, number] 表示一个字符串和数字组成的元组。enum表示一个命名的常量枚举。any表示任意类型。unknown与 any 类似但是在更严格的类型检查下使用。object表示非原始类型的对象。还有一些其他的类型例如 never、union 和 intersection它们可以用于描述更复杂的类型。 ts中any和unknown有什么区别 unknown 和 any 的主要区别是 unknown 类型会更加严格在对 unknown 类型的值执行大多数操作之前我们必须进行某种形式的检查。而在对 any 类型的值执行操作之前我们不必进行任何检查。 举例说明 let foo: any 123; console.log(foo.msg); // 符合TS的语法 let a_value1: unknown foo; // OK let a_value2: any foo; // OK let a_value3: string foo; // OKlet bar: unknown 222; // OK console.log(bar.msg); // Error let k_value1: unknown bar; // OK let K_value2: any bar; // OK let K_value3: string bar; // Error因为bar是一个未知类型(任何类型的数据都可以赋给 unknown 类型)所以不能确定是否有msg属性。不能通过TS语法检测而 unknown 类型的值也不能将值赋给 any 和 unknown 之外的类型变量 any 和 unknown 都是顶级类型但是 unknown 更加严格不像 any 那样不做类型检查反而 unknown 因为未知性质不允许访问属性不允许赋值给其他有明确类型的变量。 如何将 unknown 类型指定为一个更具体的类型 方法一 使用 typeof 进行类型判断这些缩小类型范围的技术都有助于TS基于控制流程下的类型分析 function unknownToString(value: unknown): string {if (typeof value string) {return value;}return String(value);}方法二 对 unknown 类型使用类型断言 要强制编译器信任类型为 unknown 的值为给定类型则可以使用类型断言 const value: unknown Hello World;const foo: string value; // Errorconst bar: string value as string; // OK断言错了时语法能通过检测但是运行的时候就会报错了 const value: unknown Hello World;const bar: number value as number; // runtime Error说说对 TypeScript 中命名空间与模块的理解区别 模块 TypeScript 与 ECMAScript 2015 一样任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地如果一个文件不带有顶级的import或者export声明那么它的内容被视为全局可见的 例如我们在在一个 TypeScript 工程下建立一个文件 1.ts声明一个变量a如下 const a:number 1;然后在另一个文件同样声明一个变量a这时候会出现错误信息 提示重复声明a变量但是所处的空间是全局的 如果需要解决这个问题则通过import或者export引入模块系统即可如下 const a:number 10;export default a在typescript中export关键字可以导出变量或者类型用法与es6模块一致如下 export const a 1 export type Person {name: String }通过import 引入模块如下 import { a, Person } from ./export;命名空间 命名空间一个最明确的目的就是解决重名问题 命名空间定义了标识符的可见范围一个标识符可在多个名字空间中定义它在不同名字空间中的含义是互不相干的 这样在一个新的名字空间中可定义任何标识符它们不会与任何已有的标识符发生冲突因为已有的定义都处于其他名字空间中 TypeScript 中命名空间使用 namespace 来定义语法格式如下 namespace SomeNameSpaceName {export interface ISomeInterfaceName { }export class SomeClassName { } }以上定义了一个命名空间 SomeNameSpaceName如果我们需要在外部可以调用 SomeNameSpaceName 中的类和接口则需要在类和接口添加 export 关键字 使用方式如下 SomeNameSpaceName.SomeClassName 命名空间本质上是一个对象作用是将一系列相关的全局变量组织到一个对象的属性如下 namespace Letter {export let a 1;export let b 2;export let c 3;// ...export let z 26; }编译成js如下 var Letter; (function (Letter) {Letter.a 1;Letter.b 2;Letter.c 3;// ...Letter.z 26; })(Letter || (Letter {}));区别 命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象使用起来十分容易。但就像其它的全局命名空间污染一样它很难去识别组件之间的依赖关系尤其是在大型的应用中 像命名空间一样模块可以包含代码和声明。 不同的是模块可以声明它的依赖 在正常的TS项目开发过程中并不建议用命名空间但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间主要作用是给编译器编写代码的时候参考使用 ts中的枚举类型 在 TypeScript 中枚举Enum类型是一种用来定义命名常量集合的数据类型。枚举类型可以帮助开发者更清晰地表达代码中的意图提高代码的可读性和可维护性。 enum Gender {Male,FemaleOther } console.log(Gender.Male); // Output: 0//We can also access an enum value by its number value. console.log(Gender[1]); // Output: FemaletypeScript中的方法重写是什么? 如果子类(子类)具有与父类中声明的相同的方法则称为方法覆盖。换句话说在派生类或子类中重新定义基类方法。 方法重写的规则 该方法必须具有与父类相同的名称该方法必须具有与父类相同的参数。必须有一个IS-A关系(继承)。 例子 class NewPrinter extends Printer { doPrint(): any { super.doPrint(); console.log(Called Child class.); } doInkJetPrint(): any { console.log(Called doInkJetPrint().); } } let printer: new () NewPrinter; printer.doPrint(); printer.doInkJetPrint(); 什么是TypeScript映射文件 TypeScript Map文件是一个源映射文件其中包含有关我们原始文件的信息。.map文件是源映射文件可让工具在发出的JavaScript代码和创建它的TypeScript源文件之间进行映射。许多调试器可以使用这些文件因此我们可以调试TypeScript文件而不是JavaScript文件。 Typescript中 interface 和 type 的差别是什么 都可以描述一个对象或者函数 interface interface User {name: stringage: number }interface SetUser {(name: string, age: number): void; }type type User {name: stringage: number };type SetUser (name: string, age: number) void;都允许拓展extends interface 和 type 都可以拓展并且两者并不是相互独立的也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多但是两者语法不同。 interface extends interface interface Name { name: string; } interface User extends Name { age: number; }type extends type type Name { name: string; } type User Name { age: number };interface extends type type Name { name: string; } interface User extends Name { age: number; }type extends interface interface Name { name: string; } type User Name { age: number; }总结 语法形式 interface使用关键字 interface 定义例如interface Person { name: string; age: number; }type使用关键字 type 定义例如type Person { name: string; age: number; } 扩展 interface 可以被 extends 和 implements 扩展可以继承另一个 interface。type 可以使用交叉类型将多个类型组合成一个类型。 兼容性 interface 能够进行合并merging如果多次定义同名 interface则会自动合并定义。type 不具备合并功能如果多次定义同名 type则会报错。 适用范围 在一般情况下interface 更适合用于定义对象的形状而 type 更适合用于复杂的类型操作。 综合来说interface 更倾向于用于描述对象的形状能够进行合并和扩展并且在大多数情况下更符合直觉。而 type 则更适合用于定义联合类型、交叉类型等较为复杂的类型操作。在实际开发中可以根据具体需求和场景来选择使用 interface 还是 type。 说一说TypeScript中的类及其特性。 TypeScript 引入了类以便它们可以利用诸如封装和抽象之类的面向对象技术的好处。 TypeScript 编译器将 TypeScript 中的类编译为普通的 JavaScript 函数以跨平台和浏览器工作。 一个类包括以下内容 构造器Constructor属性Properties方法Methods class Employee {empID: number;empName: string;constructor(ID: number, name: string) {this.empName name;this.empID ID;}getSalary(): number {return 40000;} }类的其他特性有 继承Inheritance封装Encapsulation多态Polymorphism抽象Abstraction Typescript中什么是装饰器它们可以应用于什么 装饰器是一种特殊的声明它允许你通过使用注释标记来一次性修改类或类成员。每个装饰器都必须引用一个将在运行时评估的函数。 例如装饰器sealed将对应于sealed函数。任何标有 的sealed都将用于评估sealed函数。 function sealed(target) {// do something with target ... }它们可以附加到 类声明 方法配件特性参数 注意默认情况下不启用装饰器。要启用它们你必须experimentalDecorators从tsconfig.json文件或命令行编辑编译器选项中的字段。 TypeScript mixin。 Mixin 本质上是在相反方向上工作的继承。Mixins 允许你通过组合以前类中更简单的部分类设置来构建新类。 相反类A继承类B来获得它的功能类B从类A需要返回一个新类的附加功能。 后言 创作不易要是本文章对广大读者有那么一点点帮助 不妨三连支持一下您的鼓励就是博主创作的动力