TS基础知识

听说幸运很容易 2024-06-27 原文

typescript

2. 变量和数据类型

2.1 变量

变量语法

  // let 变量名: 变量类型 = 值  
  let str: string = 'fly'

PS

在ts中，为变量指定了类型，就只能给该变量设置相同类型的值

  let str: string = 'fly'

  str = 1 // 报错 Type '1' is not assignable to type 'string'.

2.2 数据类型

原有类型

string、number、boolean、Array、null、undefined、Symbol、Object 、function
新增类型

tupel元组 enum枚举 any任意类型 never void

2.2.1 undefined 类型

  let str: undefined = undefined

2.2.2 string 类型

  let str: string = 'fly'

2.2.3 number 类型

  let str: number = 1

2.2.4 boolean 类型

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

2.2.5 Array 类型

使用方式

  // 方式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.2.6 tupel(元组) 类型

概念

一个规定了元素数量和每个元素类型的”数组“，而每个元素的类型可以不相同。
使用方式

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

为什么需要元组？

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

声明时，需要制定元素的个数

声明时，需要为每个元素设置类型

2.2.7 enum(枚举) 类型

问题：性别标识男（1），女（2），未知（3）
使用方式

  // 方式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)

2.2.8 any 类型

概念

any 代表任意类型，一般在获取DOM的时候使用
使用示例


  let textName: any = document.getElementById('txtName')

2.2.9 void 类型

概念

void 代表没有类型，一般用于无返回类型的函数中
使用示例


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


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

2.2.10 never 类型

概念

never代表不存在的值的类型，一般用于抛出异常或者无限循环的函数返回类型
使用示例


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

    }
  }

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

PS

never类型是ts中的底部类型，所有类型都是never的子类型，所有never类型可以赋值给任意类型

2.2.11 联合类型

概念

联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值。

注意：只能赋值指定的类型，如果赋值其它类型就会报错。
使用示例

  var val:string|number 
  val = 12 
  console.log("数字为 "+ val) 
  val = "Runoob" 
  console.log("字符串为 " + val)

2.3 类型推论

概念

ts 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论
示例代码

  let a = 'fly'
  // 推断出a是string类型所有不能再赋值为number类型
  a = 1 // Type '1' is not assignable to type 'string'.

3. ts 函数

3.1 ts函数返回值和参数

3.1.1 返回值


  function 函数名():返回值类型 {

  }

  let 变量名:变量类型 = 函数名()

3.1.2 形参


  function 函数名(形参1:类型,形参2:类型):返回值类型 {

  }

  let 变量名:变量类型 = 函数名(实参1,实参2)

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

3.2 ts可选参数和默认参数及剩余参数

3.2.1 可选参数


  function 函数名(形参?:类型):返回值类型 {

  }

  // 调用可以不传参数  
  函数名()
  // 调用传递参数  
  函数名(实参)

3.2.2 默认参数


  function 函数名(形参1:类型=默认值1,形参2:类型=默认值2):返回值类型 {

  }

  // 调用可以不传参数  
  函数名()
  // 调用传递1个参数  
  函数名(实参)
  // 调用传递2个参数  
  函数名(实参1,实参2)
  // 只传递第2个实参
  函数名(undefined,实参2)

3.2.3 剩余参数

使用语法


  function 函数名(形参1:类型,形参2:类型,...形参2:类型[]):void {
    console.log(a+b)
  }

示例代码

function show(x: number, y: number, ...rest: number[]): void {
  let result: number = x + y

  for (let ele of rest) {
    result += ele
  }
  console.log(result)
}

show(1, 2)
show(1, 2, 3, 4, 4,)

PS

剩余参数只能定义有一个
剩余参数只能定义为数组
剩余参数只能定义在形参列表最后

3.2.4 重载

使用语法

// 上边是声明
function add(arg1: string, arg2: string): string
function add(arg1: number, arg2: number): number

// 下边是实现
//function add(arg1: any, arg2: any):any {
// 或者
function add(arg1: string | number, arg2: string | number):any {
  // 在实现上我们要注意严格判断两个参数的类型是否相等
  if (typeof arg1 === 'string' && typeof arg2 === 'string') {
    return arg1 + arg2
  } else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
    return arg1 + arg2
  }
}

console.log(add('fly', 'zs'))
console.log(add(1, 2))

4. ts class（类）

封装、继承、多态

4.1 基本使用方式

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()

4.2 封装

class Person {
  // 成员变量
  name: string
  age: number
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  // 封装
  getName(): string {
    return this.name
  }
  setName(name: string): void {
    this.name = name
  }
}

let person = new Person('fly', 18)
console.log(person.getName())

4.3 继承


