TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。
前段时间在项目中首次使用了Typescript,将使用过程中与js使用方法的不同的地方做一次总结
文件介绍
.ts文件 要在以.ts文件结尾的文件中使用Typescript,最后他们会被编译为js文件运行,编译前会进行类型检查。.d.ts文件 这是typescript的描述文件,将声明的一些类型放在里面。因为一些js文件没有类型,所以要先声明它的类型,再使用Typescript
TypeScript使用
常用的变量类型及使用方法
- boolean
: boolean - string
:string - null
:null - undefined
:undefined - number
:number - object
:object - void
:void - any
:any - Array
:number[]或者:Array<number>
类型推断
TypeScript里,在有些没有明确指出类型的地方,类型推论会帮助提供类型,但是对于一些自定义的类型,就无法自动推断,所以最好还是对每个变量添加上类型比较好。
let x = 3;
接口
TypeScript 的核心原则之一是对值所具有的_结构_进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在 TypeScript 里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
?:可选参数,项目中使用比较多typeinterface:类型声明关键字,可以声明大量类型
interface SquareConfig {
color?: string;
width?: number;
}
类型断言
项目会遇到这样的bug,你定义了一个的类型正确,但是Typescript却报错了,这时候只能强制断言类型。
类型断言有两种形式。 其一是“尖括号”语法:
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
另一个为as语法:
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只能使用as语法断言。
!:非空断言,可以解决一些问题
字面量类型
目前 TypeScript 中有三种可用的字面量类型集合,分别是:字符串、数字和布尔值。通过使用字面量类型,你可以规定一个字符串、数字或布尔值必须含有的确定值。使用这种方法的时候,同时也缩小了类型范围,仅包含这些字面量类型。
使用 |,可以将类型联合起来
Easing = "ease-in" | "ease-out" | "ease-in-out";
tileSize: 8 | 16 | 32;
isValid: true;
联合类型
使用 |,可以将类型联合起来,在上面的例子中已经使用了,也就是说类型就是这几个中之一
readoly修饰符
使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.