中国建设银行云浮分行网站,简单电商网站模板,网易企业邮箱登录页,哈尔滨网站建设价位TypeScript 核心
类型注解 知道#xff1a;TypeScript 类型注解 示例代码#xff1a;
// 约定变量 age 的类型为 number 类型
let age: number 18
age 19: number 就是类型注解#xff0c;它为变量提供类型约束。约定了什么类型#xff0c;就只能给该变量赋值什么类型的…TypeScript 核心
类型注解 知道TypeScript 类型注解 示例代码
// 约定变量 age 的类型为 number 类型
let age: number 18
age 19
: number 就是类型注解它为变量提供类型约束。约定了什么类型就只能给该变量赋值什么类型的值否则报错。而且约定类型之后代码的提示也会非常清晰。
错误演示
let age: number 18
// 报错不能将类型“string”分配给类型“number”
age 19
小结
什么是类型注解 变量后面约定类型的语法就是类型注解 类型注解作用 约定类型明确提示
原始类型 知道ts 有哪些类型掌握原始类型使用 TS 常用类型 JS 已有类型 简单类型number string boolean null undefined复杂类型对象 数组 函数 TS 新增类型 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any、泛型 等
原始类型
使用简单完全按照 JS 的类型来书写即可
let age: number 18
let myName: string 黑马程序员
let isLoading: boolean false
let nullValue: null null
let undefinedValue: undefined undefined数组类型 掌握数组类型的两种写法 写法 1类型:[]
let numbers: number[] [1, 3, 5]
写法 2Arrary
let strings: Arraystring [a, b, c]
推荐使用
number[] 写法
思考
如果数组需要存储多种类型数据呢
联合类型 掌握通过联合类型将多个类型合并为一个类型 联合类型 Arrary类型1 | 类型2 |类型3
需求数组中有 number 和 string 类型这个数组的类型如何书写
let arr: (number | string)[] [1, a, 3, b]定义
类型与类型之间使用 | 连接代表类型可以是它们当中的其中一种这种类型叫联合类型
练习给一个定时器 ID 加类型
let timer: number | null null
timer setInterval(() {}, 1000)
类型别名(常用) 掌握使用类型别名语法给类型取别字 示例代码
// let arr: ( number | string )[] [1, a, 4]
// 类型别名: type 类型别名 具体类型
type CustomArr (number | string)[]
let arr: CustomArr [1, a, 4]
类型别名:
type 类型别名 具体类型 基本语法定义类型别名遵循大驼峰命名规范类似于变量使用类型别名与类型注解的写法一样即可
使用场景
当同一类型复杂被多次使用时可以通过类型别名简化 该类型的使用
type CustomArr (number | string)[]
let arr: CustomArr [1, a, 4]
let arr2: CustomArr [2, b, 8]
函数类型
基本使用 掌握给函数指定类型 给函数指定类型其实是给 参数 和 返回值 指定类型。两种写法 在函数基础上 分别指定 参数和返回值类型使用类型别名 同时指定 参数和返回值类型
示例代码 1分别指定
// 函数声明
function add(num1: number, num2: number): number {return num1 num2
}// 箭头函数
const add (num1: number, num2: number): number {return num1 num2
}
示例代码 2同时指定
type AddFn (num1: number, num2: number) numberconst add: AddFn (num1, num2) {return num1 num2
}
注意
通过类似箭头函数形式的语法来为函数添加类型只适用于 函数表达式
void 类型 掌握void 函数返回值类型 如果函数没有返回值定义函数类型时返回值类型为 void
const say (): void {console.log(hi)
};
如果函数没有返回值且没有定义函数返回值类型的时候默认是 void
const say () {console.log(hi)
}
注意
在 JS 中如果没有返回值默认返回的是 undefined但是 void 和 undefined 在 TypeScript 中并不是一回事如果指定返回值类型是 undefined 那返回值必须是 undefined
const add (): undefined {return undefined
}
可选参数 掌握 使用 ? 将参数标记为可选 如果函数的参数可以传也可以不传这种情况就可以使用 可选参数 语法参数后加 ? 即可
const fn (n?: number) {// ..
};
fn()
fn(10)
练习模拟 slice 函数定义函数参数类型
const mySlice (start?: number, end?: number) {console.log(起始Index:, start, 结束Index:, end);
}
mySlice()
mySlice(1)
mySlice(1, 2)
注意
必选参数不能位于可选参数后 (start?: number, end: number) 这样是不行的
对象类型
基本使用 掌握对象类型语法 TS 的对象类型其实就是描述对象中的 属性 方法 的类型因为对象是由属性和方法组成的。
Person定义的对象值,调用时,必须得对用,否则报错,接口就没有这个要求
函数使用箭头函数类型
let person: {name: stringsayHi: () void
} {name: jack,sayHi() {}
};
对象属性可选
// 例如axios({url,method}) 如果是 get 请求 method 可以省略
const axios (config: { url: string; method?: string }) {}
使用类型别名
// {} 会降低代码可阅读性建议对象使用类型别名
// const axios (config: { url: string; method?: string }) {}
type Config {url: stringmethod?: string
}
const axios (config: Config) {}
小结
对象的方法使用箭头函数类型怎么写{sayHi:()void}对象的可选参数怎么设置{name?: string}对象类型会使用 {} 如何提供可阅读性类型别名
接口 interface
基本使用 掌握使用 interface 声明对象类型 接口声明是命名对象类型的另一种方式 小结
interface 后面是接口名称和类型别名的意思一样。指定 接口名称 作为变量的类型使用。接口的每一行只能有 一个 属性或方法每一行不需要加分号。
interface 继承 掌握使用 extends 实现接口继承达到类型复用 思考
有两个接口有相同的属性或者函数如何提高代码复用
interface Point2D {x: numbery: number
}
interface Point3D {x: numbery: numberz: number
}
继承
相同的属性或展示可以抽离出来然后使用 extends 实现继承复用
interface Point2D {x: numbery: number
}
// 继承 Point2D
interface Point3D extends Point2D {z: number
}
// 继承后 Point3D 的结构{ x: number; y: number; z: number }
小结
接口继承的语法interface 接口A extends 接口B {}继承后 接口A 拥有 接口B 的所有属性和函数的类型声明
type 交叉类型 掌握使用 交叉类型 实现接口的继承效果 实现 Point2D 与 {z: number} 类型合并得到 Ponit3D 类型
// 使用 type 来定义 Point2D 和 Point3D
type Point2D {x: numbery: number
}// 使用 交叉类型 来实现接口继承的功能
// 使用 交叉类型 后Point3D { x: number; y: number; z: number }
type Point3D Point2D {z: number
}let o: Point3D {x: 1,y: 2,z: 3
}
小结
使用 可以合并连接的对象类型也叫交叉类型
interface vs type 了解interface 和 type 的相同点和区别 类型别名和接口非常相似在许多情况下可以在它们之间自由选择。接口的几乎所有特性都以类型的形式可用关键的区别在于不能重新打开类型以添加新属性而接口总是可扩展的。
interfacetype支持对象类型支持对象类型其他类型复用可以继承复用交叉类型
不同的点
type 不可重复定义
type Person {name: string
}
// 标识符“Person”重复 Error
type Person {age: number
}interface 重复定义会合并
interface Person {name: string
}
interface Person {age: number
}
// 类型会合并注意属性类型和方法类型不能重复定义
const p: Person {name: jack,age: 18
}
小结
它们都可以定义对象类型它们都可以复用interface 使用 extends , type 使用 type 不能重复定义interface 可以重复会合并
类型推断 知道TS 的的类型推断机制作用 在 TS 中存在类型推断机制在没有指定类型的情况下TS 也会给变量提供类型。
发生类型推断的几个场景场景
声明变量并初始化时
// 变量 age 的类型被自动推断为number
let age 18
决定函数返回值时
// 函数返回值的类型被自动推断为number
const add (num1: number, num2: number) {return num1 nu m2
}
建议
将来在开发项目的时候能省略类型注解的地方就省略充分利用TS推断 的能力提高开发效率。在你还没有熟悉 ts 类型的时候建议都加上类型比如今天第一次写 ts 最好都写上如果你不知道类型怎么写可以把鼠标放至变量上可以通过 Vscode 提示看到类型
字面量类型
字面量类型介绍 知道什么是字面量类型 js 字面量如18 jack [a] {age: 10} 等等。使用 js字面量 作为变量类型这种类型就是字面量类型。
// : jack 是字面量类型
let name: jack jack
// : 18 是字面量类型
let age: 18 18// 报错不能将类型“19”分配给类型“18”
age 19
思考这两个变量的类型是什么
let str1 Hello TS
const str2 Hello TS
通过类型推断发现str1 类型是 string str2 类型是 Hello TS原因str2 是 const 声明的值只能是 Hello TS所以类型只能是 Hello TS
字面量类型应用 知道字面量类型的应用场景 例如性别只能是 男 和 女不会出现其他值。
// let gender 男
// gender 女
// ------------------------
type Gender 男 | 女
let gender: Gender 男
gender 女
小结
字面量类型配合联合类型来使用表示一组明确的可选的值
例子
// 使用自定义类型:
type Direction up | down | left | rightfunction changeDirection(direction: Direction) {console.log(direction)
}// 调用函数时会有类型提示
changeDirection(up)
解释参数 direction 的值只能是 up/down/left/right 中的任意一个优势相比于 string 类型使用字面量类型更加精确、严谨
any 类型 应用场景: 当我们需要使用类型,但是不知道的时候,用它来替代,但是如果后期知道了,就改回明确类型 小结
any 的使用越多程序可能出现的漏洞越多因此不推荐使用 any 类型尽量避免使用。
枚举
枚举的默认本质就是数值它是给程序员看的是为了更好的阅读
方便程序员看懂啥意思
// 枚举的属性首字母大写值如果不写默认从0开始自增
// 如果我们有给枚举指定数值那么它后续的值会自增
enum Direction {Up 10,Down,Left,Right 18
}//Down11 Left12// 如果是字符串枚举如果你指定了值必须全部指定因为它不像数值那样可以递增
enum Direction {Up Up,Down Down,Left Left,Right Right
}类型断言
有时候你会比 TS 更加明确一个值的类型此时可以使用类型断言来指定更具体的类型。 比如
// aLink 的类型 HTMLElement该类型只包含所有标签公共的属性或方法
// 这个类型太宽泛没包含 a 元素特有的属性或方法如 href
const aLink document.getElementById(link)
但是我们明确知道获取的是一个 A 元素可以通过 类型断言 给它指定一个更具体的类型。
const aLink document.getElementById(link) as HTMLAnchorElement
解释: 使用 as 关键字实现类型断言关键字 as 后面的类型是一个更加具体的类型HTMLAnchorElement 是 HTMLElement 的子类型通过类型断言aLink 的类型变得更加具体这样就可以访问 a 标签特有的属性或方法了
例如
const img document.getElementById(img) as HTMLImageElement
// 如果不知道标签的类型document.querySelector(div) 鼠标摸上去就可以看见
泛型
TIP
软件工程中我们不仅要创建一致的定义良好的API同时也要考虑可重用性。 组件不仅能够支持当前的数据类型同时也能支持未来的数据类型这在创建大型系统时为你提供了十分灵活的功能。在TypeScript中泛型是一种创建可复用代码组件的工具。这种组件不只能被一种类型使用而是能被多种类型复用。类似于参数的作用泛型是一种用以增强类型types、接口interfaces、函数类型等能力的非常可靠的手段。
泛型函数 掌握泛型函数基本使用保证函数内类型复用且保证类型安全 // 函数的参数是什么类型返回值就是什么类型
function getIdT(id: T): T {return id
}let id1 getIdnumber(1)
let id2 getId(2)
// TS会进行类型推断参数的类型作为泛型的类型 getIdstring(2)
小结
泛型函数语法 函数名称后加上 T T是类型参数是个类型变量命名建议遵循大驼峰即可。 T 什么时候确定 当你调用函数的时候传入具体的类型T 或捕获到这个类型函数任何位置均可使用。 泛型函数好处 让函数可以支持不同类型复用且保证类型是安全的。 调用函数什么时候可以省略泛型 传入的数据可以推断出你想要的类型就可以省略。
// 我需要的类型 { name: string, age?: number } 但是推断出来是 { name: string}
let id2 getId({name:jack})
泛型别名 掌握泛型别名基本使用实现类型复用 // 对后台返回的数据进行类型定义
type User {name: stringage: number
}type Goods {id: numbergoodsName: string
}type DataT {msg: stringcode: numberdata: T
}// 使用类型
type UserData DataUser
type GoodsData DataGoods
小结
泛型定义类型别名后加上类型参数 就是泛型语法 使用的时候传入具体的类型即可T 是一个变量可以随意命名建议遵循大驼峰即可。和类型别名配合在类型别名后加上泛型语法然后类型别名内就可以使用这个类型参数泛型可以提高类型的复用性和灵活性
泛型接口 掌握泛型接口基本使用实现类型复用了解内置泛型接口 // 对象获取单个ID函数获取所有ID函数ID的类型肯定是一致的但是可能是数字可能是字符串
interface IdFnT {id: () Tids: () T[]
}const idObj: IdFnnumber {id() { return 1 },ids() { return [1, 2] }
}const idObj2: IdFnstring {id() { return a },ids() { return [a, b] }
}
在接口名称的后面添加 类型变量那么这个接口就变成了泛型接口接口中所有成员都可以使用类型变量。
内置的泛型接口
const arr [1, 2, 3]
// TS有自动类型推断其实可以看做const arr: Arraynumber [1, 2, 3]
arr.push(4)
arr.forEach((item) console.log(item))
可以通过 Ctrl 鼠标左键(MacCommand 鼠标左键) 去查看内置的泛型接口
