【typeScript】:typeScript初学笔记(一)
![](https://img.haomeiwen.com/i4540967/ffd74ae503abcf35.png)
什么是TypeScript:
一:安装
安装TypeScript的命令如下:
![](https://img.haomeiwen.com/i4540967/fd7226f2027deac6.png)
查询是否安装成功:安装成功时会显示版本号
![](https://img.haomeiwen.com/i4540967/0538468026be8a19.png)
或者
![](https://img.haomeiwen.com/i4540967/fb68d04c30c2023c.png)
注意这里用的是tsc(不是typeScript)
二:typeScript的使用
使用 TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀。
Heloo TypeScript.
编译的命令:
tsc <文件> ,如我们写了一个hello.ts的文件,编译命令则是
![](https://img.haomeiwen.com/i4540967/df1d9a9e37d15a5d.png)
编译之后生成了一个同名的js文件:
![](https://img.haomeiwen.com/i4540967/cb4526f6475c9605.png)
先学一点基础知识吧==》
![](https://img.haomeiwen.com/i4540967/eeac81b12b33ac33.png)
Js数据类型在ts中的应用:
布尔值:
在 TypeScript 中,使用boolean来定义布尔类型
![](https://img.haomeiwen.com/i4540967/497febde78d61209.png)
数值类型:
使用number来定义:
![](https://img.haomeiwen.com/i4540967/d9c6c5ad889af3ac.png)
还可以用number来定义二进制,八进制,十六进制……,NaN,Infinity等一切数值型。
字符串:
使用string来定义:
![](https://img.haomeiwen.com/i4540967/f9d4161bc144d589.png)
补充:ts中同样支持es6中模板字符串的用法。
null:
使用null来定义
![](https://img.haomeiwen.com/i4540967/4c2a56e89b662bb1.png)
undefined:
使用undefined来定义
![](https://img.haomeiwen.com/i4540967/97419d482c407b55.png)
[if !vml]
[endif]
[if !supportLists]6. [endif]空值:
空值:
使用viod来定义(js中没有),用来表示没有返回的函数
![](https://img.haomeiwen.com/i4540967/6a7d5eb0778556db.png)
以上是基本数据类型,下面学习不基本的==》
任意值:
使用any来定义,表示可以被赋值成任意类型。
如果是下面这样的情况:我们先定义a是一个字符串类型,然后初始值为字符串7,然后再复制数值7,当编译的时候就会报错。
![](https://img.haomeiwen.com/i4540967/82b608badd7d90d3.png)
![](https://img.haomeiwen.com/i4540967/e8dd6ab03fa7d101.png)
怎么办,在实际开发中我的需求就是要这个变量不是一种类型啊,怎么办呢?这时候,任意值any就排上用场。
未声明类型变量:
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型
类型推论:
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。(还挺聪明的)
联合类型:
联合类型使用 | 分隔每个类型。
![](https://img.haomeiwen.com/i4540967/3d0990aef7d93563.png)
这里的string | number 表示定义的number可以取值为字符串或者数值,只能取这两种类型,如果赋值为其他类型则会报错。
对象的类型:接口
使用接口(Interfaces)来定义对象的类型:
![](https://img.haomeiwen.com/i4540967/8a562bd7f947f053.png)
注意:定义的变量的属性和接口的属性要一致,不能多也不能少。那么问题来了,接口定死了属性,我的变量不想局限于这些属性怎么办呢?
1.使用可选属性
可选属性:该属性可以不存在。使用方法是在接口属性后面加一个问号
![](https://img.haomeiwen.com/i4540967/17a6f5cd985c343b.png)
但是这还是不能满足想添加属性的要求
![](https://img.haomeiwen.com/i4540967/5bb66bfd53700c47.png)
使用任意属性
![](https://img.haomeiwen.com/i4540967/c40ad7754a2efa75.png)
上面例子中, 使用 [propName: string] 定义了任意属性取任意类型的值。这样就没毛病啦!
注意:如果定义了任意属性,定义的可选属性就必须包含在任意类型内,否则会报错。