这是我参与「第四届青训营 」笔记创作活动的第2天
在字节跳动青训营活动汇总，我学习到了typescript基础。并做一些笔记
9.联合类型
9.1 格式
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
9.2 示例
let var1: string | number = 1
var1 = '1' 9.3 应用场景
定时器id
// | 联合类型 变量可以是两种类型之一
let timer:number|null = null
timer=setTimeout(()=>{},1000)
10.类型别名
10.1 格式
type 别名 = 类型
10.2 使用
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
10.3 场景
给复杂类型起别名
type NewType = string | number
let a: NewType = 1
let b: NewType = '1'
别名可以是任意的合法字符串，一般首字母大写
-
数组类型
11.1 格式
let 变量: 类型[] = [值1，...]
let 变量: Array<类型> = [值1，...]
11.2示例
// 写法一：
let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字
// 写法二： let strings: Array = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串
11.3 练习-定义一个数组元素可能是字符串类型，也可能是数值类型
{
type ids=string | number
let arr:Array=[]
let arr1=['a',2]
console.log(arr1);
}
12. 函数定义
12.1 单个定义
12.1.1 格式
` // 普通函数 function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }
`
12.1.2 示例
// 声明式
function add(num1: number, num2: number): number { return num1 + num2 }
// 箭头函数
const add = (num1: number, num2: number): number => {
return num1 + num2
}
add（1,'1') // 报错
12.2 统一定义函数格式
问题: 定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
const add = (a:number,b:number):number =>{
return a + b
}
const sub = (a:number,b:number):number =>{ return a - b }
分析: 把拥有相同形参和实参的函数当做一个整体，来定义
const add1 : (n1:number,n2:number)=>number = (a,b)=>{return a+b }
做法: 提炼自定义类型
type Fn = (n1:number,n2:number) => number
const add1 : Fn = (a,b)=>{return a+b }
13.函数-返回值类型void
在 TS 中，如果一个函数没有返回值，应该使用 void 类型
function greet(name: string): void {
console.log('Hello', name)
}
具体来说：有如下三种情况
- 不写return
- 写return ，但是后面不接内容
- 写return undefined
// 如果什么都不写，此时，add 函数的返回值类型为： void const add = () => {}
// 如果return之后什么都不写，此时，add 函数的返回值类型为： void const add = () => { return }
const add = (): void => { // 此处，返回的 undefined 是 JS 中的一个值 return undefined } // 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同 const add = (): void => {}
## 13.1 void和undefined的区别
如果函数没有指定返回值，调用结束之后，值是undefined的，但是不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里会报错
console.log(a,b)
}
14. 函数-可选参数
场景:使用函数实现某个功能时，参数可以传也可以不传。 例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3) 这种情况下，在给函数参数指定类型时，就用到可选参数了。
14.1 格式
可选参数：在可选参数名的后面添加 ?（问号）
function mySlice(start?: number, end?: number): void {
console.log('起始索引：', start, '结束索引：', end)
}
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
14.2 可选和默认值的区别
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的参数一定有值。
注意：它们不能一起使用。优先使用默认值
