typescript的学习

---

前言

之前学习的是js，所有本文的学习也是和js对比来看的

---

一、ts与js的最大区别

var a = 1 //js
var a:string = 1 //ts

Ts在定义字符串前，多了一个String

最大的不同：TS必须指定数据类型，为变量指定了类型，就只能给该变量设置相同类型的值

 // let 变量名: 变量类型 = 值  

二、数据类型

1.js原有的

boolean类型、number类型、string类型、array类型、undefined、null

  // ts中的布尔类型只能是true或者false
  let str: boolean = true

  // 方式1: let 数组变量名:数据类型[] = [值1,值2]
  var arr: number[]= [1, 2, 3, 4]

  // 方式2: let 数组变量名:Array<类型> = [值1,值2]
  var arr: Array<number>= [1, 2, 3, 4]

2.ts新增加的

1. tuple类型（元组类型）

TS中数组元素类型必须一致，如果需要不同元素，可以使用元组

   //tupel(元组) 类型
  // 方式1: let 元组名:[类型1,类型2,类型3] = [值1,值2,值3]
  let arr: [string, number, boolean] = ['fly', 18, true]

3. enum类型（枚举类型）

  // 方式1   
    enum Sex {
    Boy=0,
    Girl=1,
    Unknown=2
  }

  // 方式2,枚举值会自动从0开始生成
   enum Sex {
    Boy,
    Girl,
    Unknown
  }
  console.log(Sex)
  // 使用枚举
  let fly: Sex = Sex.Boy
  console.log(fly)

4. any类型（任意类型）

	//any 代表任意类型，一般在获取DOM的时候使用
  let textName: any = document.getElementById('txtName')

5. 特殊类型：

• void类型（没有任何类型）表示定义方法没有返回值

• never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值这意味着声明never变量只能被never类型所赋值

  // 没有返回值
  function show(): void {
    console.log(1)
  }


  // 返回string
  function show(): string {
    return 'str'
  }
  console.log(show())


  // 死循环
  function show(): never {
    while (true) {

    }
  }

  // 抛出异常
  function show(): never {
    throw new Error('err')
  }

三、函数

1. 函数必须定义返回值类型，如果没有返回值类型，则定义返回值类型为void
2. 实参 和 形参 的 类型 保持一致
3. 实参 和 形参 的 数量 保持一致

  function 函数名(形参1:类型,形参2:类型):返回值类型 {
  	//函数执行体
  }
  let 变量名:变量类型 = 函数名(实参1,实参2)

四、class类

class Person {
  // 成员变量
  name: string
  age: number
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  // 成员方法
  say():void {
    console.log(this.name, this.age)
  }
}


let person = new Person('fly', 18)

person.say()

五、接口

接口是一种规范的定义，它定义了行为和动作规范

1. 基本使用

// 使用interface 定义传入的对象必须携带的数据字段，以及对应的类型 
interface FullName {
  firstname: string
  lastname: string //  // 设置可选属性   lastname?: string

}
  //限制可使用的参数,只能使用定义的字段与类型
function printName(obj: FullName) {
  console.log(obj.firstname + obj.lastname)

  console.log(obj.firstname + obj.lastname + obj.age)   //  报错 Property 'age' does not exist on type 'FullName'.
}

printName({
  firstname: 'zs',
  lastname: 'ls'
})

// 如果想设置其他的属性需要定义对象接收
// const obj = {
//   age: 18,
//   firstname: 'zs',
//   lastname: 'ls'
// }
// printName(obj)

2. 类类型接口

interface Person {
  name: string
  age: number
  run(): void
}

class ZS implements Person {
  name: string
  age: number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  run(): void {
    console.log(this.name + '吃饭第一名')
  }
}

const zs = new ZS('张三', 18)
zs.run()

---

总结

还在学习中。。。