TypeScript-Note

TypeScript官网：typescriptlang.org

一、变量声明

• TypeScript在JavaScript的基础上加入了静态类型检查功能，因此每一个变量都有固定的数据类型。

1.1、string:字符串

可以用单引号或双引号

let msg: String = 'hello World'

1.2、number:数值

整数、浮点数都可以

let age: number = 21

1.3、boolean:布尔

只有true、false两种

let a:boolean = true
let b:boolean = false

1.4、any:不确定类型

可以是任意类型

let a:any = 'jack'
let a:age = 18

1.5、union:联合类型

可以是多个指定类型中的一种

let u:string|number|boolean = 'rose'
let u:string|number|boolean = 18
let u:string|number|boolean = true

1.6、Object:对象

let p = {
  name: 'jack',
  age: 21
}

调用：
console.log(p.name)
console.log(p.['name'])

1.7、Array: 数组

元素可以是任意其它类型

let names: Array<string> = ['jack','rose']
let ages: number[] = [21,25,18]

调用
console.log(name[0])

二、条件控制

• TypeScript与大多数开发语言类似，支持基于if-else和switch的条件控制。
• 在TypeScript中，空字符串、数字0 null、undefined都被认为是false 其ウ值则为true

2.1、if...else

let num:number =18

// 判断奇偶
if(num%2 === 0){
  console.log(num + '是偶数')
}else{
  console.log(num + '是奇数')
}

2.2、if...else if

let age: number = 17

if(age >= 18){
  console.log('成年')
}else if(age >=0 && age < 18){
  console.log('未成年')
}else{
  console.log('错误')
}

2.3、switch...case...default

let grade: string = 'A'

switch(grade){
  case 'A':{
    console.log('优秀')
    break
  }
  case 'B':{
    console.log('良好')
    break
  }
  case 'C':{
    console.log('及格')
    break
  }
  case 'D':{
    console.log('及格')
    break
  }
  default:{
    console.log('非法输入！')
    break
  }
}

三、循环迭代

3.1、for循环

for(let i = 1; i<=10; i++){
  console.log('运行了'+ i + '次')
}

3.2、while循环

let i: number = 1;
while( i<10 ){
  console.log('运行')
}

3.3、for in

通过角标获取

let names: string[] = ['jack','rose']

for(const i in names){
  console.log(i + ':' + name[i])
}

3.4、for of

直接得到元素

let names: string[] = ['jack','rose']

for(const name of names){
  console.log(name)
}

四、函数

• TypeScript通常利用functi on关键字声明函数，并且支持可选参数、默认参数、箭头函数等特殊语法。

4.1、无返回值函数

返回值void，可以省略

function sayHello(name: string):void{
  console.log('你好呀' + name)
}

// 用法
sayHello('jsck')

4.2、有返回值函数

function sum(x: number, y: number): number{
  return x + y
}
let a = sum(20,20)
console.log(a)

4.3、箭头函数

==默认参数：==

let sayHi = (name: string)=>{
  console.log('你好：' + name)
}
sayHi('jsck')

==可选参数：==

let sayHi = (name?:sting)=>{  // 这里的“ ？ ”加上了调用函数可以不加参数
  name = name ? name:'陌生人'
  console.log('你好：' + name)
}
sayHi()

五、类和接口

• TypeScript具备面向对象编程的基本语法，例如interface、class、 enum等。也具备封装、 继承、多态等面向对象基本特征。

5.1、类、接口、枚举

类：class

枚举：enum

接口实现：interface

enum Msg{
  Hi = 'Hi',
  Hello = 'Hello'
}

interface A{
  say(msg: Msg):void
}

// 实现A接口
class B implements A{
  say(msg: Msg):void{
    console.log(msg + '这里B实现了A接口')
  }
}

let a:A = new B()
a.say(Msg.Hi)

5.2、继承

私有的：private

公开的：public

继 承：extends

class people{
  private name: string =''
  private age: number = 0

  // 构造函数
  constructor(name: string, age: number){
    this.name = name
    this.age = age
  }
  // 成员方法
  public getMsg(): string{
    return '你好：' + this.name + 'age:' + this.age
  }
}

// 定义一个人
class jackPeo extends people{
  constructor(name: string, age: number){
    super(name, age)
  }

  public getMsg(): string {
    return '继承类的消息：' + this.name + ' age: ' + this.age;
  }
}


let jack = new jackPeo('Jack',25)
console.log(jack.getMsg())

六、模块开发

• 应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块（module）。模块可以相互加载，提高代码复用性。

目录结构：

project
|-- src
|   |-- rectangle.ts
|   |-- index.ts
|-- node_modules
|-- tsconfig.json
|-- package.json

==rectangle.ts:==

// 定义矩形类并导出
export class Rectangle {
  public width: number;
  public length: number;

  // 构造函数
  constructor(width: number, length: number) {
    this.width = width;
    this.length = length;
  }
}

// 定义工具方法求矩形面积并导出
export function area(rec: Rectangle): number {
  return rec.width * rec.length;
}

==index.ts:==

// 导入Rectangle类和area方法
import { Rectangle, area } from '../rectangle';

// 创建Rectangle对象
let r = new Rectangle(10, 20);

// 调用area方法
console.log('面积为：' + area(r));