最近公司要求接手一个由electron构建的桌面端项目,其中用主要是使用TS进行编写,正好可以进行TS的复习
定义
Typescript(以下简称ts)是JavaScript的超集,在涵盖ES7的基础上增加了新的使用规则.主要是对JavaScript的使用进行了约束
安装与编译
对于ts环境来说,使用node并全局安装ts即可.
此时可以使用tsc对目标ts文件编译成js
对于使用VsCode的同学来说, 可以使用
tsc-init
来生成tsconfig.json 文件, 并在文件的outDir设定输出目录
最后使用ctrl+shift+b, 选择监视tsconfig.json进行动态编译
数据类型
ts使用在属性名后加:来限定类型
// 布尔值
let boo: boolean = true
// 数字
let num: number = 12.3
// 字符串
let str: string = 'string'
以上三种类型与js差别不大,便不详细介绍了
数组
ts数组与js不同的是他限定了数组中成员的类型
声明方法有两种
第一种元素类型后面接上 []
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型，Array<元素类型>
let list: Array<number> = [1, 2, 3];
元组
一种限定了成员数量,类型的数组
let x: [string, number] = ['hello', 10]
// let x: [string, number] = [10, 'hello'] // 报类型错误,说明也有顺序的限制
枚举
enum类型用于对一类数组增加方便理解的名字
enum Info { success = 1, error = -1 }
var f: Info = Info.success // 用名称获取值
var n: string = Info[1] // 可以用值获取对应名称
console.log(f) // 1
console.log(n) // success
若默认不赋值, 则自动从0开始为元素赋值
enum Info { success, error }
console.log(Info.success) // 0
console.log(Info.error) // 1
当然你也可以指定开始的值, 会从你指定的值开始
enum Info { success = 1, error, normal }
console.log(Info.success) // 1
console.log(Info.error) // 2
console.log(Info.normal) // 3
// 也可以中途指定值
enum Info { success, error = 3, normal }
console.log(Info.success) // 0
console.log(Info.error) // 3
console.log(Info.normal) // 4
// 但是但对于非number的指定值, 后面的后需要自己手动指定了
// enum Info { success, error = 'error', normal } // 枚举成员必须具有初始化表达式。
enum Info { success, error = 'error', normal = "normal" }
console.log(Info.success) // 0
console.log(Info.error) // error
console.log(Info.normal) // normal
Any
当类型无法确定时,可以使用any来标记变量(不推荐经常使用, 因为这样ts的特点类型限制几乎就无效了)
var anyitem:any = 123
anyitem = 'str'
anyitem = true
Void
void类型像是与any类型相反，它表示没有任何类型
经常在一个函数无返回值使用void标记
// function fun(): number { // 其声明类型不为 "void" 或 "any" 的函数必须返回值。
// console.log('none')
// }
function fun(): void { // 不报错
console.log('none')
}
function fun(): any { // 此处使用any也可以,但还是上面的话, 不推荐经常使用, 因为这样ts的特点类型限制几乎就无效了
console.log('none')
}
Null 和 Undefined
ts中null与undefined单独分类, 只是增加一种类型限制
他们时所有类型的子类, 所以其他类型都可以赋值null与undefined
let u: undefined = undefined;
let n: null = null;
let s1: string = null
let s2: string = undefined
指定--strictNullChecks标记(官方推荐使用)，null和undefined便不再是其他类型的子类
此时null和undefined只能赋值给void和它们各自, 此时对于某些参数需要传入string, null与undefined, 可以使用联合类型
let s: string | null | undefined = undefined
Never
表示的是那些永不存在的值的类型
是任何类型的子类型，也可以赋值给任何类型
然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
用作抛出异常或者无限循环的函数返回值
// 用作抛出异常
function error(message: string): never {
throw new Error(message);
}
// 或是无限循环
function infiniteLoop(): never {
while (true) {
}
}
Object
object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。相当于更低一层的any类型
function object(o: object): void {
console.log(o)
};
object({ prop: 0 }); // OK
// 但是我实测了下, 使用null与undefined也可以执行并且不报错, 这里期望某些大神解答下
object(null); // OK
object(undefined); // OK
object(42); // Error
object("string"); // Error
object(false); // Error
let sym = Symbol("key");
object(sym); // Error
类型推断
当声明和赋值在同一行时, ts会推断类型, 便可以省略类型的声明, 即
let str: string = 'string'
// 等同于
let str = 'string'
联合类型
变量可以取多种类型中一种
let a: string | number
a = 123
a = 'string'
类型断言
对一种类型进行设定, ts会认为这个类型已经被编写者检查过了. 不会对其类型进行校验
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。 所以推荐用as
let strLength: number = (someValue as string).length;
