QuickShare

TypeScript

前置知识

  • 理解ES5，ES6，Javascript，TypeScript的关系

ES是客户端脚本语言的规范，ES5，ES6是这个规范的不同版本；Javascript，TypeScript是两种客户端脚本语言，Javascript实现了ES5规范，ES6实现了ES6规范

基础语法

字符串新特性

  • 多行字符串
// js 字符串换行
var str = 'aaa' +
'bbb' +
'ccc'
1
2
3
4
// ts 字符串换行
var str = `aaa
bbb
ccc`
1
2
3
4
  • 字符串模板
// js
var myName = 'xu xiaomei'
var getName = function () {
  return 'xu xiaomei'
}
console.log('hello' + myName) // 变量名
console.log('hello' + getName()) // 方法的调用
1
2
3
4
5
6
7
// ts
var myName = 'xu xiaomei'
var getName = function () {
  return 'xu xiaomei'
}
console.log(`hello ${myName}`) // 变量名
console.log(`hello ${getName()}`) // 方法的调用
1
2
3
4
5
6
7
  • 自动拆分字符串
// js
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
function test(template, name, age) {
    console.log(template);
    console.log(name);
    console.log(age);
}
var myName = 'xu xiaomei';
var getAge = function () {
    return 18;
};
test(__makeTemplateObject(["hello my name is ", ",i'm ", ""], ["hello my name is ", ",i'm ", ""]), myName, getAge());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// ts
function  test (template, name, age) {
  console.log(template)
  console.log(name)
  console.log(age)
}
var myName = 'xu xiaomei'
var getAge = function () {
  return 18
}
test `hello my name is ${myName},i'm ${getAge()}`
1
2
3
4
5
6
7
8
9
10
11

An image

参数新特性

  • 参数类型-在参数名称后面使用冒号来指定参数的类型
// js
var myName = 'xu xiaomei'
1
2
// ts 帮助开发者减少错误 如myName = 3 就不允许
var myName: string = 'xu xiaomei'
var alias: any = 'hh'
var age: number = 13
var man: boolean = false
// 声明方法的返回值类型 方法的参数类型
function test (name: string) :string {
  return name
}
// 自定义类型
class Person {
  name: string;
  age: number
}
var some: Person = new Person()
some.name = 'xxx'
some.age = 18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  • 默认参数-在参数声明后面用等号来指定参数的默认值
var myName :string = 'xu xiaomei'
function test (a: string, b: string, c: string = 'jojo') {
  console.log(a)
  console.log(b)
  console.log(c)
}
test('haha') // error: Expected 3 arguments, but got 1
// 给参数c默认值后 就只需传两个参数
test('haha', 'hello')
1
2
3
4
5
6
7
8
9
  • 可选参数-在方法的参数声明后面用问号来标明此参数为可选参数
var myName :string = 'xu xiaomei'
function test (a: string, b?: string, c: string = 'jojo') {
  console.log(a)
  console.log(b)
  console.log(c)
}
test('haha')
1
2
3
4
5
6
7

注意：

  1. 若方法都是必填参数，方法有多少个参数就需要传多少个参数
  2. 若参数带有默认值，则默认参数需放在必选参数、可选参数之后
  3. 若参数带有可选参数，则可选参数需放在必选参数之后

函数新特性

  • Rest and Spread操作符
  1. 用来声明任意数量的方法参数
function fun1 (...args) {
  args.forEach(function (arg) {
    console.log(arg)
  })
}
fun1(1, 2, 3 ,4)
1
2
3
4
5
6
  1. 将任意长度的数组转换成一个固定的参数数量的方法的调用
function func1 (a, b, c) {
  console.log(a)
  console.log(b)
  console.log(c)
}
var args = [1, 2]
func1(...args)
var args2 = [5, 6, 7, 8]
func1(...args2)
1
2
3
4
5
6
7
8
9
  • generator函数-控制函数的执行过程，手工暂停和恢复代码执行
function* doSomething () {
  console.log('start')
  yield; // 暂停
  console.log('finish')
}
var func1 = doSomething()
func1.next() // 输出start
func1.next() // 输出finish
1
2
3
4
5
6
7
8
  • 析构表达式-通过表达式将对象或数组拆解成任意数量的变量
// 将对象拆解成任意数量的变量
function getMsg () {
  return {
    name: 'xu xiaomei',
    age: 18
  }
}
var {code, price} = getMsg()
// 将数组拆解成任意数量的变量
var array1 = [1, 2, 3, 4]
var [number1, number2] = array1
console.log(number1) // 输出1
console.log(number2) // 输出2
var [, , number1, number2] = array1
console.log(number1) // 输出3
console.log(number2) // 输出4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  • 箭头表达式-用来声明匿名函数，消除传统匿名函数的this指针问题
function getName (name: string) {
  this.name = name
  setInterval(function() {
    console.log('name is:' + this.name)
  }, 1000)
  setInterval(() => {
    console.log('name is:' + this.name)
  }, 1000)
}
1
2
3
4
5
6
7
8
9

面向对象特性

  • 类
// 关键字class 类名 类的声明
// 访问控制符 public private protected 可以修饰属性和方法
class Person {
  // 类的构造函数 类的实例化会被调用
  constructor(public name: string) {
    this.name = name
  }
  // 属性
  age;
  // 方法
  eat () {
    console.log('eating')
  }
}
// 类的继承 关键字extends
class Employee extends Person {
  constructor(name: string, code: string) {
    super(name) // 调用父类的构造函数
    this.code = code
  }
  code: string;
  work() {
    super().eat()
    this.doWork()
  }
  private doWork() {
    console.log('working')
  }
}
// 类的实例化 关键字 new
var p1 = new Person('lala')
var e1 = new Employee('gg', '1)
e1.work()
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
  • 泛型-指定类型
var workers: Array<Person> = []
workers[0] = new Person('jojo')
workers[1] = new Employee('jojo', '2')
workers[2] = 2 // error
1
2
3
4
  • 接口-在调用某个方法或创建新的类时需遵循接口所定义的代码约定
// 关键字interface
interface IPerson {
  name: string;
  age: number;
}
class Person {
  constructor(public config: IPerson) {
  }
}
// 类实现接口 关键字implements
// 接口里声明的方法，所有声明实现这个接口的类必须得实现这个方法
interface Animal {
  eat()
}
class Tiger implements Animal {
  eat() {
    console.log('i eat meat')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
  • 模块-将代码分割为可重用的单元，开发者可决定资源在外部使用或内部使用
// 一个文件就是一个模块
// export对外暴露属性或方法
// a.ts
export var prop1
var prop2
export function func1() {
}
function func1() {
}
// b.ts
// import引入
import {prop1, func1} from '.a'
1
2
3
4
5
6
7
8
9
10
11
12
  • 注解-为程序的元素（类、方法、变量）加上更直观的说明，与程序的业务逻辑无关，供指定的工具或框架使用的
  • 类型定义文件（*.d.ts）-帮助开发者在TypeScript中使用已有的JavaScript的工具包（可在GitHub上下载）

← node与mongodb数据交互 →