TypeScript(微软, 趋势)为js提供了静态类型检测的能力
-
概念类
概念: JavaScript的超集语言(兼容js语法)
作用: 给js提供了类型系统和ES6的语法支持
与Flow的区别: Flow是类型检查工具, TypeScript是开发语言, 有自己的编译工具, 会最终转换成js
-
安装使用
官网: https://www.tslang.cn/docs/home.html
安装TS编译器:
cnpm i typescript -g安装完成, 提供tsc命令使用, 把ts文件转换成js文件
tsc ./index.ts -
TS的配置文件
创建
tsconfig.json配置文件,tsc --init设置常用的配置:
target: 转化后的js是es5模式
module: 转化后的js模块化方式
outFile:"outDir": "./dist",全部转化到dist文件夹下
rootDir:"rootDir": "./src",需要转化的是src目录下
strict: 转化后是否严格模式
TS的数据类型
- number类型
let a: number = 10;
let b: number = NaN;
let c: number = infinity;
// number还可以是八进制 十六进制
- string类型
let str: string = 'abc';
let str1: string = `这是模板字符串${str}`;
- boolean类型
let flag: boolean = true;
- 数组类型
// number型数组
let arr: Array<number> = [1, 2];
// number型数组
let arr1: number[] = [1, 2, 3]
- 元组
// 允许表示已知元素长度和类型, 两个元素, 第一个元素必须number
let arr2: [number, string] = []
// 越界访问时, 第三个元素既可以number也可以是string, 其他不允许
- void 空值
// 可以表示undefined
let res: void = undefined;
let res1: undefined = undefined;
let res2: null = null;
- never 类型, 用于不可能有返回值的函数
const fn = (): never => {
while (true) {
}
}
- 对象类型
let obj: object = {};
let obj1: object = [];
let obj2: {name: string, age: number} = {name: 'tt', age: 18};
- 枚举类型(enum)
enum ColorFool {
red = '红色',
yellow = '黄色'
};
let color: ColorFool = ColorFool.red;
- 类型断言
// 根据length属性, 推断它就一定是number
let str: any = 'abc';
// let len: number = str.length;
let len: number = (<string>str).length;
TS中的类
- 类的实现
class Animal {
// 和ES6不同, TS属性必须声明类型
type: string = '动物'
// 声明好属性之后, 属性必须赋值, 或者在构造函数中进行初始化(上下两种)
age: number
constructor (age: number) {
this.age = age;
}
eat () {
console.log('动物进食')
}
}
- 类的继承, 跟ES6类似
class Dog extends Animal {
name: string
constructor ( name: string, age: number) {
// 必须先继承父集的属性
super(age)
this.name = name;
}
// 子集的eat方法会覆盖父集的eat方法
eat () {
console.log('狗狗独有的')
}
}
-
类成员的访问修饰符
-
在类成员前通过添加关键字来设置当前成员的访问权限
- public 公开, 默认, 都允许访问
- private 私有, 只能在当前类内部做访问
- protected 受保护的, 只能在当前类或子类中访问
-
enum Color {
red = '红色',
yellow = '黄色',
green = '绿色'
}
class Car {
// public可以任意访问
public color: Color
constructor () {
this.color = Color.red
// this.run() // 可以内部访问
// this.loadPeople() // 可以内部访问
}
// 私有属性, 只能在Car类内部中使用
private run () {
console.log('run')
}
// 受保护属性, 只能类内部或者子类内部可以访问
protected loadPeople () {
console.log('载人')
}
}
// 外部访问
let car = new Car()
// car.color // public可以访问
// car.run() // 私有属性不可以被访问了
// car.loadPeople() // 被保护的属性不可以被访问了
// 子类访问
class Audi extends Car {
sayHi () {
// console.log(this.color) // public可以访问
// this.run() // 私有属性不可以被访问了
// this.loadPeople() // 被保护的属性可以被子类访问
}
}
// 子类的外部访问都可以
let audi = new Audi()
// audi.color // public可以访问
// audi.run() // 私有属性不可以被访问了
// audi.loadPeople() // 被保护的属性不可以被访问了
- 类的只读属性和参数属性
class Cat {
// 只读属性
readonly name: string
// 参数属性, 加了public, 相当于省去了声明属性和构造器中初始化的过程
constructor ( public type: string) {
this.name = '嘟嘟'
}
}
let cat = new Cat('噗噗')
// cat.name = 'test' // 只读属性不可以被改写
- 类的存取器
class Person {
// 私有属性 "_" 标记
private _name: string = ''
// 存取器, 就是get和set函数, 对存储值做校验
get name (): string {
return this._name
}
set name (value: string) {
this._name = value
}
}
let p = new Person();
console,log(p.name)
TS中的接口, 可选属性, 只读属性
概念: 一个约定或者规范, 限制用户传入的参数, 关键字
interface可选属性, 此属性可传可不传
接口内部还可以只读属性, 不可以重新赋值
// interface 关键字声明接口, '?'可选属性, 可传可不传
interface AjaxOption {
url?: string,
// 只读属性
readonly type: string,
data?: object,
success(data: object):void,
// 额外的属性检查, 告诉接口可能还存在其他多个参数
[propName: string]: any
}
// 创建ajax方法, 参数是定好的接口
const ajax = (options: AjaxOption) => {}
// 调用, 如果不按接口来就会报错
// ajax({})
- 函数类型的接口
interface SumInterFace {
(a: number, b:number):number
}
// 函数
const sum: SumInterFace = (a: number, b: number) => { return a + b }
- 类的类型接口(数据库访问层代码接口), 关键字: implements
interface PersonInterFace {
name: string,
age: number,
eat(): void
}
// 类实现接口, 必须使用关键字`implements`
class XiaoMing implements PersonInterFace {
name = '小明'
age = 18
eat () {
console.log(123)
}
}
// 可用于数据库访问层的代码实现
-
接口的继承
- 接口继承接口, 关键词是:
extends, 还有多接口继承,分隔
interface TwoDPointInterFace { x: number, y: number } interface TimeInterFace { time: string } // 3D的点继承2D的点还有时间轴, 关键字extends interface ThreeDPointInterFace extends TwoDPointInterFace, TimeInterFace{ z: number }- 接口继承类
// 定义类 class Bird { type: string = '鸟' fly () { } } // 定义继承类的接口 interface MiniBird extends Bird { } // 实现接口 let flyingBird: MiniBird = { type: '', fly () { } } - 接口继承接口, 关键词是:
