共计 20583 个字符，预计需要花费 52 分钟才能阅读完成。
这是一份林一一同学学习 typescript4.0 的笔记，心愿能对前端 er 有帮忙。
介绍 Typescript
Typescript 是什么？
（图片起源网络，侵权删除）
- Typescript 是 JavaScript 的 超集，两者是所属关系。
- Typescript 是 JavaScript 的加强，蕴含 JavaScript 的最新个性，非常适合创立大型项目
- Typescript 是动态语言与动静语言 JavaScript 不同，TS 是和 JS 都是弱类型语言
- Typescript 也是前端的趋势，各大驰名的前端框架都应用了 TS 重构，如 Vue, React 等
下载安装及应用
- 本地环境须要先下载 node vscode，随后关上 vscode 终端，应用
npm install -g typescript即可 tsc -v查看版本号，这份教程是最新的 typescript 4.0- 倡议装置 TSlint 插件标准代码
- 编写 TS 文件代码，应用
tsc xx.ts命令运行 ts 文件，运行 ts 文件后会生成相应的 js 文件，这个 js 文件时 tsc 将 xx.ts 代码编译成 xx.js 的代码
动静语言和动态语言的差异
- 动态语言在编写代码的时候就能发现潜在的谬误.
- 动态语言更容易读懂代码，像下面的 data 参数动态语言能间接读出外面的属性 x, y，然而动静语言参数 data 显然不能间接读出外面蕴含什么属性。
// TS
function tsFunc (data: {x: number, y: number}) {console.log('demo ts')
return Math.sqrt(data.x ** 2 + data.y ** 2)
}
// tsFunc() // 没有传入参数，这里的代码 vscode 会提醒谬误, 这就是动态语言在编写代码的时候就能够晓得有谬误。tsFunc({x: 3, y: 4}) // 须要将参数代码一起写入。// 再比方传入参数的个数，ts 能间接检测，然而生成的 js 文件不能检测
function get(param) {return param}
get('hello')
get('hello', 1) // error: 应有 1 个参数，但取得 2 个- 编写代码时动态语言能辨认到可能应用到的属性等, 但动静语言不肯定能提醒的正确。
// 动态类型和动静类型的差异，动态类型在编写代码时就能够发现错误像 C ++,Java 等，动静类型的语言则须要代码运行时才能够晓得谬误，像 JavaScript，python。// js-code
function jsFunc (data) {return Math.sqrt(x ** 2 + y ** 2)
}
jsFunc() // 没有传入参数，但这里的代码 vscode 不会提醒谬误，但理论运行会产生报错。二. 动态类型
动态类型
就像后面看到的那样动态类型能够是根底类型 number string null undefined symbol boolean void enum 还能够是对象类型 Object，Array, class, function，还能够是自定义类型 interface 或任何类型 any 等详情 typescript 官网
- 定义为相应类型后能够间接应用对应类型的办法或属性如 number,vscode 间接提醒
. 根底类型 number string null undefined symbol boolean any void never。。。
- number 类型
const num: number = 123- string 类型
const Name: string = 'LinYY'- boolean 类型
const boolean: Boolean = true- null 类型。null 类型不能够赋值给 undefined 类型和 联结类型（前面介绍）
let n: null = null- undefined 类型
let u: undefined = undefinedundefined 类型。能够作用到可选类型，因为可选的类型默认会有一个 undefined 类型
interface E {
b: number
c?: number
}
let e: E = {b: 12, c: 12}
e = {b: 23, c: undefined}- any 类型。曾经定义变量的类型不能再批改，否则报错。
留神 any 类型，any 类型定义后能够批改为其余的类型
// any 类型能够批改成其余任何类型，TS 不对 any 类型作类型检测
let not: any
not = 2
not = '2'
not = true
// 解决不确定的数组类型 any 比拟适合。let listArr: any[] = ['1', 2, true]- void 类型 和 any 类型相同，示意没有任何类型
void 类型 通常作用在函数中代表没有返回值，尽管也能够作为其余变量的类型，但只能赋值成 undefined。换一个方向想函数总是有返回值的，如果不是一个确定的值那么就是 undefined 值，所以 void 其实是属于 undefined 的，所以一个变量类型是 void 时，值只能 undefined 值。然而 不能将类型“void”调配给类型“undefined”详情看例子
// void 空类型，个别用于函数，function noReturn(): void {console.log('no value return')
}
function fn(): void {
// Error
return 3;
}
function fn5(): void {}
let un: undefined = fn5(); // Error 不能将类型“void”调配给类型“undefined”let voidValue: void = undefined
let voidValue2: void = null // 不能将类型“null”调配给类型“void”- never 一个非凡类型。简略的说如果函数是一个永远不会执行完的函数，返回值就是 never 类型，像函数
errorFunc，abs。
// never 类型，不会执行完结的函数类型
function errorFunc(): never {throw new Error()
console.log('never') // 抛出谬误后 这段代码不打印。}
function abs(): never {while (true) { }
console.log('never') // 下面的代码永远是 true 这段代码不打印。}- 对象类型 object type。object {}，array [], class {}，function
let person: {
name: string,
age: number
} = {
name: 'LinYY',
age: 12
}
// 或 (不举荐写法)
let personB:{name: string} & {age: number} = {
name: 'LinYY',
age: 12
}- 数组类型 也是对象类型，上面申明 number 型数组只能写入数字来初始化，写入字符串将会报错。
const list: number[] = [12, 23, 34]
// 等同于，上面的数组泛型，泛型是什么之后会讲，先留一个印象。const listA: Array<number> = [1, 2, 3]
// const listB: number[] = ['12', 23, 34]- class 类 类型
class Person {}
const LinYY: Person = new Person()- function 函数类型, 上面的函数类型要求返回值是 number 数字类型，写成其余类型如 string 会报错。
const getNumber: () => number = () => {
// return 'LinYY' 报错
return 123
}
// 要求返回值是 string 字符类型
const getString: () => string = () => {
return 'LinYY'
// return 123
}- interface 自定义类型，也就是接口
interface Point {
x: number,
y: number
}
const point: Point = {
x: 2,
y: 4
}- 多类型。变量的类型能够有多个，比方能够是 number 或 string 类型
// 变量的类型能够有多个，比方能够是 number 或 string 类型。let temp: number | string = 23
temp = '23'- type alias 类型别名，类型别名不是 TS 的根本数据类型，类型别名罕用于提取公共类型，上面 interface 接口会具体介绍
type User = {name: string, age: number}
let male: User = {name: 'LinYY', age: 18}
let famale: User = {name: 'nana', age: 18}小 tip
正文小技巧 tip: 应用
/** */能够给类型增加更敌对的提醒
// 正文
/**
* this is good Per
*/
interface Per {name: string}
const p: Per ={name: 'LinYY'}在 typescript 外面 name 是一个预留关键字，不能间接当变量来用
三. 类型注解和类型推断
type annotation 类型注解。
- 间接申明的类型，通知 TS 变量是什么类型。比方这里的 count 是 number 类型
// type annotation 类型注解。let count: number
count = 23type inference 类型推断。
- 没有间接申明类型，TS 会尝试去剖析变量类型，如这里的 countB，推断是 number 类型。（此处加图阐明）
let countB = 23- 然而申明的变量没有间接在一行赋值 TS 将默认变量为 any 类型，如这里的变量 countC，鼠标箭头挪动到 countC 上方就能够看到类型。正确写法是加上类型注解。
let countC // any 类型
countC = 233TS 并不能所有的类型都能推断进去，那么什么时候应用类型注解呢？具体情况须要具体分析
- 个别简略的变量申明能够不写类型注解。如这里的
num1 num2 sum。TS 能直接判断。 - 个别函数的参数须要类型注解，返回值能够不必写类型注解，TS 能主动判断
- 曾经有未确定的 any 类型，须要加类型注解，如 total 显示为 any, 起因是类型 a b 不确定。
let num1 = 1
let num2 = 2
let sum = num1 + num2 // TS 推断出 sum 是 number 类型
let obj = {
name: 'LinYY',
age: 18
}
// obj.name = 23 // TS 推断进去的类型 同样不能再批改
// 须要类型注解
function getSum(a, b) {return a + b}
const total = getSum(2, 3)四.TS 函数
TS 定义函数的办法和 JS 根本一样，不同的是 TS 能够要求有无返回值。
- TS 返回值的类型能够是 number string 等类型 也能够是 void 类型即没有返回值，也能够是联结类型。
// 要求返回值是 number 数字类型，上面两种写法等价。const fooFunc = (a: number, b: number): number => {return a + b}
//: (a: number, b: number) => number' 这里的具体意义是函数参数 a, b 类型是 number 型，返回值是 number 型，前面的 = 是跟函数的具体实现
const foo1: (a: number, b: number) => number = (a, b) => {return a + b}
// 返回值是 void 空类型
function sum2(a: number, b: number): void {console.log(a + b)
}
// 联结类型
function sum2(a: number, b: string): number | string {return a || b}TS 函数的类型解构正确用法
- 退出类型注解能防止意外的 bug，具体看实例
// 防止意外的 bug，当传入的 person 中没有 name 属性时上面的代码会报错，TS 能躲避这个问题给出报错提醒
const getNameA = (person: {}) => {console.log(person.name) // ==> undefined
}
const getName1 = (person: { name: string}) => {console.log(person.name)
}- 解构一个函数的参数是 对象 的形式是在前面跟着一个对象类型注解，像函数
add() - 个别函数的参数须要类型注解，返回值能够不必写类型注解，TS 能主动判断
// 不退出对象类型的注解{a: number, b: number}，返回值则不能保障是预期的类型.
function add({a, b}: {a: number, b: number}): number {
const c = a + b
return c
}
const sum1 = add({a: 1, b: 2})
// 参数为对象的正确注解形式
function getNumberA({a}: {a: number}) {return a}
const totalA = getNumberA({a: 1})
// 如这里不能保障放回值是 number 类型，因为 a, b 类型为 any 类型。function add2({a, b}): number {
const c = a + b
return c
}TS 中的 this，TS 是 JS 的超集，this 的指向法令都一样
- 了解 this 指向 对咱们应用 JS TS 特地重要，记住最要害的一点：this 永远指向最初调用它的那个对象
- 解决 es5 的 this 应用的坑能够应用 箭头函数 ， 箭头函数在创立时就保留了最近上下文的 this 的值。
this 指向最初调用 this 的对象
this 指向 示例一
let name = 'foo'
let f = {
name: "Lin",
a: function () {console.log(this.name) // ==> Lin
}
}
f.a() // f.a() == window.f.a()
// 为什么是 Lin？因为 对象 f 调用了函数 a()，再调用了 this。下面 window 调用了 f 对象，然而 f 才是最初调用 this 的对象再看示例二
var age = 18
function foo() {
let age = 20
console.log(this.age) // ==>18
}
foo() // == window.foo()
// 为什么是 18，不是 20 呢？下面 foo() 函数是 window 对象调用了，所以 this 指向 window，那么 应用的 age 也就是 window 下的 age再看示例三
let name = 'LinYY'
let a = {
name: 'lin',
c: function () {return function () {console.log(this.name)
}
}
}
let b = a.c()
b() // window.b()
// 为什么这里 打印的是 LinYY 呢？和示例二相似，b() 最初是被 window 对象调用了，所以还是“this 指向最初调用 this 的对象”
箭头函数解决 this 指向
// 问：如果就是想要应用对象 a 上下文呢？那么就能够应用 箭头函数。保留最近的上下文的 this，也就是这里的对象 a
let name = 'LinYY'
let a = {
name: 'lin',
c: function () {return () => {console.log(this.name)
}
}
}
let b = a.c()
b()
五. 数组和元组
数组的类型注解
数组的类型申明分为两种，一: 类型[], 二: Array< 类型 >，两种写法等价具体看上面示例
- 同变量的类型注解，数组也能够具备多个类型，number，string 等。
// 单类型注解数组 []，number[] 示意是数字类型的数组，其余同理
const numberArr: number[] = [1, 2, 3] // 等同于 const numberArr: Array<number> = [1, 2, 3]
const stringArr: string[] = ['1', '2', '3'] // // 等同于 const stringArr: Array<string> = ['1', '2', '3']
const undefinedArr: undefined[] = [undefined]
// 多类型注解数组 [ ]
const arr: (number | string)[] = [1, 2, '2']
// 对象数组
const objectArr: {name: string, age: 18}[] = [{
name: 'LinYY',
age: 18
}]- 对于简单的对象数组，能够采纳类型别名 type alias。
// 采纳类型别名 type alias
type User = {name: string, age: number}
const objectArr1: User[] = [{
name: 'LinYY',
age: 18
}]- 传入的数据结构和定义的 type alias 或 class 统一，也是能够的。
// 数据结构统一 TS 不会报错
class Teacher {
name: string = ''
age: number = 0
}
// 这里是一个 Teacher 类，那么每一个元素都应该是 Teacher 的实例，然而因为上面的对象数据结构和 Teacher 类统一，所以 TS 没有报错。const objectArr2: Teacher[] = [new Teacher(),
{
name: 'LinYY',
age: 18
}]
// 反例：因为 Teacher 类中没有 other 属性，TS 会提醒“other”不在类型“Teacher”中
const objectArr3: Teacher[] = [new Teacher(),
{
name: 'LinYY',
age: 18,
other: 0
}]元组 tuple 是一种非凡的数组 (TS 新增)
- 简略的说元组是 每个元素都有固定的类型且无限数目 的数组。
- 元组解决了一般数组不能规定每一项元素类型的问题。
- 元组的元素同样有对象的类型操作方法
- 在 3.1 及之前版本中，超出规定个数的元素称作越界元素，然而只有越界元素的类型是定义的类型中的一种即可。比方咱们定义的类型有两种：
string 和 number，越界的元素是string 或 number类型，属于联结类型，然而在 3.1 之后的版本，去掉了这个越界元素是联结类型的子类型即可的条件，要求元组赋值必须类型和个数都对应。越界元素间接时undefined类型
// tuple 元组的定义
let arrT: [number, string, number]
arrT = [18, 'LinYY', 3]
// 元素操作方法
arrT[0].toExponential(1)
arrT[1].split('i')
arrT[2] = 4
// 类型不对应就会报错
arrT = [18, 'LinYY', '1']
// 越界元素，间接报错
arrT[3] = '12' // 不能将类型“"12"”调配给类型“undefined”type tupleArr = [number, string, number]
const arrTB: tupleArr = [18, 'LinYY', 3]
const attTC: tupleArr[] =[[18, 'LinYY', 3],
[1, 'LinYY', 23],
[2, 'LinYY', 13]
]
// 一般数组不能束缚每一项元素的类型，上面元素的类型就不能够束缚
let list: (number | string)[] = ['LinYY', 18]
let listB: (number | string)[] = [18, 'LinYY']- 应用场景：批量的来获取参数，并且每一个参数的类型还不一样
/** 巧用元组 */
function getParams(...arry:[string, number, boolean]){const str: string = arry[0];
const num: number = arry[1];
const b: boolean = arry[2];
}六.interface 接口
- 简略点了解 interface 接口其实是一个类对象，类对象外面有属性或办法，同样通过 ‘.’ 元字符操控属性和办法，属性和办法又有相应的类型
string，number等 - 能定义对象类型和函数类型，个别应用在类型中，接口类型个别大写首字母
// 一个简略实例示例阐明 interface 是一个类对象
interface PersonA {
firstName: string,
lastName: string
}
function greeter(person: PersonA) {return person.firstName + person.lastName}
let userA = {
firstName: 'lin',
lastName: 'YY'
}
greeter(userA)- 还能定义当前 可能用到的属性，在属性前面加上
'?'，相似函数可选参数，如示例
// 可能用到的属性，在属性前面加上 '?'，interface Person {
name: string,
age: number,
age1?: number, // age1 是接口可能用到的属性。readonly ID: number
}
const person: Person = {
name: 'LinYY',
age: 18,
// age1: 0,
ID: 101
}- 只读属性 能对属性定义进行 只读操作
readonly，在对应属性背后加上 readonly 就能限定只读操作。只读属性被初始化后的值不能在被批改。
// 只读操作 readonly 不传入 age1 也能够通过校验
const getName = (person: Person) => { // Person 是下面的 interface 接口
console.log(person.age)
// console.log(person.age1) ==> 0
console.log(person.ID)
// person.ID = 200 // 报错 ID 只能读取，不能批改 ==> error TS2540: Cannot assign to 'ID' because it is a read-only property
}
getName(person)- interface 中还能定义方法，跟着的类型示意返回值类型。
// interface 中定义方法
interface Search{(a: number, b: number): boolean
}
let search: Search
search = function(a: number, b: number): boolean {return a >= b}
search(2, 3)
// 或
interface Action {
name: string,
age: number,
say(): string}
const applySay = (action: Action) => {console.log(action.say())
}
const action = {
name: 'LinYY',
age: 18,
say() {return 'hello TS'}
}
applySay(action)
// 上面定义了一个 say 类型的接口 承受一个 string 的参数，返回 string 类型的字符串
interface Say {(word: string): string
}
const foo: Say = (word: string) => {return word}
foo('hello TS') // ==> 'hello TS'- interface 间还能互相嵌套
/**interface 间还能互相嵌套 */
interface A {
name: string,
age: number
}
interface B {
/** person is interface a */
person: A
}- 也能够被类 class 通过
implements应用，实现（implements）是面向对象中的一个重要概念，简略点了解就是实现接口 interface 中属性和办法，详情参考官网 implements
// implements 和 extend 不同 extend 是继承父类，implement 是实现接口 interface 而且能够应用多个接口，用逗号隔开。// class A extends B implements C,D,E
interface Person {
name: string,
age: number,
age1?: number, // age1 是接口可能用到的属性。readonly ID: number
}
class test implements Person {
name = 'LinYY'
age = 18
ID = 301
}- interface 还能够被其余接口继承 extends
// 被其余接口继承 extends
interface Music {click: boolean}
interface Sentence {color: string}
interface Classic extends Music, Sentence {time: number}
let classic = {} as Classic
classic.click = false
classic.color = 'white'
classic.time = 220
// 或
interface PersonB {
name: string,
age: number,
age1?: number, // age1 是接口可能用到的属性。readonly ID: number
}
interface Teach extends PersonB {action(): string
}
const teach: Teach = {
name: 'LinYY',
age: 28,
ID: 501,
action() {return '222'}
}
// 或应用 '< 类型 >' 示意类型
const teachA = <Teach>{
name: 'LinYY',
age: 28,
ID: 501,
action() {return '222'}
}- interface 能够继承类吗？能够！
// interface 继承 class 示例
class Animal {fly: any}
interface Dog extends Animal {run(): void
}留神点
- interface 接口中不强制规定起初加上的属性，只有传入参数满足 interface 接口已有的属性，也能通过 如示例二，age，sex 属性不在接口 Person 中也能通过校验
// 示例二
function printName(obj: { name: string}) {console.log(obj.name)
}
let myObj = {name: 'LinYY', age: 18}
printName(myObj)
// 或
const getAge = (person1: Person) => {console.log(person1.age)
}
const per = {
name: 'LinYY',
age: 18,
ID: 201,
sex: 'male' // 不在 Person 接口内，也能够通过校验
}
getAge(per)- 然而以字面量模式传入不在接口中的属性，TS 会强校验导致报错。
// 以字面量的模式传入，TS 会强校验导致校验不通过。getAge({
name: 'LinYY',
age: 18,
ID: 201,
sex: 'male' // ==> 'sex' does not exist in type 'Person'
})interface 实际上在编译成 JS 后并没有相应的代码，其实 interface 就是 TS 来束缚代码代码标准的。
怎么无效解决当前开发的过程中可能会退出的属性呢？
- 能够间接在 interface 接口中退出当前可能会用到的属性如，string 类型 [propName: string]: any，如示例三
// 示例三 [propName: string]: any
interface User {
name: string,
age: number,
[propName: string]: any // 前期可能用到的 string 类型的属性
}
const getSex = (user: User) => {console.log(user.age)
}
const user = {
name: 'LinYY',
age: 18,
ID: 201,
sex: 'male' // 不在 User 接口内，但也能通过
}
getSex(user)
// 以字面量的模式传入也能够。getSex({
name: 'LinYY',
age: 18,
ID: 201,
sex: 'male'
})interface 和 type alias 关系
两者用法下面没有太大的区别，同样都能够扩大，只是语法不同，type 应用穿插类型
&。而且两者相互之间能够继承。然而 interface 的利用场景更加的广，可能应用 interface 就不必 type
// interface 和 type alias
/** ifc is interface */
interface Ifc {
name: string,
age: number
}
/** T is type alias */
type T = {
name: string,
age: number
}
/* interface 和 type alias 扩大示例 */
interface IfcName {name: string}
interface IfcAge extends IfcName {age: number}
type TName = {name: string}
/** TAge 继承了 TName 的 name 属性 */
type TAge = TName & {age: number}
const tAge : TAge = {
name: 'LinYY',
age: 18
}
/* interface 和 type alias 互相继承示例 */
/** interface extends type alias */
interface IfcAge extends TName {age: number}
/** type & interface alias */
type TypeName = IfcAge & {name: string}更多细节 官网 / 或
七.class 类
TS 中类的继承和定义和 JS 基本一致
- 同样也能重写父类的属性
- 子类中有结构器 就必须要调用 super()。
// TS 中类的定义
class PersonA {
name: string
constructor(msg) {this.name = msg}
getName() {return this.name}
}
const personA = new PersonA('LinYY')
console.log(personA.getName()) // ==> LinYY
// TS 类的继承
class Student extends Person {say() {return this.name}
getName() {return 'LinYY' // 重写父类 getName 办法}
}
const student = new Student()
console.log(student.say()) // ==> LinYYTS 类中的拜访类型，结构器和 JS 也基本一致
拜访类型 private，public，protected
- 当类的属性不写访问类型时，默认是 public。public 在类的内外都能够拜访。
- private，protected 都只能在类内应用，另外 protected 能够在继承的子类中应用。
constructor 结构器，在类实例初始化时执行。
- TS 中使用
constructor示例如下。 - 子类继承父类，子类中应用
constructor，就须要调用super()函数。
// constructor 示例
class PersonB {
public name: string
constructor(name: string) {this.name = name}
}
// 简化写法，举荐。// class PersonB {// constructor(public name: string) {//}
// }
const personB = new PersonB('LinYY')
class TeacherA extends PersonB {constructor(public age: number) {super('LinYY') // 初始化父类的 name
}
}
const teacher = new TeacherA(18)- class 的基本概念和用法能够拜访 阮老师的 ES6 入门教程
- TS 动态属性 static 和 JS 一样。在类的内外都是通过类名来间接拜访，且不能被继承，在静态方法中应用另一个静态方法能够间接调用 this。非静态方法不行**
// static
class GetAge {
static age = 18
static printAge() {console.log(GetAge.age)
}
static setAge(msg: number) {
this.age = msg
this.printAge()}
}- 和 interface 一样 class 也能够当作接口应用
// 将 class 当作接口应用
class A {
x: number
y: number
constructor(x: number, y: number) {
this.x = x
this.y = y
}
}
interface B extends A {z: number}
let printA: A = {x: 2, y: 3}TS 类中的动态属性，取值函数（getter）和存值函数（setter），对某个属性设置存值函数和取值函数，拦挡该属性的存取行为。
Getter 的应用
- 定义 get 的属性外表上是一个函数，在调用时不须要加上 ‘()’，这是 get 的写法。
- 拜访类中的公有属性能够通过 get 属性，写入一个‘办法’返回公有属性
Setter 的应用
- 设置公有属性能够通过 set 属性，同样也是写入一个‘办法’，简略的说也就是赋值
class Person {constructor(private _name: string){} // 公有属性个别加下划线 '_'
get name() {return this._name}
set name(rename: string) {this._name = rename}
}
// get
const person = new Person('LinYY')
console.log(person.name) // ==> LinYY 调用 get 上面的 name 属性
// set
person.name = 'LinYYB' // 调用 set 上面的 name 属性同时赋值
console.log(person.name) // ==> LinYYB润饰器 readonly 也能够设置类的只读属性
// 装璜器 `readonly` 用来装璜“类”的 `name` 属性。class PersonB {
readonly name: string
constructor(private _name: string){this.name = _name} // 公有属性个别加下划线 '_'
}抽象类 abstract 目标是将有很多共性的办法或属性抽离进去
- 抽象类个别拿来做公共的类。
- 抽象类外面能够写入形象办法，形象办法不能具体的实现，如
getApiData()。 - 抽象类只能被继承不能被实例化。
- 子类继承抽象类后，抽象类的形象办法必须在子类外面实现，否则报错。
- 抽象类和 interface 有类似，interface 同样也能够抽离一些专用办法和被继承。
import axios from 'axios'
// 抽象类 abstract
abstract class Classic {
name: string
async submit() {return 'LinYY'}
abstract getApiData() // 一个形象办法}
// const classic = new Classic() // error: 无奈创立抽象类的实例，只能被继承
class Music extends Classic {async getApiData() {return await axios.get('api1URL').then( res => {console.log(res)
}).catch( e => {console.log(e)
})
}
}
class Book extends Classic {async getApiData() {return await axios.get('api2URL').then( res => {console.log(res)
}).catch( e => {console.log(e)
})
}
}
class Sentence extends Classic {async getApiData() {return await axios.get('api3URL').then( res => {console.log(res)
}).catch( e => {console.log(e)
})
}
}八.TS 穿插类型和联结类型和类型爱护
穿插类型
- 穿插类型通过
'&'将两个或多个类型合并到一起 - 穿插类型能够获取合并类型的所有属性
// 穿插类型
interface Colors {red: string}
interface Rectangle {
height: number
width: number
area: () => number}
// param 参数能够拜访类型 Colors 和 Rectangle 所有属性
function getArea(param: Colors & Rectangle) {
param.height = 2
param.width = 3
param.red = 'red'
param.area = (): number => {return param.height * param.width}
}联结类型
- 通过
'|'运算符将两个类型组合在一起 - 联结类型能够间接提醒出共有属性，但不能提醒出公有属性
// 联结类型
let bar: string | number = 12
bar = '12'
interface Bird {
fly: Boolean;
sing: () => {}
}
interface Dog {
fly: Boolean;
dark: () => {}
}
// animal 参数能够是 Bird 或 Dog，语法提醒能够间接提醒出共有属性 fly，然而不能间接提醒出 sing 和 dark。function trainAnimal(animal: Bird | Dog) {
animal.fly
// animal.dark() 这里间接报错，因为不能确保 animal 蕴含 dark 办法。}类型爱护
- 类型断言：让编辑器采纳开发者的类型申明
- 类型断言，通过
as，通知 TS 以后的类型
// 类型爱护——类型断言 as
function trainAnimal1(animal: Bird | Dog) {if (animal.fly) {(animal as Bird).sing() // 间接通知 TS 这里 animal 是 Bird 类型
// 或上面的一种写法
// (<Bird>animal).sing()} else {(animal as Dog).dark()}
}- 通过
in判断含有的公有属性
// in 判断
function trainAnimal2(animal: Bird | Dog) {if ("sing" in animal) { // 判断 animal 中是否含有公有属性 sing
animal.sing()} else {animal.dark()
}
}- typeof，instanceof 类型于下面两种都能够作类型爱护
// typeof 类型爱护
function trainAnimal3(paramA: number | string, paramB: number | String) {if (typeof paramA === "string" && typeof paramB === "string") {return paramA + paramB}
return
}- null 的类型爱护 能够通过
'!'操作符
// null 类型爱护
function fn(params: string | null) {
// params.length // 对象可能为 "null"
return params!.length // 将参数的可能类型 null 类型排除
}
fn('12121')
fn(null)九.Enum 枚举类型
- 概念：枚举是什么？ 枚举是一种数据类型，是对 JavaScript 类型的补充，其实也是一个对象
- 用处：个别是对类似的类型赋予一个敌对的名字，如色彩有很多种通称为 Color 等
- 应用：同样相似于 interface 接口，enum 也是通过元字符 ‘.’ 操控属性
- 每一个枚举类型都有一个下标，默认从 0 开始，下标值能够用等号赋值批改
- 从哪里扭转枚举下标值，则按那里开始下标加一，如 ONLINE = 3，则 OTHERS 将会打印出 4，OFFLINE 不变还是 0
- 援用 enum 的下标，同样也能够打印出下标对应的值。
// 枚举是一种数据类型
enum Color {
Red,
Blue,
Black
}
let color: Color
// 类型也只能是枚举 Color 类型
color = Color.Red
color = Color.Blue
console.log('color', color) // ==> 打印出下标 1
// 枚举个别首字母大写
enum Status {
// OFFLINE = 1,
OFFLINE,
ONLINE,
OTHERS
}
// 比照罕用的 JS 代码
// const Status = {
// OFFLINE : 0,
// ONLINE: 1,
// OTHERS: 2
// }
function getStatus(status: Number) {if(status === Status.ONLINE) {return 'online'}else if (status === Status.OFFLINE) {return 'offline'}else if(status === Status.OTHERS) {return 'others'}
return 'error'
}
const result = getStatus(Status.OFFLINE)
console.log(result)
// 上面代码间接打印出 enum 的下标值
console.log(Status.OFFLINE)
console.log(Status.ONLINE)
console.log(Status.OTHERS)
// 打印下标对应的属性
console.log(Status[0])
console.log(Status[1])
console.log(Status[2])原理：为什么枚举能够通过下标的形式索引 key 和 反索引 value 呢？
- 通过 tsc 编译后的 js 文件能够看到 enum 其实一个对象，如 Color[Color[“Red”] = 0] = “Red” ; 通过 “Red” 能够查看下标 0，通过下标 0 也能够查看 “Red”
// 通过 tsc 编译后的 js 文件
var Color;
(function (Color) {Color[Color["Red"] = 0] = "Red";
Color[Color["Blue"] = 1] = "Blue";
Color[Color["Black"] = 2] = "Black";
})(Color || (Color = {}));十.TS 泛型
泛型概念：泛指的类型不具体针对某一特定的类型。
- 应用
'< 类型 >'示意泛型，类型能够是任意变量
// 泛型简略示例
function foo<T>(a, b, c) {return a || b || c}
// 或
function foo<U>(a, b, c) {return a || b || c}
function id<T>(a: T, b: T, c: T): T {return a || b || c}
// 不针对某一特定类型，能够是 number，string，Boolean，interface 等类型，且应用的类型必须统一。interface Type {
a: number
b: number
c: number
}
let t: Type = {a: 2, b: 3, c: 4}
id(1,2,3)
id('1', '2', '3')
id(false, true, false)
id(t.a, t.b, t.c)
// 接口泛型 举荐写法，间接应用泛型参数 T 代表指定类型
interface Uni<T> {
a: T
b: T
c: T
}
let uni: Uni<number> = {a: 2, b:3, c:4}
id(uni.a, uni.b, uni.c)函数泛型 Generics，泛指的类型和一般类型用法基本一致
- TS 的泛型是 TS 比拟高级的用法，对于更多的 TS 泛型能够参考这篇 你不晓得的 TypeScript 泛型
- 泛型起到的作用有点相似待指的两头类型，具体看例子
function add(a: number | string, b: number | string) {return `${a}${b}`
}
// 如果要求输出的参数 a, b 只能是同一个类型的参数该怎么实现？上面几种写法都不能实现
add(1, 2)
add('1', 1)
add(1, '1')
// 上面援用函数泛型实现，<T> 就是函数 add 要泛指的类型，前面的参数 a，b 都要是这个类型。function add<T>(a: T, b: T){return `${a}${b}`
}
// 让输出的类型是 number 或 string，即 <T> 代表类型 Number 或 String
add<number>(1, 1)
add<string>('1', '2')
add<number>(1, '1') // 提醒报错 "1" 的类型不是 number 型
add<string>('1', 2) // 提醒报错 2 的类型不是 string 型- 泛型同样能够继承 interface。
// 泛型同样能够继承 interface。interface LengthPro {
age: number | null
moreAge: number
}
function arg<T extends LengthPro>(params: T) {return params.age || params.moreAge}
arg({age: 18, moreAge: 20})
arg({age: null, moreAge: 20})- 还能够对函数泛型进行束缚
// 将函数的泛型指定为 ABC，参数的泛型是数组类型 ABC，返回值也是数组类型 ABC。function func<ABC>(a:ABC[]): ABC[]{return a}
// 或
function func1<ABC>(a:Array<ABC>): Array<ABC> {return a}
func<number>([123])
// 谬误的输出
func<number>(123) // 类型“123”的参数不能赋给类型“Number[]”的参数- 泛型中能够写入多个泛型，对函数的参数有不同的类型束缚
// 多泛型束缚
function moreT<T, Y>(a:T, b: Y) {return `${a}${b}`
}
moreT<number, string>(1, '2')
// K extends keyof T，让泛型 K 继承 T 的 keyof 的属性
function getObjVal<T, K extends keyof T>(obj:T, key: K) {return obj[key]
}
let o = {a: 1, b: 3, c: 4}
getObjVal(o, 'a')
getObjVal(o, 'd') // 'd' 不是 对象 o 上面的 keyof 属性。类的泛型
// 类泛型的一般写法
class GenericType<T> {
numberVal: T
constructor(numberVal: T) {this.numberVal = numberVal;}
add(x: T, y: T) {}}
let numberType = new GenericType<number>(2)
numberType.numberVal = 1
numberType.add(2, 8)
let stringType = new GenericType<string>('a')
stringType.numberVal = 'b'
stringType.add('a', 'b')
// 或
class GetItem<T>{constructor(private data: T[]) { }
getName(index: number) {return this.data[index]
}
}
const getItem = new GetItem(['LinYY'])
const res = getItem.getName(0)
console.log(res)- 泛型能够被继承，继承后必须全副含有继承对象的所有属性
// 继承示例 extends
interface personA {
name: string,
age: number
}
class GetItemSecond<T extends personA>{constructor(private data: T[]) { }
getName(index: number) {return this.data[index].name
}
}
const getItemSecond = new GetItemSecond([
{
name: 'LinYY',
age: 18 // 这里不传入 age 时会飘红，必须传入所有属性
}
])
const res1 = getItem.getName(0)
console.log(res1)- 也能够束缚泛型的类型范畴，number 或 string
// 束缚泛型的范畴
function getData<T extends number | string>(param: T) {return param}
getData(1)
getData('1')- 多泛型的束缚用逗号分隔，泛型之间也通过继承 extends 来互相束缚
// 多泛型束缚
function moreT<T, Y>(a:T, b: Y) {return `${a}${b}`
}
moreT<number, string>(1, '2')
// K extends keyof T，让泛型 K 继承 T 的 keyof 的属性
function getObjVal<T, K extends keyof T>(obj:T, key: K) {return obj[key]
}
let o = {a: 1, b: 3, c: 4}
getObjVal(o, 'a')
getObjVal(o, 'd') // 'd' 不是 对象 o 上面的 keyof 属性。下面泛型的应用规定不局限在类或函数内
十一.TS 配置项
tsconfig.json 文件文档
tsconfig.json 是 TS 编译成 JS 代码的辅助文件
- 调用 tsconfig.json 文件间接应用 tsc 命令即可，须要留神的是这样会编译所有 ts 文件
"compilerOptions"是各编译的选项，能够增加额定的配置项比方 “include” 指定要编译的 TS 文件, “exclude” 指定不要编译的 TS 文件，示例"include": ["/demo.ts"]。
罕用的 compilerOptions 编译配置项
"removeComments": true，编译过程中主动去掉正文"noImplicitAny": true，要求编译的 TS 代码不能带有未指定的类型，即使是 any 也须要显示的写明"strictNullChecks": true,强制进行 null 校验。"rootDir" 和 "outDir",rootDir 是指定要 build 打包的文件，而 outDir 是 build 后的生成文件，两者前面都是跟指定的目录文件。"allowJs": true，是将 js 文件也编译一遍，编译成 es5 的文件"checkJs": true，能间接像 TS 一样检测 JS 的语法错误，不须要在运行后才提醒有错"noUnusedLocals",“noUnusedParameters” 用来检测定义了却没有被应用的变量或函数参数。
十二.TS 高级技巧(继续更新中)
很感激你能看到这里，心愿这份教程能对你有一点点帮忙 ????，我是林一一，下次见。
掘金地址
博客地址 体验成果更好。**
源码地址 欢送 start (issue)，当前会一直的更新内容**
参考：《Typescript 官网》《Typescript 实战技巧》《你不晓得的 Typescript 高级技巧》《Typescript 高级技巧》《你不晓得的 Typescript 泛型》《Typescript 深入浅出》。。。
正文完
