此文为 https://ts.xcatliu.com/ TypeScript入门教程的读书笔记
概念:
ts是js的超集。.js直接命名为.ts即可。
优点:
1.根据定义的类型可以使人很快明白如何使用;非显示定义类型可以做出类型推论
2.编译时即可发现很多错误(但即使编译报错也可以生成js文件)
3.兼容很多第三方库,支持es6规范,社区活跃
缺点:
1.需要学习新的类型概念如接口Interface,泛型Generic,类Classes,枚举类型Enums
2.集成到构建需要工作量
3.和某些库结合不够完美如vue
安装
安装 npm install -g typescript
编译 tsc xx.ts
知识要点:
1.以 变量:类型 这种写法指定变量类型,:前后有无空格都可以
如:let aaa :number = 1;
2.原始数据类型6种:
①boolean布尔值
( 注意:let b = new Boolean(),b不是一个布尔值,是一个对象)
②number数值
③string字符串
④null
⑤undefined
(注意:在ts中,null和undefined可以被赋值到其他类型去,如let bbb:number = undefined
⑥symbol
(es6中出现,为一个不可能与其他相同的值,唯一存在)
⑦void空值
(js中没有空值的概念;ts中用void表示没有任何返回值的函数,如
let sayHi() : void {
alert('hello~');
}
)
3、ts的类型之任意值Any
// ts是一种强类型语言,已指定其他类型的变量不能赋值其他类型的值
// 当定义为Any类型时,则可以随意赋值不同类型的值
声明一个变量为任意值后,访问任何属性和调用任何方法都不报错,返回的内容的类型都是Any
声明变量未指定类型时,该变量默认为Any类型
4、ts的类型推论
当声明变量时未指定类型但赋值了,则会根据值的类型推测出一个类型作为该变量的类型,后面若有不同类型的赋值则会报错;
若声明变量时未指定类型也未赋值,则推论为Any类型
5、联合类型
let ddd :string | number;
当联合类型变量未被赋值时,不知道其确切类型,则只能访问共有属性
如ddd.length报错,ddd.toString()不报错
联合类型会以最近一次赋值进行类型推论,推出类型后若访问另一个类型的属性会报错,只有重新赋值成另一个类型时访问其属性才正确编译
6、接口类型(对象)
在ts中,用接口Interfaces来定义对象类型
//它是对行为的抽象,而具体如何行动由类classes去实现implement
//除了用于对类的一部分行为进行抽象,也可以用于对 (对象的形状shape)进行描述
定义接口
interface Person = {
name:string,
age: number
}
声明变量
let jack:Person = {
name: 'jack',
age: 18
}
声明的变量必须和接口完全一致,不能多,不能少,不能不一样。
但还有:可选属性、任意属性、只读属性
①可选属性如定义时这么写: age?: number 那么声明变量时age可有可无都不报错
②任意属性:定义时[ propName : string] : any 那么声明变量时可以增加string类型的key和任意类型的value
注意:一旦有了任意属性,那么该接口的其他属性(包括确定属性和可选属性)都必须是任意属性的值的类型
如定义了一个[propName: string] : string 属性,那么该接口的其他属性的值都必须是string,即便是某属性age定义的为number,在声明变量时age赋值为18则会报错
③只读属性:定义接口时在属性key前加上readonly。必须在声明变量时赋值,之后给只读属性赋值引发报错。
7、数组类型
①【类型+[]】表示法
let list:number[] = [1,2,3,4]
let cate: string[] = ['1','2','3','4']
②接口表示法
interface Array = {
[index:number]:number
}
let list : Array = [1,2,3,4]
③数组泛型表示法
详见后期泛型
④类数组表示法(误
//类数组不是数组类型,要用接口的方式来描述
如IArguments,Nodelist,HTMLCollection等,以上均为ts定义好的类型
详情参考内置对象
未完待续...