class Person {
  // 成员变量
  name: string
  age: number
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  // 封装
  getName(): string {
    return this.name
  }
  setName(name: string): void {
    this.name = name
  }
}

// 继承
class ZS extends Person {
  constructor(name: string, age: number) {
    super(name, age)
  }
}

let zs = new ZS('zs', 18)

console.log(zs.getName())

4.4 多态

4.4.1 基本使用

abstract class Person {
  // 成员变量
  name: string
  age: number
  // 构造函数
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  // 封装
  getName(): string {
    return this.name
  }
  setName(name: string): void {
    this.name = name
  }
  //非抽象方法，无需要求子类实现、重写
  sayHai() {
    console.log('你好，' + this.getName() + '，qf你最胖')
  }
  abstract run(): any
}

// 继承
class ZS extends Person {
  constructor(name: string, age: number) {
    super(name, age)
  }
  //非抽象方法，无需要求子类实现、重写
  sayHai() {
    console.log('你好，' + this.getName() + '，qf你最骚')
  }
  run(): void {
    console.log(this.getName() + '跑起来')
  }
}
let zs = new ZS('zs', 18)
zs.sayHai()
zs.run()

// 继承
class LS extends Person {
  constructor(name: string, age: number) {
    super(name, age)
  }
  //非抽象方法，无需要求子类实现、重写
  sayHai() {
    console.log('你好，' + this.getName() + '，qf你最骚')
  }
  run(): void {
    console.log(this.getName() + '飞起来')
  }
}

let ls = new LS('李四', 18)
ls.sayHai()
ls.run()

4.4.2 特点

抽象类不能够被实例化

子类中必须定义对应的抽象方法

4.5 类修饰符

4.5.1 常用修饰符

public 公有类型：在当前类里面、子类里面、外部类都可以访问
protected 保护类型：在当前类里面、子类里面可以访问，外部类无法访问
private 私有类型：在当前类里面可以访问，子类里面和外部类无法访问
ps: 如果不添加修饰符，默认为公有类型

4.5.2 实例代码


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

class ZS extends Person {

  constructor(name: string, age: number, sex: string) {
    super(name, age, sex)
  }
  say(): void {
    console.log(this.age + '111')
  }
}

const zs = new ZS('zs', 18, '男')

4.6 静态属性和静态方法

4.6.1 基本使用


class Person {
  // 成员变量
  public name: string
  protected age: number
  private sex: string
  static staticName = 'zs'
  // 构造函数
  constructor(name: string, age: number, sex: string) {
    this.name = name
    this.age = age
    this.sex = sex
  }
  say(): void {
    console.log(this.name)
  }
  static run(): void {
    console.log(this.staticName)
  }
}
Person.staticName

4.6.2 特点

静态方法中不能使用类型属性，但是可以使用静态属性

5. 接口

在面向对象编程中，接口是一种规范的定义，它定义了行为和动作规范
在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批所需要遵守的规范
接口不关心这些类内部状态数据，也不关心这些类里面方法的实现细节它只规定了这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。
typescript中的接口类似java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等

5.1 属性类接口

5.1.1 基本使用

// 使用interface 定义传入的对象必须携带firstname和lastname，以及对应的类型 
interface FullName {
  firstname: 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)

5.1.2 可选属性

基本使用

interface FullName {
  firstname: string
  // 设置可选属性
  lastname?: string
}

function printName(obj: FullName) {
  console.log(obj.firstname)
}

printName({
  firstname: 'ls'
})

案例

interface Config {
  type: string
  url: string
  data?: string
  dataType?: 'json'
  success: Function
  // 或者写成
  // success(res: any): void
}

function ajax(config: Config) {
  let xhr = new XMLHttpRequest()
  xhr.open(config.type, config.url)
  xhr.send(config.data)
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      if (config.dataType === 'json') {
        config.success && config.success(JSON.parse(xhr.responseText))
      } else {
        config.success && config.success(JSON.parse(xhr.responseText))
      }
    }
  }
}

ajax({
  type: 'get',
  url: 'http://jsonplaceholder.typicode.com/todos',
  success(res: Object) {
    console.log(res)
  }
})

5.2 函数类型接口

interface encrypt {
  (key: string, val: string): string
}

const md5: encrypt = (key: string, val: string): string => key + val

console.log(md5('name', 'zs'))

5.3 可索引接口

5.3.1 特性

可索引接口,主要是对数组和对象的约束

5.3.2 示例代码

// 约束数组
interface UserArr {
  [index: number]: string
}

let arr: UserArr = ['fly', 'sky', 'ssr']

console.log(arr[0])

// 约束对象
interface UserObj {
  [index: string]: string
}

const obj: UserObj = { 'name': 'fly' }

