首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

TypeScript基础(四)扩展类型 -

引言--TypeScript是一种静态类型编程语言,它是JavaScript超集,可以编译成纯JavaScript代码。...TypeScript引入了概念,使得开发者可以使用面向对象方式来编写代码。本文将介绍TypeScript、继承、访问修饰符和访问器用法。...-是一种模板或蓝图,用于创建具有相同属性和方法对象。在TypeScript中,可以使用关键字class来定义一个可以包含属性(成员变量)和方法(成员函数)。...子类可以访问父属性和方法,并且还可以添加自己属性和方法。在子类构造函数中,我们使用关键字super()调用父构造函数,并传递相应参数。这样可以确保中定义属性得到正确地初始化。...访问修饰符在TypeScript中,访问修饰符用于控制属性和方法可访问性。TypeScript提供了三种访问修饰符:public、private和protected。

29130
您找到你想要的搜索结果了吗?
是的
没有找到

TypeScript函数类型

{ return x+y; }; 这是可以通过编译,不过事实上,上面的代码只对等号右侧匿名函数进行了类型定义,而等号左边 mySum,是通过赋值操作进行类型推论而推断出来。...{ return x+y; }; 注意不要混淆了 TypeScript => 和 ES6 中 =>。...在 TypeScript 类型定义中,=> 用来表示函数定义,左边是输入类型,需要用括号括起来,右边是输出类型。...==-1; } 采用函数表达式|接口定义函数方式时,对等号左侧进行类型限制,可以保证以后对函数名赋值时保证参数个数、参数类型、返回值类型不变。...在编辑器代码提示中,可以正确看到前两个提示。 注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确定义写在前面。

2K30

TypeScript

