菜单 搜索
首页 前端知识 TS基础知识

TS基础知识

2024-06-21 09:06:04 前端知识 前端哥 707 221 我要收藏

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 可选属性
  1. 基本使用
interface FullName {
  firstname: string
  // 设置可选属性
  lastname?: string
}
 
function printName(obj: FullName) {
  console.log(obj.firstname)
}
 
printName({
  firstname: 'ls'
})
复制
  1. 案例
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. 方式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()
 
复制
  1. 方式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表示

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

  1. 泛型变量、泛型函数
function getData<T>(value: T): T {
  return value
}
 
console.log(getData<number>(2))
 
复制
  1. 泛型类
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
// 方式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'))
 
复制
  1. 方式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 泛型类
  1. 类参数类型
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)
复制
  1. 泛型类参数类型
// 泛型类参数类型
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)
 
复制
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13173.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！