console.log(obj.name)

5.4 类类型接口

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()

5.4 接口扩展

5.4.1 特性

接口可以继承接口

5.4.1 示例代码

方式1

// 定义父接口
interface Person {
  eat(): void
}
// 继承Person接口
interface Father extends Person {
  run(): void
}
// 实现接口
class ZS implements Father {
  name: string
  constructor(name: string) {
    this.name = name
  }
  eat() {
    console.log(this.name + '吃的最多')
  }
  run() {
    console.log(this.name + '跑的最快')
  }
}

const zs = new ZS('张三')

zs.eat()
zs.run()

方式2

interface Person {
  eat(): void
}
// 继承接口
interface Father extends Person {
  run(): void
}
// 实现接口
class ZS {
  name: string
  constructor(name: string) {
    this.name = name
  }
  eat() {
    console.log(this.name + '吃的最多')
  }
  run() {
    console.log(this.name + '跑的最快')
  }
}

class LS extends ZS implements Father {
  constructor(name: string) {
    super(name)
  }
}

// const zs = new ZS('张三')

// zs.eat()
// zs.run()
const ls = new LS('李四')
ls.run()

5.5 泛型

软件工程中，我们不仅要创建一致的定义良好的API，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时为你提供了十分灵活的功能。

5.5.1 泛型变量、泛型函数、泛型类

泛型可以支持不特性的类似，一般使用T表示

泛型具体的类型是调用该方法的时候决定的

泛型变量、泛型函数

function getData<T>(value: T): T {
  return value
}

console.log(getData<number>(2))

泛型类

class MinClass<T> {
  public list: T[] = []
  add(value: T): void {
    this.list.push(value)
  }
  min(): T {
    let minNum = this.list[0]
    this.list.forEach(item => {
      if (minNum > item) {
        minNum = item
      }
    })
    return minNum
  }
}

const m1 = new MinClass<number>()

m1.add(11)
m1.add(1)
m1.add(3)

console.log(m1.min())


const m2 = new MinClass<string>()

m2.add('a')
m2.add('b')
m2.add('c')

console.log(m2.min())

5.5.2 泛型接口

方式1

// 方式1 
interface ConfigFn {
  <T>(value: T): T
}

// let getData: ConfigFn = function <T>(value: T): T {
//   return value
// }

let getData: ConfigFn = <T>(value: T): T => value
console.log(getData<string>('fly'))

方式2


interface Config<T> {
  (value: T): T
}

// const getData: Config<string> = function <T>(value: T): T {
//   return value
// }

const getData: Config<string> = <T>(value: T): T => value

console.log(getData('fly'))

5.5.3 泛型类

类参数类型

class User {
  username!: string
  password!: string
}

class DB {
  add(user: User): boolean {
    console.log(user)
    return true
  }
}

const user = new User()

user.username = 'fly'
user.password = '123456'

const db = new DB()
db.add(user)

泛型类参数类型

// 泛型类参数类型
class DB<T>{
  add(info: T): boolean {
    console.log(info)
    return true
  }
}

class User {
  username!: string
  password!: string
}
class Goods {
  title!: string
  ctime!: string
}

var user = new User()
user.username = 'fly'
user.password = '123456'

var goods = new Goods()
goods.title = '可爱多'
goods.ctime = '2020-09-08 14:25:03'

var db1 = new DB<User>()
db1.add(user)
var db2 = new DB<Goods>()
db2.add(goods)

基础知识基础 span class token javascript 前端 typescript

有关TS基础知识的更多相关文章

