说明:
-
使用
{}来描述对象结构 -
属性采用
属性名: 类型的形式，如果是多行，可以省略, -
方法采用
方法名(): 返回值类型的形式 -
可选使用 ?
TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统
可以显示标记出代码中的意外行为，从而降低了发生错误的可能性
类型注解:
let 变量名: 类型 = 初始值示例代码:
let age: number = 18这样我们就声明了age这个变量所接收的值必须是number类型,否则报错
说明：代码中的 : number 就是类型注解
作用：为变量添加类型约束**。
上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错
原始类型:
js中的基础数据类型在ts文件中书写的方式为
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
联合类型:
需求
如何定义一个变量可以是null也可以是 number 类型?
目标
掌握联合类型的用法
格式
解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值let arr: (number | string)[] = [1, 'a', 3, 'b']数组类型
两种写法
格式
let 变量: 类型[] = [值1，...]
let 变量: Array<类型> = [值1，...]// 写法一：
let numbers: number[] = [1, 3, 5] // numbers必须是数组，每个元素都必须是数字
// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] // strings必须是数组，每个元素都必须是字符串类型别名
别名的首字母推荐大写
作用: 可以实现复用,不需要每个表达式都要一个一个的去写类型了
格式
type 别名 = 类型type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'{
type Newtype = string | number
let a:Newtype = 1
let b:Newtype = 'a'
}// 代表 数组里的值只能取字符串型或者数据型,不限个数 
函数-单个定义:
函数的类型
函数的类型实际上指的是：函数参数和返回值的类型
// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }
{
// 函数声明
// 代表 a和b只能传数字型的参数,并且返回值也是数字型
function add(a: number, b: number): number {
return a + b;
}
}
add()
// add (1,1) 正确写法
// add(1,'1') // 报错
{
// 箭头函数
// 代表 a 默认值是10 , b的默认值是20 ,返回值是数字型
const add1 = (a: number = 10, b: number = 20): number => {
return a + b;
};
add1()
add1(1,2)
// add1(1,'2') // 报错
}
函数-统一定义函数格式:
问题
定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘
const add = (a:number,b:number):number =>{
return a + b
}
const sub = (a:number,b:number):number =>{
return a - b
}把拥有相同形参和实参的函数当做一个整体，来定义
{
// add 和 sub 具有相同参数类型和返回值类型时,代码比较累赘
// const add = (a:number,b:number):number =>{
// return a + b
// }
// const sub = (a:number,b:number):number =>{
// return a - b
// }
// 提炼一下
type Fn = (a: number, b: number) => number;
const add: Fn = (a, b) => {
return a + b;
};
const sub: Fn = (a, b) => {
return a - b;
};
}
函数返回值是void:
void 类型
如果函数没有返回值，那么，函数返回值类型为：void
如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足
-
不写return
-
写return ，但是后面不接内容
-
写return undefined
{
type Fn = (a: number, b: number) => void;
// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add1 = (): void => {}
const add2: Fn = (a, b) => {}; // 不写return
const add3: Fn = (a, b) => {
return // 写return 不写内容
};
const sub: Fn = (a, b) => {
return undefined // return undefined
};
}函数-可选参数:
场景
使用函数实现某个功能时，参数可以传也可以不传。
例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]
这种情况下，在给函数参数指定类型时，就用到可选参数了
格式
可选参数：在可选参数名的后面添加 ?（问号）
function mySlice(start?: number, end?: number): void {
console.log('起始索引：', start, '结束索引：', end)
}注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
也就是说start这个形参名后面添加了'?', 后面的形参名就不能不加'?'了
可选和默认值的区别
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。
注意：它们不能一起使用。优先使用默认值 (a:number=10)
对象类型-单独使用:
格式
const 对象名: {
属性名1：类型1，
属性名2：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2 }说明:
-
使用
{}来描述对象结构 -
属性采用
属性名: 类型的形式，如果是多行，可以省略, -
方法采用
方法名(): 返回值类型的形式 -
可选使用 ?
{
type Info = {
name: string;
age: number;
play(): void;
};
let add : Info= {
name: 'zs',
age : 16,
play():void{} // 第一种写法
// play:() => {} // 第二种写法
};
}对象类型-类型别名:
用类型别名来简化定义对象的类型的方式
把类型注解封装一下，定义类型
{
type Info = {
name: string;
age: number;
play(): void;
};
let add: Info = {
name: 'zs',
age: 16,
play() {}
};
}对象类型-练习
创建两个对象：
学生对象
指定对象的类型
- 姓名
- 性别
- 成绩
- 身高
- 学习（）
- 打游戏（）
{
type Info = {
name: string;
gender: string;
score: number;
height: number;
learn(): void;
play(): void;
};
const xueSheng: Info = {
name: '小明',
gender: '男',
score: 66,
height: 168,
learn: () => {},
play: () => {}
};
}
对象类型-接口:
场景
当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。
-
类型别名， Type
-
接口, interface
格式
interface 接口名 {
属性1: 类型1, 属性2: 类型2,
}示例
{
interface Info {
name:string,
age:number,
play:()=>string
}
let add:Info ={
name:'小明',
age:16,
play:()=>{
return 'ss'
}
}
}解释：
-
使用
interface关键字来声明接口 -
接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以
I开头 -
声明接口后，直接使用接口名称作为变量的类型
接口和类型的区别
interface（接口）和 type（类型别名）的对比：
-
相同点：都可以给对象指定类型
-
不同点:
-
接口，只能为对象指定类型。它可以继承。
-
类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名
-
推荐：能使用 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
}接口继承:
背景
比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
继承格式
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
...
}
解释：
-
使用
extends(继承)关键字实现了接口 Point3D 继承 Point2D -
继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)
{
interface Point2D { x: number; y: number }
// interface Point3D { x: number; y: number; z: number }
interface Point3D extends Point2D {
z:number
}
}
元组:
固定结构的数据， 例如
-
使用经纬度坐标来标记位置信息
-
使用x,y来记录鼠标的位置
可以使用数组来记录坐标
let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。
元组是另一种特殊的数组：
-
它确切地包含多少个元素
-
特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]解释：
-
元组类型可以确切地标记出有多少个元素，以及每个元素的类型
-
该示例中，元素有两个元素，每个元素的类型都是 number
字面量类型:
let str1 = 'hello 武汉'
const str2 = 'hello 武汉'问： str1是什么类型？ str2是什么类型？
通过 TS 类型推论机制，可以得到答案：
-
变量 str1 的类型为：string
-
变量 str2 的类型为：'Hello TS'
解释
-
str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
-
str2 是一个常量(const)，它的值不能变化只能是 'hello 武汉'，所以，它的类型为:'hello 武汉'
-
注意：此处的 'Hello TS'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型
字面量类型
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用
说明：
-
上面的let a等价于const
-
简写为 const a = 'abc'
字面量的作用
单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表
示例1
比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个
// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，写上''，就会有类型提示：
changeDirection('up')解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
优势：相比于 string 类型，使用字面量类型更加精确、严谨
示例2
性别取值只能有两个
let gender: 'girl' | 'boy' = 'boy'
gender = 'abc' // 报错小结
字面量类型约定：只能取某些个特定的值。一般和联合类型一起使用。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
