0%

TypeSript简介

参数

参数类型

可以在变量的后面用冒号来指定该参数的类型

1
2
3
4
5
6
var myname: string = "hello"
myname = 0 // 提示类型错误

// typescript有类型推断
var myage = "xixi"
myage = 13 // 提示类型错误

不仅可以在变量后面指定类型,还可以在方法后以及方法需要的参数后面

1
2
3
function test(name: string): string {
return "test";
}

在类中定义参数类型

1
2
3
4
class Person {
name: string;
age: number;
}

默认参数

给参数一个默认值

1
var myname: string = "hello world"

给方法中的参数指定一个默认值

1
2
3
function test(a: string, b: string = "jojo") {
// 可以只传a值
}

带默认值的参数要放到函数的最后面

可选参数

通过问号为函数指定一个可选参数

1
2
3
function test(a: string, b?: string, c: string = "jojo") {
//
}

可选参数必须放在必传参数后面

函数

拓展参数

通过拓展运算符为函数添加一个参数集

1
2
3
function test(...args) {
args.forEach()
}

该函数可以接受任意数量的参数

1
2
3
4
5
6
7
8
9
10
function test(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
}

var list = [1,2,3,4];
test(...list);
// 只会输出1,2,3
// 因为test方法只能接受三个参数

generator函数

通过*来声明一个generator函数

1
2
3
4
5
6
7
8
9
10
11
12
function * doSomething() {
console.log('start');

yield;

console.log('finish');
}

var func = doSomething();

func.next(); // 输出start
func.next(); // 输出finish

在每次调用next()方法后,程序执行到yield就停止

析构表达式

通过表达式将对象或数组拆解成任意数量的变量

1
2
3
4
5
6
7
8
function getStock() {
return {
code: 'IBM',
price: 100
}
}

var {code, price} = getStock()

变量名称需要一一对应

可以通过冒号给对象里面的修改名称

var {code: codex, price} = getStock()

1
2
3
4
5
6
7
var array1 = [1, 2, 3, 4];
var [a, b] = array1;
// a = 1, b = 2
var [ , , , d] = array1;
// d = 4
var [a, b, ...others] = array1;
// a = 1, b = 2, others = [3, 4]

表达式以及循环

箭头函数

1
2
var array = [1, 2, 3, 4, 5]
array.filter(value => value%2 == 0)

forEach()、for in 和 for of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var array = [1, 2, 3, 4];
array.desc = "array";

array.forEach(value = > console.log(value));
// 不允许break,循环对象的值
// 1, 2, 3, 4

for(var n in array) {
console.log(n);
}
// 循环对象属性名称
// 1, 2, 3, 4, array

for(var n of array) {
console.log(n);
}
// 忽略属性,可以通过break跳出循环
// 1, 2, 3, 4

面向对象特性

类(class)

访问控制符

public共有的,在类内部外部均可以使用,默认

private私有的,在类的内部使用

protected保护的,类以及其子类中可以使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Person {
// 构造函数
constructor() {
console.log("new")
}

name;
eat() {
console.log("eat")
}
}

var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

继承(extends)

通过super关键字调用父类的方法

1
2
3
4
5
6
7
class Employee extends Person {
// 构造函数
constructor() {
super(); // 调用父类的构造函数
console.log("new")
}
}

泛型

通过<>来指定数据结构存储的内容类型

1
var work: Array<Person> = [];

接口(Interface)

用来建立某种代码约定,使得其他开发者在调用某个方法或者创建新的类时必须遵循接口所定义的代码约定

通过interface关键字声明一个接口

1
2
3
4
5
6
7
8
9
interface IPerson {
name: string;
age: number;
}

class Person() {
constructor(public config: IPerson) {
}
}

通过implements关键字使类实现接口中的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
interface Animal {
eat();
}
class Sheep implements Animal {
eat() {
console.log("eat grass")
}
}
class Tiger implements Animal {
eat() {
console.log("eat meat")
}
}

类型定义文件(*.d.ts)

通过该文件类型,可以与js其他的模块协同工作

参考资料