TypeScript（学习笔记二）

掘友
56 阅读5分钟

一、什么是TyoeScript

1. JavaScript的超集，可以编译成JavaScript，添加了类型系统的JavaScript，可以适用于任何类型的项目。
2. TypeScript特性：静态类型、强类型。

二、安装并编辑TypeScript

1. 安装命令：npm install -g typescript
2. 编辑命令：tsc index.js
3. 指定编译目录命令：tsc --outFile ./js/index.js index.ts

三、基本数据类型

布尔值、数值、字符串、空值（void）、null、undefined、任意值（any）

四、类型推论

在有些没有明确指出类型的地方，类型推论会帮助提供类型

五、高级类型

1. 联合类型(谨慎使用)
一个代码库希望传入 number 或 string类型的参数
2. 交叉类型

六、接口

1. 介绍：TypeScript的核心原则之一是对值所具有的结构进行类型检查。 2. 作用：就是为这些类型命名和为你的代码或第三方代码定义****契约。 3. 例子：定义与使用
interface Person{ name : string age : number }
let tom:Person = {name : 'tom',age : 15}

接口一般首字母大写
赋值的时候，变量的形状必须与接口一直

4.可选属性
interface Person{ name : string age? : number }
let tom:Person = {name : 'tom'}
5.任意属性
interface Person{ name : string, age : number, [propName : string] : any }
let tom:Person = {name : "tom",gender1 : 1,gender2: 2}
6.只读属性 interface Person{ readonly name : string, age : number, [propName : string] : any }
let tom:Person = {name : "tom",gender1 : 1,gender2: 2}
tom.name = "jack" 报错

七、数组

let list: number[] = [1, 2, 3];

不能push其他类型 let list: ant[] = [1, 2, 3]; 可以任意类型

八、函数

1. 函数声明式

function sum (x:number,y:number):number{
    return x + y 
}

2. 函数表达式

let sum = function (x:number,y:number):number{
    return x + y
}
手动定义返回类型
let myAdd: (baseValue: number, increment: number) => number 
                                = 
function(x: number, y: number): number { return x + y; };

输入多余的或者少于要求的参数，是不允许的。 3. 用接口定义函数的形状

interface SearchFun {
    （source ： string，substring ： string） ：boolearn
}
let mySearch : SearchFun；
mySearch = function(source ： string，substring ： string){
    return source !== -1
}

4.可选参数和参数默认

和接口同步，可选参数要在必传参数后面解决这个问题，给必传参数添加默认值 5.剩余参数 rest参考es6的rest ... 6.重载 884L8~L%~VSV0SXTLP@ZT1W.png

九、类型断言

作用：手动指定一个值的类型 1.将一个联合类型断言为指定类型

image.png

2.将一个父类断言为一个更加具体的子类
1）typeof方法

image.png
2）instanceof方法

image.png

统一使用as 3.将任意一个类型断言为any
（window as any。foo = 1
直接在ts上写 window.foo = 1 会报错
4.将any断言为具体类型

image.png
5.断言限制

两者之间有共同的属性或方法，才可以互相断言 6.双重断言（不兼容也可以断言，除非迫不得已，千万别用）

image.png
7.类型断言vs类型转换

类型断言只会影响TypeScript编译时的类型，类型断言语句在编译结果中会被删除
断言不会真正影响变量，要想改变变量类型，只能调用类型转换方法

image.png
8.类型断言vs类型声明

类型声明必须所有的属性和方法一致
类型声明比类型断言更严格 9.类型断言vs泛型

image.png
10.使用type关键字定义类型别名和字符串字面量类型

使用type创建类型别名
字符串字面量类型用来约束取值只能是某几个字符串中的一个

十、元祖

数组合并了相同类型的对象，元祖合并了不同类型的对象

十一、枚举

enum Days{sun,man,tue...} 通过下标获取值

十二、类

1.类的概念

  • 类：定义了一件事物抽象的特点，包含属性和方法
  • 对象：类的实例，通过new生成
  • 面向对象(OOP)的三大特性：封装、继承、多态
  • 封装：将数据的操作细节隐藏起来，只暴露对外的接口，外部调用不需要知道细节，就能通过对外提供的接口来访问该对象，同时也保证了外界无法任意修改对象内部的数据。
  • 继承：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。
  • 多态：由继承而产生了相关不同的类，对同一个方法可以有不同的响应
  • 存取器：用以改变属性的读取和赋值
  • 修饰符：是一些关键字，用以限定成员或类型的性质。
  • 抽象类：提供其他类的基类，抽象类不允许被实例化，抽象类中的抽象方法必须被子类中被实现
  • 接口：不同类之间共有的属性和方法，可以抽象成一个接口，接口可以被类实现，一个类只能继承自另一个类，但是可以实现多个接口。

image.png
2.类的存取器get、set

image.png
3.类的静态方法 image.png
4.修饰符（public、private、protected）

  • public：全局的、公共的当前类涉及到的地方都可以使用 image.png
  • private：私有的、只能在当前类的内部使用，无法在实例化后通过类的实例属性来访问 image.png
  • protected：受保护的、private不允许子类使用，使用protected就可以了

image.png
5.参数属性和只读属性

image.png
6.抽象类

提取基类，提取共有的方法和属性
抽象类不允许被实例化（new）
抽象类中的抽象方法必须被子类实现

image.png
7.类与接口

  • 类继承接口

image.png

  • 接口继承接口

image.png

  • 接口继承类（不推荐）

image.png

十三、泛型

是指在定义函数、接口或类的时候，不预先指定具体类型，而在使用的时候指定类型的一种特性。
可以不指定类型，通过类型推断来自动推断出来

image.png
1.泛型：多个类型参数

image.png
2.泛型约束

在函数内部使用泛型变量，一开始不知道是什么类型，所以不能随意的操作他的属性和方法。
泛型约束就是指定一个接口，调用传指定类型。 3.泛型接口
4.泛型类

uni-app+ts vue + ts react+ts 小程序+ts

avatar
文章
阅读
粉丝