与javascript的不同

所谓的typescript，就是javascript的超集，学习过javascript的就知道其变量是没有类型检查的，而typescript可以看作是是添加了类型判断的javascript。

知识点

javascript的解构

这是一个非常有用的功能，本意是为了更加方便地从数组，对象这些引用类型数据取数据，但是也可以通过解构便捷的实现很多神奇的操作，下面我将介绍一些：

解构的原始用法

解构数组

解构数组的操作如下：

1
2
3
4
5
6
const array: Array<any> = [1,2,[3,4]];
const arr: Array<number> = [1,2,3];
// 如果说没有对应的值，则可以设置默认值，即下面的m
let [x = 0,y = 0,z = 0,m = 0] = arr;
// 对于嵌套的数组，其结构方法如下
let [a0, , [a21, a22]] = array;

解构对象

解构对象的操作如下：

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
type Person<KUN> = {
  id: number;
  name: string;
  gender: string;
  age: number;
  KUN?: KUN;
  partner?: string;
  hobby: {
    piano: object;
    violin: object;
  };
}

const haruki: Person<boolean> = {
  id: 1,
  name: "Haruki",
  gender: 'male',
  age: 24,
  KUN: true,
  partner: 'Kazusa',
  hobby: {
    piano: {
      name: 'stav'
    },
    violin: {
      name: 'ee'
    }
  }
}
let myName: string, myGender: string, myIsIKun: boolean | undefined,myPiano: object, myViolin: object;

({name: myName = 'setsuna', KUN: myIsIKun = undefined, hobby: {piano: myPiano,violin: myViolin}} = haruki);

解构函数参数

当我们写的函数存在多个参数时，调用该函数需要按照次序依次填写参数，这实在是一件费力不讨好的事儿，但是只要我们把参数封装成一个对象并对其进行解构，就可以实现相同的效果且不要在意参数的顺序了。

1
2
3
4
5
6
7
8
9
10
function destructrue({name = 'setsuna', gender = 'female', age = 18, spouse = 'haruki'}) {
  console.log(`my name is ${name}, I'm ${age} years old ${gender === 'female' ? 'girl' : 'boy'}, my lover is ${spouse}.`);
}

destructrue({
  age: 20,
  name: 'kazusa',
});

// output: my name is kazusa, I'm 20 years old girl, my lover is haruki.

交换变量的值

平时我们实现变量值的交换往往需要借助第三个变量，但是通过解构我们可以实现这个功能：

1
2
3
4
5
6
// 变量交换
let x: number = 1,y: number = 2;
[x, y] = [y, x];
// 多个变量的交换
let a: number = 1,b: number = 2,c: number = 3;
[a,b,c] = [c,a,b];

javascript扩展运算符

扩展运算符(spread operator)...可以用来扩展可迭代类型(arrays,strings.maps,sets )和数组：

1
2
3
4
5
6
7
8
9
10
// 使用扩展运算符进行的是深拷贝喵( •̀ ω •́ )✧
let arr = [1,2,3]
let arr1 = [0,...arr,4];

let person = {
    name: 'haruki',
    gender: 'male',
    spouse: 'kazusa',
}
let whiteAlbum2 = {...person, job: 'journalist'};

我们还可以使用扩展运算符用于函数传参：

1
2
3
4
5
6
function spreadOperation(...params: number[]) {
  console.log(`I get ${params[0]} and ${params[1]} and ${params[2]}`);
}
const arr: number[] = [1,2,3];
spreadOperation(111,222,...arr);
// output: I get 111 and 222 and 1

JavaScript的短路

就像许多其它编程语言一样，JavaScript也存在短路：即对于AND中出现false或者OR中出现true就会提前退出逻辑判断，但不一样的是JavaScript的短路返回的的是一个具体的值，这个特性可以用于简化一些语法：

1
2
3
4
// 下面表达式1和2在y !== 0时等价,表达式1与3等价 
const x = y ? y : 10;	// 表达式1
const x = y || 10; 		// 表达式2
const x = y ?? 10;		//表达式3

javascript的可选链运算符

即?.，在需要获取一个对象可能不存在的属性时可以使用，在数学不存在时直接返回undefined而不是报错。

JavaScript的数据结构

Set

其概念可以参考一下数学中的集合，其中的成员变量唯一而且没有顺序(因此索引Set的成员其实没有意义，但是其本身又是一个可迭代(iterable)的数据结构)，通过以下示例理解：

1
2
3
4
5
6
7
const set = new Set(['piano', 'guitar', 'piano', 'violin']);
// Set中的值具有唯一性(就像数学里面的集合一样):{'piano', 'guitar', 'violin'}

set.size // Set的成员数量
set.has('draw'); // 判断set中是否有某个成员。
set.add('draw');
set.delete('draw');

Map

Map是一种键值对组成的数据结构。与Object不同的是，Map的键可以是任意类型的变量，而Object只能是string。

下面是对Map中值得一提的方法和操作：

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
const myMap = new Map([
    [1, 'hello'],
    [2, 'world'],
    [[1,2,3], 114]
]);
const arr = [1,2,3];


// Map添加方法2
myMap.set(1,'hello')
    .set(2,'world')
    .set(arr,'!')
    .set('emoji', ':)');

myMap.forEach((value: any, key: any, map) => {
  console.log(key, value);
})


for(const [key, value] of myMap) {
  console.log(key, value);
}

// iterable the haruki(Object)
for(const [key, value] of Object.entries(haruki)){
  console.log(key, value);
}

javascript的函数

javascript中的函数本质上就是一个值，也是一种特殊的对象，有它们自己的属性和方法。

  • call：该方法的功能是调用函数，并且将函数中的this变量指定为方法设置的变量。
  • bind：该方法的功能是返回一个新的函数，并且将新函数中的this变量设置为方法指定的变量。
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
interface HangType {
  name: string;
  hangCode: string;
  bookList: {code: string, name: string}[]
  book?: any;
}

const Hang:  HangType = {
  name: 'Beihang University',
  hangCode: 'BUAA',
  bookList: [],
  book(codeNum: number, passenger: string) {
    console.log(`just now ${passenger} book the ${this.hangCode}${codeNum} from ${this.name}`);
    this.bookList.push({code: `${this.hangCode}${codeNum}`, name: passenger });
  }
}

const NanHang: HangType = {
  name: 'Nanhang University',
  hangCode: 'NUAA',
  bookList: [],
}

const book = Hang.book;
Hang.book(114, 'takune');

// 使用function的call方法,第一个参数指定this,后面的参数为函数自己的参数, 常用
book.call(NanHang, 514, 'senbai');

// function bind method: return a new function which bind key word 'this' with param1
// 通过bind函数你还可以指定一些参数的值, 比如说 const bookNanHang = book.bind(NanHang, 23);
const bookNanHang = book.bind(NanHang);
bookNanHang(810, 'katsusa');