TypeScrtpt学习

TypeScript 开发环境搭建

安装TS

下载TS的编译器，它能够把TS文件转为JS文件。

npm install -g typescript
1

编译TS

手动编译：使用tsc命令将一个TS文件转为JS文件。

tsc index.ts   
//如果报错ts-node : 无法将“ts-node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
//可以试试 npx tsc index.ts   这种运行成功后如果需要使用Code Runner插件的话，需要将插件运行命令更换为npx开头，往下看有更换的步骤
1
2
3

自动编译：编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

tsc index.ts -w  
//如果不行的话可以试试 npx tsc index.ts -w
1
2

vsCode中运行TS

在 vsCode中运行TS文件，也可以直接运行JS文件

• VSCode安装Code Runner插件

• 全局安装ts-node模块：npm i ts-node -g

• 采用右键Run Code 或者 快捷键alt+ctrl+n可以运行TS文件(这里要记得项目路径中不能含有中文字符,否则找不到路径,或者直接报错)

(如果输出代码有中文乱码的话，可以去Code Runner插件设置搜索Run in Terminal 将其选中)

(如果路径不含中文还是报错的话，在插件设置随便找个在setting.json中编辑点进去找到code-runner.executorMap选项里面找到typescript值更换为npx ts-node 保存，这样右键运行时就会按照指定命令运行)

以下所有的笔记参考都来自于此网站,点击就能进入,特别适合学习tyscript

类型声明

Ts代码

let num:number = 10
num=11 //num只能为number类型


function abc(a:string){
  console.log('a',a);
}
abc("123") //只能传入string类型的值

// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值
1
2
3
4
5
6
7
8
9
10
11

编译后的JS代码

var num = 10;
num = 11; //num只能为number类型
function abc(a) {
    console.log('a', a);
}
abc("123"); //只能传入string类型的值
// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值
1
2
3
4
5
6
7
8

基础数据类型

Ts代码

// boolean类型
let flag:boolean = true
flag = false  //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错

// number类型(支持每个进制)
let a:number = 123 //十进制
let a1:number = 0b1010 //二进制
let a2:number =0o12 //八进制
let a3:number =0xa //十六进制
a=11 
// a="11" 报错,不能给string类型

// string类型
let str:string = "123"
// str = 123 报错
str = ''

// undefined和null类型(作为了解,不经常用)
let u:undefined = undefined
let n:null = null
// u=123 // 报错

// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
let b:number = undefined
let str1:string = null
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用
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

编译后的JS代码

// boolean类型
var flag = true;
flag = false; //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错
// number类型(支持每个进制)
var a = 123; //十进制
var a1 = 10; //二进制
var a2 = 10; //八进制
var a3 = 0xa; //十六进制
a = 11;
// a="11" 报错,不能给string类型
// string类型
var str = "123";
// str = 123 报错
str = '';
// undefined和null类型(作为了解,不经常用)
var u = undefined;
var n = null;
// u=123 // 报错
// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
var b = undefined;
var str1 = null;
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用

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

数组和对象类型

Ts代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
let arr1: number[] = [1, 2, 3]
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12]
// 第二种方式 泛型
let arr2: Array<number> = [10, 20, 30]
arr2 = [40, 50, 60, 70, 80]

// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
let obj:object = {}
// obj=123 报错
// obj="123" 报错
obj=null
obj=undefined
obj=[]
obj=new String() //实例对象
obj =String //类也是属于object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

编译后的JS代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
var arr1 = [1, 2, 3];
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12];
// 第二种方式 泛型
var arr2 = [10, 20, 30];
arr2 = [40, 50, 60, 70, 80];
// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
var obj = {};
// obj=123 报错
// obj="123" 报错
obj = null;
obj = undefined;
obj = [];
obj = new String(); //实例对象
obj = String; //类也是属于object
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

any和void两种类型

Ts代码

// any 任何类型
let h:any=123
h="123"
h=true
h=null
h=undefined
h=[]
h={}

// 数组可以存any任意类型数据
let newArr:any[]=[1,"123",true,{}]
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 

// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1():void{
  console.log('123',123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错

// 下面代码代表没有任何类型
let v:void=undefined
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

编译后的JS代码

// any 任何类型
var h = 123;
h = "123";
h = true;
h = null;
h = undefined;
h = [];
h = {};
// 数组可以存any任意类型数据
var newArr = [1, "123", true, {}];
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 
// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1() {
    console.log('123', 123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错
// 下面代码代表没有任何类型
var v = undefined;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

类型推断

Ts代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型

// 两中情况下进行类型推断
// 1.定义函数时候
let t = 123
// t="123" //报错,ts在t=123时候将t的类型定义为了number

// 2.不赋值情况下定义为any类型
let g;
g=123
g="123"
g=true
g=undefined
g=null
g=[]
g={}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

编译后的JS代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型
// 两中情况下进行类型推断
// 1.定义函数时候
var t = 123;
// t="123" //报错,ts在t=123时候将t的类型定义为了number
// 2.不赋值情况下定义为any类型
var g;
g = 123;
g = "123";
g = true;
g = undefined;
g = null;
g = [];
g = {};
1
2
3
4
5
6
7
8
9
10
11
12
13
14

联合类型

Ts代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
let f: boolean | number | string = true
f = 123
f="123"
// f=[] //报错,没有进行联合声明

// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法
1
2
3
4
5
6
7
8

编译后的JS代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
var f = true;
f = 123;
f = "123";
// f=[] //报错,没有进行联合声明
// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法

1
2
3
4
5
6
7
8

接口

对象类型

Ts代码

// 接口是对行为的抽象,用于对「对象的形状（Shape）」进行描述。理解为一种约束
// 接口一般首字母大写
// 首字母一般为I
interface Person {
  name: string
  age: number
}

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
let tom: Person = {
  name: 'Tom',
  age: 25,
}

// 可选属性
// 有时我们希望不要完全匹配一个形状，那么可以用可选属性：
interface Person2 {
  name: string
  age?: number
}
// 属性?:值   就是可选属性的语法
let tom1: Person2 = {
  name: 'Tom',
}

// 任意属性
// 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
// 有时候我们希望一个接口允许有任意的属性，可以使用如下方式：
interface Person3 {
  name: string
  age?: number
  [propName: string]: any //如果有确定的类型,可以用确定的类型,但是一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集,还是建议使用any类型
  // [propName: string]: string | boolean | number
}

let tom2: Person3 = {
  name: 'Tom',
  gender: 'male',
}

// 只读属性
// 有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：
interface Person4 {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

let tom3: Person4 = {
  id: 89757,
  name: 'Tom',
  gender: 'male'
};

// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

编译后的JS代码

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
var tom = {
    name: 'Tom',
    age: 25,
}
// 属性?:值   就是可选属性的语法
var tom1 = {
    name: 'Tom',
}
var tom2 = {
    name: 'Tom',
    gender: 'male',
}
var tom3 = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
}
// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

数组类型

Ts代码

// 不常用
interface NumberArray {
  [index: number]: number //任意属性,index表示数组中的下标,数组内数据为number类型
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5]
1
2
3
4
5

编译后的JS代码

var fibonacci = [1, 1, 2, 3, 5];
1

函数类型

Ts代码

interface SearchFunc {
  // (参数:类型,....):返回值类型
  (a: string, b: string): boolean 
}
const mySearch = function (a: string, b: string):boolean {
  return a.search(b) !== -1
}

console.log('mySearch()',mySearch("1","2"));
1
2
3
4
5
6
7
8
9

编译后的JS代码

var mySearch = function (a, b) {
    return a.search(b) !== -1;
};
console.log('mySearch()', mySearch("1", "2"));

1
2
3
4
5

函数

定义函数的方式

Ts代码

// h函数声明,命名函数
function add(a: number, b: number): number {
  return a + b
}
// 函数表达式,匿名函数
let add2 = function (a: number, b: number): number {
  return a + b
}
console.log('add2(1,3)', add2(1, 3))

// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
let add3: (a: number, b: number) => number = function (
  a: number,
  b: number
): number {
  return a + b
}
console.log('add3(1,3)', add3(1, 3))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

编译后的JS代码

// h函数声明,命名函数
function add(a, b) {
    return a + b;
}
// 函数表达式,匿名函数
var add2 = function (a, b) {
    return a + b;
};
console.log('add2(1,3)', add2(1, 3));
// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
var add3 = function (a, b) {
    return a + b;
};
console.log('add3(1,3)', add3(1, 3));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可选参数和默认参数

Ts代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
let getName = function (x: string, y?: string): string {
  return x + y
}
console.log(getName('zhang'))

// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
let getName2 = function (x: string = 'zhang', y?: string): string {
  return x + y
}
console.log(getName2())
1
2
3
4
5
6
7
8
9
10
11
12
13
14

编译后的JS代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
var getName = function (x, y) {
    return x + y;
};
console.log(getName('zhang'));
// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
var getName2 = function (x, y) {
    if (x === void 0) { x = 'zhang'; }
    return x + y;
};
console.log(getName2());
1
2
3
4
5
6
7
8
9
10
11
12
13
14

剩余参数和函数重载

Ts代码

// 剩余参数
function fn(x: string, y: string, ...args: number[]) {
  console.log('x,y,args', x, y, args)
}
fn('', '', 1, 2, 3, 4, 5)


// 函数重载:函数名相同,形参不同的多个函数
// 实现数字 相加 字符串 拼接
// 将最下面代码简化函数重载声明(因为联合类型的都有多个类型,类型不确定,这里适合使用函数重载)
// 使用重载定义多个函数类型
function newAdd(x: string, y: string): string
function newAdd(x: number, y: number): number
function newAdd(x: string | number, y: string | number): string | number {
  if (typeof x == 'string' && typeof y == 'string') {
    return x + y //字符串拼接
  } else if (typeof x == 'number' && typeof y == 'number') {
    return x + y //数字相加
  } else {
    return 0
  }
}
newAdd(1, 2)
newAdd('zhang', 'san')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

编译后的JS代码

// 剩余参数
function fn(x, y) {
    var args = [];
    for (var _i = 2; _i < arguments.length; _i++) {
        args[_i - 2] = arguments[_i];
    }
    console.log('x,y,args', x, y, args);
}
fn('', '', 1, 2, 3, 4, 5);
function newAdd(x, y) {
    if (typeof x == 'string' && typeof y == 'string') {
        return x + y; //字符串拼接
    }
    else if (typeof x == 'number' && typeof y == 'number') {
        return x + y; //数字相加
    }
    else {
        return 0;
    }
}
newAdd(1, 2);
newAdd('zhang', 'san');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

类型断言

Ts代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
function getLength(x:string|number):number{
  if((x as string).length){
    return (<string>x).length
  }else{
    return x.toString().length
  }
}

console.log(getLength(123));
console.log(getLength("123"));

// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。
(window as any).a = 10

// 将any断言为一个具体的类型
function abc(x:any,y:any):any {
  return x+y
}
let a = abc(1,2) as number //数值类型
let b = abc(1,2) as string //字符串类型
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

编译后的JS代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
// 将联合类型断言为其中一个类型
function getLength(x) {
    if (x.length) {
        return x.length;
    }
    else {
        return x.toString().length;
    }
}
console.log(getLength(123));
console.log(getLength("123"));
// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。
window.a = 10;
// 将any断言为一个具体的类型
function abc(x, y) {
    return x + y;
}
var a = abc(1, 2); //数值类型
var b = abc(1, 2); //字符串类型
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

后面的有空再更新

类型别名和字符串字面量类型

Ts代码

1

编译后的JS代码

1

元组Tuple

Ts代码

1

编译后的JS代码

1

枚举Enum(一)

Ts代码

1

编译后的JS代码

1

枚举Enum(二)

Ts代码

1

编译后的JS代码

1

类

属性和方法

Ts代码

1

编译后的JS代码

1

类的继承

Ts代码

1

编译后的JS代码

1

存取器

Ts代码

1

编译后的JS代码

1

静态成员

Ts代码

1

编译后的JS代码

1

public、private、protected修饰符

Ts代码

1

编译后的JS代码

1

readonly以及参数属性

Ts代码

1

编译后的JS代码

1

抽象类和类的类型

Ts代码

1

编译后的JS代码

1

类实现接口以及接口继承接口

Ts代码

1

编译后的JS代码

1

接口继承类

Ts代码

1

编译后的JS代码

1

声明合并

Ts代码

1

编译后的JS代码

1

泛型的基本使用

Ts代码

1

编译后的JS代码

1

多个泛型参数

Ts代码

1

编译后的JS代码

1

泛型约束

Ts代码

1

编译后的JS代码

1

泛型接口和泛型类

Ts代码

1

编译后的JS代码

1