TypeScript中,是一种用于创建对象蓝图,它定义了对象属性和方法。可以看作是对象模板,通过实例化可以创建具体对象。定义要定义一个,可以使用 class 关键字后跟名称。...名称通常使用帕斯卡命名法(首字母大写)。class Person { // 属性和方法在这里定义}属性和方法可以包含属性和方法,用于描述对象状态和行为。...const person = new Person("John", 25);继承TypeScript支持继承,可以通过继承一个基来创建派生。....`); }}派生可以继承基属性和方法,并可以添加自己属性和方法。访问修饰符TypeScript提供了访问修饰符来控制属性和方法访问权限。...public:默认访问修饰符,公开访问,可以在内部和外部访问。private:私有访问,只能在内部访问。protected:受保护访问,只能在内部和派生中访问。

74630

TypeScript: 常用高级类型

,枚举类型是真实运行代码,因此枚举类型是真实存在对象,而并非仅仅只是简单类型约束。...可问题在于touch事件对象与mouse事件对象是不一样。那么我们在兼容了这两种事件回调中,如何去描述该回调事件对象呢? 通常使用 & 符号来解决这样常见,将两种类型合并为一种类型。...per: string | string[] 我们在代码编写时,希望能够自动提示对应api,typescript则不知道应该如何处理这种情况。...为此,我们应该使用一些判断,帮助编辑器做出正确推断。 这种处理,就叫做类型保护。 5 索引类型 我们可以使用 keyof 来获取一个对象中key对应具体值。...我们在实践场景中,还有更多更复杂组合,这些经验很难通过技术文章获取到,需要在实践中慢慢体会。除此之外,typescript官方文档中,还有一些重要东西需要去深入学习。

1.9K10

TypeScript 对象类型-接口

一、什么是接口 在 TypeScript 中,我们使用接口(Interfaces)来定义对象类型 接口是一系列抽象方法声明,是一些方法特征集合,第三方可以通过这组抽象方法调用,让具体执行具体方法...TypeScript 中接口除了可用于对一部分行为进行抽象以外,还可用于对「对象形状(Shape)」进行描述 举个例子: interface Person { name: string;...需要注意是,一旦定义了任意属性,那么确定属性和可选属性类型都必须是它类型子集: interface Person { name: string; age?...上例中,报错信息有两处: 1、在对 faker 进行赋值时候,没有给 id 赋值 2、在给 faker.id 赋值时候,由于它是只读属性,所以报错了 五、联合类型和接口 以下实例演示了如何在接口中使用联合类型...interface Ages { [index:string]:number } let list2:Ages; list2["Faker"] = 22 // 正确 list2

3.3K10

TypeScript类型断言

本文是关于 TypeScript type assertions ,它与其他语言中类型强制转换有相似之处,并通过 as 运算符执行。...---- 类型断言 类型断言使我们可以覆盖 TypeScript 为存储位置计算静态类型,这对于解决类型系统限制很有用。...类型断言是不得已方法,应尽可能避免。他们(暂时)删除了静态类型系统为我们提供安全网。 注意,在 A 行中,我们还覆盖了 TypeScript 静态类型,不过是通过类型注释完成。...这种覆盖方式比类型声明要安全得多,因为你可以做事情少得多。TypeScript 类型必须能够分配给注释类型。...类型断言替代语法 TypeScript 对于类型断言有另一种“尖括号”语法: 1>data 该语法已经过时,并且与 React JSX 代码(在 .tsx 文件中)不兼容。

3.7K40

类型即正义:TypeScript 从入门到实践(三):类型别名和

接口之所以可以继承是因为我们之前说到了在声明时候会声明一个类型,此类型用于注解实例。...x 和 y 属性,实际上接口继承是声明 Point 时同时声明用于注解实例那个类型,而这个类型只包含实例属性和方法,所以接口继承也是继承此类实例属性和方法类型。...参考资料 [1] 《类型即正义:TypeScript 从入门到实践(序章)》: https://juejin.im/post/5e8a82d2518825737b4ae3e0 [2] 《类型即正义:TypeScript...: https://gitee.com/tuture/typescript-tea ● 类型即正义:TypeScript 从入门到实践(序章)● 类型即正义:TypeScript 从入门到实践(一)●...类型即正义:TypeScript 从入门到实践(二):函数、交叉/联合类型类型守卫 ·END·

2.8K30

TypeScript类型断言-类型声明和转换

TS中并不能判断在使用联合类型时具体是那种类型?当我们不知道是什么类型情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知行为,但是并不能保证运行中报错。...主要有两种方式来实现,具体如下:断言形式(1)尖括号形式语法:+value,尖括号中填写具体类型。...;let length:number = (anyValue).length;//0使用断言虽然能避免编译中报错,但是却避免不了运行中报错type ClaaM = number |...ClaaM):string{ return (val).substr(0,1)}func(1)我们可以看到编辑器中没有报错,如下:但是编译成JS后,运行过程中就报错了,如下:所以除非确切知道变量数据类型...,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器将变量当做指定类型,而不管它实际类型,在程序运行时可能有类型错误,断言需要慎用。

32910

TypeScript数组类型定义

TypeScript 中声明和初始化数组也很简单,和声明数字类型和字符串类型变量也差不多,只不过在指定数组类型时要在类型后面加上一个中括号 [] 语法格式 const array_name: dataype...[] = [val, val2]; 示例 声明一个 string 类型数组 const character: string[] = ["杨过", "小龙女"]; 一维数组类型 声明一个 number..., val2, val3],[v1, v2, v3]]; // 等同于 const array_name: datatype[][] = [[val1, val2, val3]]; 多维数组类型 TypeScript...,则会限制内层数组元素数量 Array : 表示内层数组元素是 string 类型,限制元素数量是 1 个,输入多个会报错 const test3: Array<[string]...个 建议: 在定义数组类型时候使用数组泛型定义,这样显得更直观一点 Tuple 元组类型(元组类型允许表示一个已知元素数量和类型数组)

5.3K40

TypeScript 强大类型别名

一些关键字 使用类型别名可以实现很多复杂类型,很多复杂类型别名都需要借助关键字,我们先来了解一下几个常用关键字: extends extends 可以用来继承一个,也可以用来继承一个 interface...Record 该类型可以将 K 中所有的属性值转化为 T 类型,源码实现如下: // node_modules/typescript/lib/lib.es5.d.ts type Record<K extends...// node_modules/typescript/lib/lib.es5.d.ts interface ThisType { } 可以看到声明中只有一个接口,没有任何实现,说明这个类型是在...ConstructorParameters 该类型作用是获得参数类型组成元组类型,源码: // node_modules/typescript/lib/lib.es5.d.ts type ConstructorParameters...参考 TypeScript 中文网 TS 中内置类型简述 TypeScript 一些你可能不知道工具泛型使用及其实现

3.3K20

实现TypeScript互斥类型

此时,你会怎么用TypeScript来定义这个类型?本文将带大家实现一个互斥类型来解决这个问题,欢迎各位感兴趣开发者阅读本文。 前置知识 在实现之前,我们需要先来了解几个基础知识。...对象中多属性同类型定义 有一个对象它包含5个可选属性a、b、c、d、e,他们类型都为string,大多数人定义方式应该如下所示: type obj = { a?:string; b?...: string }; never类型TypeScript中它有一个特殊类型never,它是所有类型类型,无法再进行细分,也就意味着除了其本身没有类型可以再分配给它。...接下来,我们来梳理下实现思路: 实现一个排除类型,用于从A对象类型中剔除B对象类型属性,并将排除后属性类型设为never,得到一个新对象类型。...> & T); 注意:为了类型可复用性,我们使用了泛型,对此不熟悉开发者请移步:TypeScript中文网——泛型 测试用例 我们将文章开头所说问题代入上述实现代码中,看一下它能否将其解决,如下所示

