TypeScript总结
简介
typescript是JavaScript的一个超集,它扩展了JavaScript语法,也支持es6
安装
首先得先装好npm,如果有npm的话执行以下命令:
npm install -g typescript
当安装好之后可以执行命令查看版本号
tsc -v
typescript代码编写在.ts文件当中,.ts
文件编写完成之后我们可以通过命令生成一份js文件,之后就可以直接通过node xxx.js 或者将js代码引入html文件中执行。
tsc xxx.ts // 生成xxx.js文件
node xxx.js // 执行生成的xxx.js文件
类型
原始类型
和js不同的是,在变量名后面会跟上:变量类型
// 变量声明并且初始化
// 数字类型
let age5: number = 18
// 字符串
let myName: string = '张三'
// 布尔值
let isLoading: boolean = false
// null
let a5: null = null
// undefined
let b5: undefined = undefined
// symbol
let s: symbol = Symbol()
// 如果不去初始化的话直接let age5: number就行
通过typescript声明变量之后,该变量的类型就不可更改,否则就会提示类似以下报错:
不能将类型“string”分配给类型“number”。ts(2322)
数组类型
数组类型类型的声明初始相对多样化,有以下但不局限于这几种
- 指定数组是什么数据类型的数组的写法
// 指定数组是number类型的数组
let numbers: number[] = [1, 2, 3]
let numbers1: Array<number> = [1, 2, 3]
// 指定数组是boolean类型的数组
let b6: boolean[] = [true, false]
let b1: Array<boolean> = [true, false]
// 指定数组是多种类型的数组
let arr6: (number | boolean)[] = [1, 2, 3, false]
let arr1: Array<number | boolean> = [1, 2, 3, false]
通过该方法去初始化后,该类型的数组只能是指定的类型,数组项有别的数据类型的话则会报错
不能将类型“string”分配给类型“number”。ts(2322)
- 注意,指定多种类型的时候不能将
()
去掉,否则他会认为该数组是|
后面类型的数组,例如
let arr3: number | boolean[] = [false, true]
上述例子就是一个boolean类型的数组
函数类型
相较于js,typescript对函数 的声明主要有以下几点
- 如果函数有参数的话,每个参数应该去分别指定其数据类型
- 函数应指定返回值类型,如果返回值指定
void
或者any
的话,则可以不需要return
,否则函数都应该有return
指定的数据类型 - 另外函数参数如果不设置可选参数的情况下,声明了几个参数,在调用的时候也必须提供几个参数
- 下面是函数声明的几种写法
function addFn1(num1: number, num2: number): number {
return num1 + num2
}
//^ 简化
const addFn2 = (num1: number, num2: number): number => {
return num1 + num2
}
//^ 同时指定函数参数类型以及返回值类型
const addFn3: (num1: number, num2: number) => number = (num1, num2) => {
return num1 + num2
}
可选参数
如果不指定可选参数的话,声明时写了几个参数,那么在调用的时候就必须传几个
如果不想这样太过局限的话,我们可以使用可选参数,见下:
// 可传可不传参数可以再参数名后面添加?指定
function mySlice(start?: number, end?: number): void {
console.log('起始位置:', start, '结束位置:', end);
}
// 下方注释是函数调用的打印结果
mySlice() // 起始位置: undefined 结束位置: undefined
mySlice(1) // 起始位置: 1 结束位置: undefined
mySlice(1, 2) // 起始位置: 1 结束位置: 2
可选参数的指定必须放参数列表的最后面,否则会提示报错
function mySlice2(start?: number, end: number): void {
console.log('起始位置:', start, '结束位置:', end);
}
// 必选参数不能位于可选参数后。ts(1016)
对象类型
-
typescript中对象的写法同样是先指定对象的每个属性的数据类型,再书写每个数据类型对应的值
-
如果属性数据类型的声明都在同一行的话,应该用
;
或者,
进行分割 -
如果属性单独成行,则可以省略分割的
;
或者, -
对象也是可以指定可选属性的,通过
?
指定,可选属性写不写都行,指定的可选属性没有位置的限制 -
详细写法见下:
let person: { name: string; age: number; sayHello(): void } = {
name: '张三',
age: 18,
sayHello() {
console.log('hello world');
}
}
//^ 如果将定义的属性数据类型进行分行书写,则可以省略;
let person2: {
name: string
age: number
sayHello(): void
} = {
name: '李四',
age: 18,
sayHello: () => {
console.log('hello zhangsan');
}
}
//^ 尝试用, 代替分号, 也是可以的
let person3: { name: string, age: number, sayHello(): void } = {
name: '王五',
age: 18,
sayHello: () => {
console.log('hello zhangsan lisi');
}
}
//^ 可选属性 -- 指定name为可选属性,之后name属性可写可不写
let person4: { name?: string, age: number, sayHello(): void } = {
age: 18,
sayHello: () => {
console.log('hello zhangsan lisi');
}
}
可选属性的使用的例子
我们在请求接口的时候传递一个对象,当为get请求可以不指定method,所以method就是一个可选属性,如下:
function myAxios(config: { method?: string; url: string; }) { }
myAxios({
url: '',
// method: '' // 当为get请求时可以不指定
})