postman接口测试工具-基础使用教程 - 2
1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，
软件测试基础 - 2
Ⅰ软件测试基础一、软件测试基础理论1、软件测试的必要性所有的产品或者服务上线都需要测试2、测试的发展过程3、什么是软件测试找bug，发现缺陷4、测试的定义使用人工或自动的手段来运行或者测试某个系统的过程。目的在于检测它是否满足规定的需求。弄清预期结果和实际结果的差别。5、测试的目的以最小的人力、物力和时间找出软件中潜在的错误和缺陷6、测试的原则28原则：20%的主要功能要重点测（eg：支付宝的支付功能，其他功能都是次要的）80%的错误存在于20%的代码中7、测试标准8、测试的基本要求功能测试性能测试安全性测试兼容性测试易用性测试外观界面测试可靠性测试二、质量模型衡量一个优秀软件的维度①功能性功
ES基础入门 - 2
ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear
ruby - 我怎样才能更好地了解/了解更多关于 Ruby 的知识？ - 2
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭9年前。我最近开始学习Ruby，这是我的第一门编程语言。我对语法感到满意，并且我已经完成了许多只教授相同基础知识的教程。我已经写了一些小程序(包括我自己的数组排序方法，在有人告诉我谷歌“冒泡排序”之前我认为它非常聪明)，但我觉得我需要尝试更大更难的东西来理解更多关于Ruby.关于如何执行此操作的任何想法？
【网络】-- 网络基础 - 2
（本文是网络的宏观的概念铺垫）目录计算机网络背景网络发展认识"协议"网络协议初识协议分层OSI七层模型TCP/IP五层(或四层)模型报头以太网碰撞路由器IP地址和MAC地址IP地址与MAC地址总结IP地址MAC地址计算机网络背景网络发展是最开始先有的计算机，计算机后来因为多项技术的水平升高，逐渐的计算机变的小型化、高效化。后来因为计算机其本身的计算能力比较的快速：独立模式：计算机之间相互独立。如：有三个人，每个人做的不同的事物，但是是需要协作的完成。而这三个人所做的事是需要进行协作的，然而刚开始因为每一台计算机之间都是互相独立的。所以前面的人处理完了就需要将数据
【Elasticsearch基础】Elasticsearch索引、文档以及映射操作详解 - 2
文章目录概念索引相关操作创建索引更新副本查看索引删除索引索引的打开与关闭收缩索引索引别名查询索引别名文档相关操作新建文档查询文档更新文档删除文档映射相关操作查询文档映射创建静态映射创建索引并添加映射概念es中有三个概念要清楚，分别为索引、映射和文档（不用死记硬背，大概有个印象就可以）索引可理解为MySQL数据库；映射可理解为MySQL的表结构；文档可理解为MySQL表中的每行数据静态映射和动态映射上面已经介绍了，映射可理解为MySQL的表结构，在MySQL中，向表中插入数据是需要先创建表结构的；但在es中不必这样，可以直接插入文档，es可以根据插入的文档（数据），动态的创建映射（表结构），这就
c++基础-运算符 - 2
目录1关系运算符2运算符优先级3关系表达式的书写代码实例：下面是面试中可能遇到的问题：1关系运算符C++中有6个关系运算符，用于比较两个值的大小关系，它们分别是：运算符描述==等于!=不等于小于>大于小于等于>=大于等于这些运算符返回一个布尔值，即true或false。例如，当x等于y时，x==y的结果为true，否则结果为false。2运算符优先级在C++中，关系运算符的优先级高于赋值运算符，但低于算术运算符。以下是关系运算符的优先级，从高到低排列：运算符描述>,,>=,关系运算符==,!=相等性运算符&&逻辑与`如果在表达式中有多个运算符，则按照优先级顺序依次进行运算。3关系表达式的书写在
计算机必读基础书籍 - 2
一.计算机组成原理这本书利用组合逻辑、同步时序逻辑电路设计的相关知识，从逻辑门开始逐步构建运算器、存储器、数据通路和控制器，最终集成为完整的CU原型系统，使读者从设计者的角度理解计算机部件构成及运行的基本原理，掌握软硬件协同的概念。全书共9章，主要内容包括计算机系统概述、数据信息的表示、运算方法与运算器、存储系统、指令系统、中央处理器、指令流水线、总线系统、输入输出系统。1.计算机系统概述1.1计算机发展历程计算机是一种能够按照事先存储的程序，自动、高速、准确地对相关信息进行处理的电子设备。1946年2月，世界上第一台电子数字计算机ENIAC(ElectronicNum
0基础学习软件测试有哪些建议 - 2
其实现在基础的资料和视频到处都是，就是看你有没有认真的去找学习资源了，去哪里学习都是要看你个人靠谱不靠谱，再好的教程和老师，你自己学习不进去也是白搭在正式选择之前，大可以在各种学习网站里面找找学习资源先自己学习一下为什么选择学软件测试？同学们理由众多！大概分这几类：①不受开发语言、行业产品变化限制；②入门更简单，对零基础、女生都友好；③软件项目都需要测试人员，职业生涯稳；④学习周期短，但薪资并不低。要想“肩扛”一条线？需掌握三大技能：技能1：掌握测试流程，熟悉系统框架能提前与开发人员一起制定测试计划，通过测试左移，推动代码评审，代码审计，单元测试，自动化冒烟测试，来保证研发阶段的质量。技能2：
ruby - Ruby基础知识 - 2
Asitcurrentlystands,thisquestionisnotagoodfitforourQ&Aformat.Weexpectanswerstobesupportedbyfacts,references,orexpertise,butthisquestionwilllikelysolicitdebate,arguments,polling,orextendeddiscussion.Ifyoufeelthatthisquestioncanbeimprovedandpossiblyreopened,visitthehelpcenter提供指导。已关闭8年。什么是学习ruby语言