学习typescript。
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
# 全局安装
npm install -g typescript
# 编译模式(如果创建了一个 hello.ts 文件)
tsc hello.ts
JavaScript的类型:原始数据类型、对象类型。
包括:布尔值、数值、字符串、null、undefined、Symbol(ES6中的新类型)
-
布尔值(boolean)
在 TypeScript 中,
boolean
是 JavaScript 中的基本类型,而Boolean
是 JavaScript 中的构造函数。其他基本类型(除了null
和undefined
)一样。 -
数值(number)
二进制(0b)和八进制(0o)会编译为十进制数字。
-
字符串(string)
可以用上ES6中的模板字符串;
-
空值(void)
1、JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用
void
表示没有任何返回值的函数;2、声明一个
void
类型的变量没有什么用,因为你只能将它赋值为undefined
和null
。 -
Null 和 Undefined
与 void
的区别是,undefined
和 null
是所有类型的子类型。
任意值(Any)用来表示允许赋值为任意类型。
let something;
something = 'seven';
something = 7;
something.setName('Tom');
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
![image-20200602214849413](/Users/wayne/Library/Application Support/typora-user-images/image-20200602214849413.png)
TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。
![image-20200602214924718](/Users/wayne/Library/Application Support/typora-user-images/image-20200602214924718.png)
总结:在没指定明确的类型并赋值的话,会报错;如果先定义后赋值,定义时会被推论为“any”类型。
联合类型(Union Types)表示取值可以为多种类型中的一种。
![image-20200602220742229](/Users/wayne/Library/Application Support/typora-user-images/image-20200602220742229.png)
联合类型使用 |
分隔每个类型。
这里的 let myFavoriteNumber: string | number
的含义是,允许 myFavoriteNumber
的类型是 string
或者 number
,但是不能是其他类型。
当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法
![image-20200602222634738](/Users/wayne/Library/Application Support/typora-user-images/image-20200602222634738.png)
联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型。
![image-20200602222724363](/Users/wayne/Library/Application Support/typora-user-images/image-20200602222724363.png)
- 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型;
- 接口是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement);
- 接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
- 接口一般首字母大写。有的编程语言中会建议接口的名称加上
I
前缀
// 数字数组
let num_arr: number[] = [1,2,3,4];
// 字符串数组
let str_arr: string[] = ['1','2'];
数组的一些方法参数也会根据数组在定义时约定的类型进行限制;
可以使用数组泛型Array来表示数组
let fibonacci: Array<number> = [1,2,3];
interface NumberArray {
// 索引的类型是数字时,值的类型必须为数字
[index:number]:number
}
let fibonacci:NumberArray = [1,2,3];
arguments是一个类数组,不能用普通的数组方式来描述,应该使用接口:
function sum(){
let args:{
[index:number]:number;
length:number;
callee:Function;
} = arguments;
}
类数组都有自己的借口定义,如 IArguments
, NodeList
, HTMLCollection
等:
// IArguments相当于如下:
interface IArguments {
[index: number]: any;
length: number;
callee: Function;
}
一个比较常见的做法是,用 any
表示数组中允许出现任意类型:
函数声明:
- 在ts中,函数的输入和输出都要进行约束;
- 一般情况下,输入多余的(或者少于要求的)参数,是不被允许的;
函数表达式:
- 在ts中,函数表达式定义函数的写法较为复杂:
![image-20200610155520395](/Users/wayne/Library/Application Support/typora-user-images/image-20200610155520395.png)
interface SearchFunc{
(source: string,subString:string):boolean;
}
let mySearch: SearchFunc;
mySearch = function(source;string,subString:string){
return source.search(subString) !== -1;
}
- 与接口中的可选属性类似,用
?
表示可以选参数; - 可选参数后面不允许再出现必需参数;
ts会将添加了默认值的参数识别为可选参数,此时不受“可选参数后面不允许有必需参数”的限制;
![image-20200610170307160](/Users/wayne/Library/Application Support/typora-user-images/image-20200610170307160.png)
![image-20200610170817679](/Users/wayne/Library/Application Support/typora-user-images/image-20200610170817679.png)
可以用来手动指定一个值的类型。
![image-20200610211806630](/Users/wayne/Library/Application Support/typora-user-images/image-20200610211806630.png)
- 在tsx中,必需使用
值 as 类型
的方式; - 第二种方式在tsx中表示的是一个ReactNode,在ts中除了表示类型断言,也可能是是一个泛型;
类型断言只能够「欺骗」TypeScript 编译器,无法避免运行时的错误,反而滥用类型断言可能会导致运行时错误;
- 将一个变量断言为
any
可以说是解决 TypeScript 中类型问题的最后一个手段 - 一方面不能滥用
as any
,另一方面也不要完全否定它的作用
要使得 A
能够被断言为 B
,只需要 A
兼容 B
或 B
兼容 A
即可。
除非迫不得已,千万别用双重断言。
- 类型断言不是类型转换,它不会真的影响到变量的类型;
- 若要进行类型转换,需要直接调用类型转换的方法。