
Typescript专栏
文章平均质量分 88
以实战为线索,逐步深入了解Typescript的魅力
沿途欣赏i
这个作者很懒,什么都没留下…
展开
-
8、接口的高级用法
我们可以使用接口描述索引的类型和通过索引得到的值的类型,比如一个数组[‘a’, ‘b’],数字索引0对应的通过索引得到的值为’a’。上面的例子中 role3 定义了一个数组,索引为数值类型,值为字符串类型。你也可以给索引设置readonly,从而防止索引返回值被修改。这里有一点需要注意,你可以设置索引类型为 number。但是这样如果你将属性名设置为字符串类型,则会报错;但是如果你设置索引类型为字符串类型,那么即便你的属性名设置的是数值类型,也没问题。原创 2023-04-25 11:27:43 · 1972 阅读 · 0 评论 -
7、如何使用接口?
我们需要定义这样一个函数,参数是一个对象,里面包含两个字段:firstName 和 lastName,也就是英文的名和姓,然后返回一个拼接后的完整名字。这些都是我们不想要的,在开发时难免会传入错误的参数,所以 TypeScript 能够帮我们在编译阶段就检测到这些错误。这些都是在我们编写代码的时候 TypeScript 提示给我们的错误信息,这样就避免了在使用函数的时候传入不正确的参数。接下来我们使用interface。原创 2023-04-25 11:14:04 · 884 阅读 · 0 评论 -
6、什么是类型断言?
虽然 TypeScript 很强大,但有时还不如我们了解一个值的类型方便,这时候我们更希望 TypeScript 不要帮我们进行类型检查,而是交给我们自己来,所以就用到了类型断言。很显然,我们是要做判断的,我们判断如果 target.length 不为 undefined, 说明它是有 length 属性的,但我们的参数是。当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法,所以现在加了对参数。这个时候就要用类型断言,将。原创 2023-04-25 10:46:16 · 564 阅读 · 0 评论 -
5、认真学习枚举类型
我们使用enum关键字定义了一个枚举值 Status,它包含三个字段,每个字段间用逗号隔开。我们使用枚举值的元素值时,就像访问对象的属性一样,你可以使用’.‘操作符和’[]'两种形式访问里面的值,这和对象一样。再来看输出的结果,是 0,是 1,在定义值的时候,可以使用计算值和常量。原创 2023-04-25 10:15:27 · 735 阅读 · 0 评论 -
4、Symbol-ES6新基础类型
symbol是 ES6 新增的一种基本数据类型,它和 number、string、boolean、undefined 和 null 是同类型的,object 是引用类型。它用来表示独一无二的值,通过 Symbol 函数生成。本小节代码都是纯JavaScript代码,建议在非TypeScript环境练习,你可以在浏览器开发者工具的控制台里练习。但是因为TypeScript也支持Symbol,所以如果需要特别说明的地方,我们会提示在TypeScript中需要注意的内容。原创 2023-04-20 17:58:57 · 508 阅读 · 0 评论 -
3、Typescript中补充的六个类型
元组可以看做是数组的拓展,它表示已知元素数量和类型的数组。可以看到,上面我们定义了一个元组 tuple,它包含三个元素,且每个元素的类型是固定的。当我们为 tuple 赋值 时:各个位置上的元素类型都要对应,元素个数也要一致。这里我们给元组 tuple 的索引为 1 即第二个元素赋值为 3,第二个元素类型为 number,我们赋值给 3,所以没有问题。上面的例子中,我们访问的 tuple 的第二个元素的元素类型为 number,而数值没有 split 方法,所以会报错。原创 2023-04-20 16:34:24 · 883 阅读 · 0 评论 -
2、八个JS中你见过的类型
num = 'abc' // error 不能将类型“"123"”分配给类型“number”当我们给 num 赋值为123但没有指定类型时,编译器推断出了 num 的类型为 number 数值类型,所以当给 num 再赋 值为字符串"abc"时,就会报错。这里还有一点要注意,就是number和Number的区别:TS中指定类型的时候要用 number ,这个是TypeScript的类 型关键字。而 Number 为JavaScript的原生构造函数,用它来创建数值类型的值,它俩是不一样的。原创 2023-04-20 14:51:20 · 368 阅读 · 0 评论 -
1、Typescript基础入门与环境搭建
npm是 node自带的包管理工具,会在安装node的时候自动进行安装,可以使用 npm -v 来查看npm的版本,检验是否安装 成功。tsconfig.json 里默认有 4 项没有注释的配置,有一个需要提前讲下,就是"lib"这个配置项,他是一个数组,他用来 配置需要引入的声明库文件,我们后面会用到ES6语法,和DOM相关内容,所以我们需要引入两个声明库文件,需 要在这个数组中添加"es6"和"dom",也就是修改数组为 [“dom”, “es6”] ,其他暂时不用修改,接着往下进行。原创 2023-04-19 11:10:57 · 867 阅读 · 0 评论