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请求时可以不指定
})