初识 TypeScript 一。

简介: 初识 TypeScript 一。

一.普通变量声明时:

image.pngimage.png

TS中的核心用法离不开 " : " 没错,就是冒号。冒号后面可以直接定义你这个变量的类型,

当你没有定义 变量类型的时候,ts会在你给变量赋值的时候隐式的帮你声明,如下图我并没有声明变量B的类型,却会再我准备给B再次赋值的时候提示我:

image.png

image.png

二.类(如果你对类的概念还不了解,我的建议是去mdn上补习js 类的相关知识 )

image.png

(同理和普通变量一样,你也可以不设定属性类型)

image.png

ts会帮你自动判断,不过实际情况中并不会省略,在这里只是说明一下可以这样写。

per是person类的实例化对象,person类里面的属性和方法都会在实例化对象per中存在。(儿子继承里爸爸的一些基因不过分吧~)

有一种特殊的情况,当你不想实例化就调用类里的方法或者属性时,可以在person类属性前加上关键字static(静态的)那么这个属性就称为里类独有的属性,简称为类属性。

image.png

那么这时候 name这个属性就不会被"复制"到实例化对象上,你可以暂时理解为是这东西是 爸爸 私有的,不允许 儿子 继承 。

同理 class里也可以定义方法

image.png

还有es6的剪头函数写法

image.png

都是可以的.

但是聪明的你可能发现了,我在定义类的时候已经把属性写死了,那我new出来的所有实例化对象都具有相同的名字,年龄,方法。那就没什么意义了,我还不如直接声明一个对象来的痛快呢。

这时候迎来一个让初学者闻风丧胆的,这位更是重量级的选手,constructor()构造函数

是不是听见 构造 这两个字就头疼,其实当你理解了它就是那么一回事。

image.png

说实话,刚开始学习js的时候,看见*constructor() *我就害怕,看文档只要看见这个词,我就想翻页。

但是现在不要慌,我带你一步一步分析。

有句老话,一切不以结婚为目的的谈对象都是刷流氓。

在类里面,一切不以实例化为目的的定义类,都是空气!

怎么理解这句话呢,就像上面的代码,当我new一个实例的时候,并且它也没有静态方法,那么它在代码里是没有存在意义的,可以当成空气。

但是如果我现在new了一个新的实例。

image.png

没错,我的new就会去寻找这个constructor,它其实就是一个普普通通的函数却又不那么普通罢了。this的指向永远是指向新的实例化的那个对象的,关于this推荐 阮一峰大侠的文档 的解释,小辈属实没有讲解this指向的本领。

你只需要知道我new person 的时候就会去找person类里 的构造函数就好了。

需要注意的是,你new的是一个类,首先要保证的是,你这个类里需要有这两个属性,才可以赋值,你的类是有两部分组成的,1,属性 2,构造函数

image.png

image.png

这时候ts会提示,你特么都没有这个属性,你让我构造器创造这个属性,你逗我呢?所以正确的写法是下面这种。

image.png

你可能会问,啊,我类里面有属性声明了,我构造器为什么参数还要再写一遍?麻烦死了。

不要问,记住是这样写的就行了。

还有一种情况刚开始的小伙伴很容易迷

image.png

有的教程里突然在下面来里个方法,就一下子蒙了,刚刚不是还在构造器里设置属性吗?为什么突然跑出去在外面了?我知道你都疑惑肯定是为什么 call方法不能写在构造器里呢?这样不也就是相当于给实例对象新的方法吗?

你要记住,你new的时候是调用constructor,你方法写在这里面相当于你让构造器给你执行了,并不是你在给new的实例赋予这个方法。懂了吧。什么?你还不明白,好,我给你换一种写法

image.png

懂了吗?其实方法是等价于写到这里的。

不过一般都是方法写在构造器下面,构造器只是赋予实例化对象属性值的。





相关文章
|
22天前
|
自然语言处理 JavaScript
typescript let
typescript let
|
1月前
|
JavaScript 前端开发 开发者
TypeScript一
JavaScript开发迅速但维护成本高,适合小型项目,因其动态类型导致编辑器提示不全。TypeScript是JS超集,增加了类型系统,提高开发效率和代码质量。安装TypeScript需先安装Node.js,然后通过npm安装tsc。案例演示创建`.ts`文件,转换成`.js`并运行。TypeScript支持多种数据类型,如any、number、string等,并有严格变量声明和函数定义规则,包括函数重载和匿名函数。
|
1月前
|
存储 JavaScript 索引
TypeScript四
## 联合类型 联合类型使用`|`分隔,表示变量可为多种类型: ```c var val: string | number; val = 12; // OK val = "Runoob"; // OK `
|
1月前
|
开发框架 JavaScript 前端开发
什么是TypeScript
什么是TypeScript
15 0
|
8月前
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
|
10月前
|
JavaScript
【TypeScript理解】
【TypeScript理解】
|
10月前
|
JavaScript 前端开发 编译器
TypeScript使用技巧
TypeScript使用技巧
47 0
|
10月前
|
JavaScript
TypeScript(一)
TypeScript(一)