3.1K40

Typescript 数据类型总结

一、是什么 typescript 和 javascript几乎一样,拥有相同数据类型,另外在javascript基础上提供了更加实用类型供开发使用 在开发阶段,可以为明确变量定义为某种类型,这样...typescript就能在编译阶段进行类型检查,当类型不合符预期结果时候则会出现错误提示 二、有哪些 typescript 数据类型主要有如下: boolean(布尔类型) number(数字类型)...一样,typescript数值类型都是浮点数,可支持二进制、八进制、十进制和十六进制 let num:number = 123; // num = '456'; // 错误 num = 456; /...; // 正确 但是ts配置了--strictNullChecks标记,null和undefined只能赋值给void和它们各自 void 用于标识方法返回值类型,表示该方法没有返回值。...never 类型一般用来指定那些总是会抛出异常、无限循环 let a:never; a = 123; // 错误写法 a = (() => { // 正确写法 throw new Error(

2.1K31

Typescript 数据类型总结

一、是什么 typescript 和 javascript几乎一样,拥有相同数据类型,另外在javascript基础上提供了更加实用类型供开发使用 在开发阶段,可以为明确变量定义为某种类型,这样...typescript就能在编译阶段进行类型检查,当类型不合符预期结果时候则会出现错误提示 二、有哪些 typescript 数据类型主要有如下: boolean(布尔类型) number(数字类型)...一样,typescript数值类型都是浮点数,可支持二进制、八进制、十进制和十六进制 let num:number = 123; // num = '456'; // 错误 num = 456; /...; // 正确 但是ts配置了--strictNullChecks标记,null和undefined只能赋值给void和它们各自 void 用于标识方法返回值类型,表示该方法没有返回值。...never 类型一般用来指定那些总是会抛出异常、无限循环 let a:never; a = 123; // 错误写法 a = (() => { // 正确写法 throw new Error(

1.1K10

初探 TypeScript函数基本类型泛型接口内置对象

(类型推断:如果没有明确指定类型,那么 TypeScript 会依照类型推论(Type Inference)规则推断出一个类型。)...: 参数类型和返回值类型;在 TypeScript 类型定义中, => 用来表示函数定义,左边是输入类型,需要用括号括起来,右边是输出类型,和 ES6 箭头函数不一样 可选参数和默认参数 TypeScript...TypeScript 核心原则之一是对值所具有的结构进行类型检查,它是对行为抽象,具体行动需要有去实现,一般接口首字母大写。一般来讲,一个只能继承来自另一个。...复制代码 TypeScript 具有 ReadonlyArray 类型,它与 Array 相似只是把所有的可变方法去掉了,确保数组创建后再也不能被修改 readonly vs const...;他有一个调用签名,参数列表和返回值类型函数定义,参数列表里每一个参数都需要名字和类型,函数参数名不需要与接口里定义名字相匹配,如果你没有指定参数类型TypeScript 类型系统会推断出参数类型

7.3K31
领券