// 此处,返回的 undefined 是 JS 中的一个值
return undefined
}
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}
复制代码
那么就有人好奇,既然return undefined,那么为什么不可以直接在返回值那里写 :undefined 呢?
如果函数没有指定返回值,调用结束之后,值是undefined的,但是不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里会报错
console.log(a,b)
}
复制代码
函数-可选参数
使用函数实现某个功能时,参数可以传也可以不传。
例如:数组的 slice 方法,可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
那么就可以定义可选参数
语法:
可选参数:在可选参数名的后面添加 ?(问号)
function slice (a?: number, b?: number) {
// ? 跟在参数名字的后面,表示可选的参数
// 注意:可选参数只能在 必须参数的后面
// 如果可选参数在必选参数的前面,会报错
console.log(111);

}
slice()
slice(1)
slice(1,2)
}
复制代码
可选和默认值的区别
相同点: 调用函数时,可以少传参数
区别:设置了默认值之后,就是可选的了,不写就会使用默认值; 可选的参数一定有值。
注意:它们不能一起使用。优先使用默认值

对象类型-单独使用
格式:
方法有两种写法: 普通函数 和 箭头函数
const 对象名: {
属性名1:类型1,
属性名2?:类型2,
方法名1(形参1: 类型1,形参2: 类型2): 返回值类型,
方法名2:(形参1: 类型1,形参2: 类型2) => 返回值类型
} = { 属性名1: 值1,属性名2:值2 }
复制代码
对象类型-类型别名
// 创建类型别名
type Person = {
name: string,
age: number
sayHi(): void
}

// 使用类型别名作为对象的类型:
let person: Person = {
name: '小花',
age: 18
sayHi() {}
}

复制代码
接口
当一个对象类型被多次使用时,有如下两种方式来来描述对象的类型,以达到复用的目的:

类型别名,type
接口,interface

语法:
interface 接口名 {属性1: 类型1, 属性2: 类型2}
// 这里用 interface 关键字来声明接口
interface IGoodItem {
// 接口名称(比如,此处的 IPerson),可以是任意合法的变量名称,推荐以 I 开头
name: string, price: number, func: ()=>string
}

// 声明接口后,直接使用接口名称作为变量的类型
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
const good2: IGoodItem = {
name: '手机',
price: 2000,
func: function() {
return '打电话'
}
}
复制代码
接口和类型 的区别
interface(接口)和 type(类型别名)的对比:

相同点:都可以给对象指定类型
不同点:

接口,只能为对象指定类型。它可以继承。
类型别名,不仅可以为对象指定类型,实际上可以为任意类型指定别名

先有的 interface,后有的 type,推荐使用 type
// 接口的写法-------------
interface IPerson {
name: string,
age: number
}

const user1:IPerson = {
name: 'a',
age: 20
}

// type的写法-------------
type Person = {
name: string,
age: number
}
const user2:Person = {
name: 'b',
age: 20
}
复制代码
接口继承
如果两个接口之间有相同的属性或方法,可以将公共的属性或方法抽离出来,通过继承来实现复用
语法:
interface 接口2 extends 接口1 {
属性1: 类型1, // 接口2中特有的类型
}

interface a { x: number; y: number }
// 继承 a
// 使用 extends(继承)关键字实现了接口
interface b extends a {
z: number
}
// 继承后,b 就有了 a 的所有属性和方法(此时,b 同时有 x、y、z 三个属性)
复制代码
元组
元组是一种特殊的数组。有两点特殊之处

它约定了的元素个数

它约定了特定索引对应的数据类型

举个例子:
就拿 react 里面的 useState来举例:
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
n = n1
}
return [n, setN]
}

const [num ,setNum] = useState(10)
复制代码
字面量类型
例如下面的代码
let str1 = 'hello TS'
const str2 = 'hello TS'
复制代码
大家可以猜一下,str1 是什么类型的,str2 是什么类型?不要偷偷看答案哦。
这里是正确答案:
str1 的类型为 string 类型,str2 的类型为 Hello TS类型

这是为啥呢?

str1 是一个变量(let),它的值可以是任意字符串,所以类型为:string
str2 是一个常量(const),它的值不能变化只能是 'hello TS',所以,它的类型为:'hello TS'

注意:此处的 'Hello TS',就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型
这时候就有人好奇了,那字面量类型有啥作用呢?
字面量类型一般是配合联合类型一起使用的, 用来表示一组明确的可选值列表。
例如下面的例子:
type Gender = 'girl' | 'boy'
// 声明一个类型,他的值 是 'girl' 或者是 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误
复制代码
可以看到会有提示,明确告诉你只能选这两种。妈妈再也不用担心写错啦

枚举
枚举(enum)的功能类似于字面量类型+联合类型组合的功能,来描述一个值,该值只能是 一组命名常量 中的一个。
在没有 type 的时候,大家都是用枚举比较多的,现在比较少了。
语法:
enum 枚举名 { 可取值1, 可取值2,.. }

// 使用格式:
枚举名.可取值
复制代码

注意:

一般枚举名称以大写字母开头
枚举中的多个值之间通过 ,(逗号)分隔
定义好枚举后,直接使用枚举名称作为类型注解

枚举也分数值枚举 和 字符串枚举。
数值枚举:
默认情况下,枚举的值是数值。默认为:从 0 开始自增的数值
当然,也可以给枚举中的成员初始化值
enum Direction { Up = 10, Down, Left, Right }
// Down -> 11、Left -> 12、Right -> 13

enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }
复制代码
字符串枚举:
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
复制代码
注意:字符串枚举没有自增长行为,因此,字符串枚举的每个成员必须有初始值
any 类型
any: 任意的。当类型设置为 any 时,就取消了类型的限制。
例如:
let obj: any = { x: 0 }

obj.bar = 100
obj()
// obj 可以是任意类型

作者:一起去看星星吧
链接:https://juejin.cn/post/7092415149809598500
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
车上哦

05-30 18:53