TypeScript

TypeScript是由微软开发开源的JavaScript的一个超集,主要提供了类型系统和对ES6的支持,TypeScript增加了代码的可读性和可维护性

安装

  1. 全局安装:npm i -g typescript
  2. 编译文件:tsc hello.ts
  3. 约定文件以.ts为后缀,编写react时以.tsx为后缀

数据类型

基本类型

  • string,number,boolean,null,undefined,enum,symbol
  • 空值一般用void表示,void可以表示变量,也可以表示函数无返回值
  • 任意值Any,用来表示允许赋值为任意类型,变量在声明时未指定类型并且未赋值,就是任意值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var str:string = "hello"
var num:number = 1
var bo:boolean = true
var un:undefined = undefined
var nu:null = null
var an:any = "1"
var an2 // 声明未赋值,未指定类型,就为任意值

an = 1
an2 = true
an2 = "str"

// undefined和null是其他类型的子类型
// 所以str可以赋值为undefined和null
str = undefined
str = null

// void规定函数无返回值
var fun = function():void{
//xxxxx
}

联合类型

  • 联合类型表示取值可以为多类型中的一种,只能访问联合类型中共有的属性和方法
1
2
3
4
5
var t:string|number = "11"
t = 1

// string和number都有toString()方法
console.log(t.toString())

对象类型

  • 接口:可描述的一部分抽象行为,接口中可定义可选属性,只读属性,任意属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 接口
// 强约束
interface Ista {
name: string;
age: number;
}

var obj1: Ista;
obj1 = { name: "名字", age: 10 };

// 可选属性
interface Ista2 {
name: string;
age?: number; //?代表可有可无的属性
}
var obj2: Ista2;
obj2 = { name: "hh" }; // 不赋值age也没事

// 动态属性
interface Ista3 {
name: string | number; // 联合类型
age?: number;
[propName: string]: any; // 动态属性,必须指定any
}
var obj3: Ista3;
obj3 = { name: "xxx", sex: "男", home: "河南" }; // 可以动态添加

// 只读属性
interface Ista4 {
name: string;
readonly age?: number;
}
var obj4: Ista4 = { name: "张三", age: 20 };
obj4.name = "李四" // 可以更改
// obj4.age = 10 // 报错,后续不能修改

数组类型

  • 类型加方括号
1
2
3
var arr: number[] = [1, 2, 3];
var arr2: string[] = ["1", "2", "3"];
var arr3: any[] = ["1", 1, true];
  • 数组泛型 Array<elemType>表示法
1
2
3
var arr: Array<number> = [1, 2, 3];
var arr2: Array<string> = ["1", "2", "3"];
var arr3: Array<any> = ["1", 1, true];
  • 接口表示法
1
2
3
4
5
6
7
8
9
10
11
12
13
interface Istate {
name: string;
age: number;
}

interface IArr {
// 限制这个接口的数组类型为另一个接口的对象
[index: number]: Istate;
}

var arrType: IArr = [{ name: "张三", age: 10 }];
var arrType2: Array<Istate> = [{ name: "张三", age: 10 }];
var arrType3: Istate[] = [{ name: "张三", age: 10 }];

函数类型

  • 声明类函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function fun1(name: string, age: number): number {
return age;
}
var ageNum: number = fun1("张三", 19);

// 函数参数不确定时
function fun2(name: string, age: number, sex?: string): number {
return age;
}
var ageNum2: number = fun2("张三", 19, "女");

// 赋值默认值
function fun3(name: string = "李四", age: number = 10, sex?: string): number {
return age;
}
var ageNum2: number = fun3("张三", 19, "女");

  • 表达式类型函数
1
2
3
4
5
6
7
8
9
10
11
var fun4: (name: string, age: number) => number = function(
name: string = "李四",
age: number = 10
): number {
return age;
};

interface Ifun {
(name: string, age: number): void; // 无返回值
}
var fun5: Ifun = function(name: string = "李四", age: number = 10) {};
  • 联合类型函数
1
2
3
4
5
6
7
8
9
// 对于联合类型的函数,可以采用重载的方式
function getValue(value: number): number;
// 重载
function getValue(value: string): string;
function getValue(value: number | string): number | string {
return value;
}
var a: number = getValue(1);
var b: string = getValue("1");

类型断言

  • 语法:<类型>值或者as类型
  • 类型断言不是类型转换,不能断言联合类型中不存在的类型
1
2
3
4
function getAssert(name: string | number) {
// return (<string>name).length;
return (name as string).length;
}

类型别名

  • 给类型起一个名字,采用关键字type
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 类型别名
type strType = string | number | boolean;
var str: strType = "10";
str = 10;
str = true;

// 接口类型别名
interface muchType1 {
name: string;
}
interface muchType2 {
age: number;
}

type muchType = muchType1 | muchType2;
var obj1: muchType = { name: "张三" };
var obj2: muchType = { age: 10 };
var obj3: muchType = { name: "张三", age: 10 };

// 限制字符串
type sex = "男" | "女";

function getSex(s:sex): string {
return s;
}
getSex("男");

枚举

  • 枚举成员会被赋值从0开始递增的数字,同时也会被枚举值到枚举名进行反向映射
  • 枚举类型会被编译成一个双向映射的对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
enum Days {
Sun,
Mon,
Tue,
Web,
Thu,
Fri,
Sat
}
console.log(Days.Sun) // 打印0
console.log(Days.Sat) // 打印6
console.log(Days[1] === "Mon"); // true

enum Days2 {
Sun = 3,
Mon,
Tue,
}
console.log(Days.Sun); // 打印3

类修饰符

  • public,private,protected
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
class Person {
// 当一个类的成员变量没有修饰的时候,默认是public进行修饰
name = "张三";
// 设置private在外界不能访问
private age = 10;
protected sex = "男";
say() {
console.log("我的名字:" + this.name);
}
}

var p = new Person();
p.say();
p.name;

// 创建子类
class Child extends Person {
eat() {
// 访问父类的方法,用super
// 不能访问父类的private属性
super.say();
// 可以访问protected属性的
console.log(super.sex);
}
// 静态方法不需要实例对象就可以调用
// 静态方法中不能用 this
static test(){
console.log("test")
}
}

var c = new Child();
c.eat();
// 子类继承了父类,子类就可以访问到父类的公开的属性和方法
c.name;
// 可以直接调用静态方法
Child.test()

泛型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function getArr<T>(length: number, value: T): Array<T> {
let arr = [];
for (var i = 0; i < length; i++) {
arr[i] = value;
}
return arr;
}

var strArr: string[] = getArr<string>(6, "1");
// 不传类型的时候,根据数字类型倒推
var numArr: number[] = getArr(6, 1);


// 接口中使用泛型
interface IgetArr {
<T>(name: string, value: T): Array<T>;
}

let fun: IgetArr;
fun = function(name: string, value: T): Array<T> {
return [];
};

var s: number[] = fun("张三", 1);

相关文章

JavaScript基础

JavaScript高级

Jquery基础

Jquery高级

Bootstrap

Ajax和Json

DataTables

Sweetalert2

zTree使用

微信小程序