TypeScript基础

最新推荐文章于 2024-04-22 23:18:29 发布
最新推荐文章于 2024-04-22 23:18:29 发布
阅读量882 收藏
点赞数 1
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoyifei01/article/details/130515735
版权

目录

基本使用

使用场景

枚举类型

any 类型

类型断言

TypeScript 泛型

泛型在函数上的应用

泛型在接口上的应用

泛型在类型别名上的应用

字面量类型：将字面量当做一个类型去使用

基本使用

思考以下代码，两个变量的类型分别是什么?

let str1 = 'hello ts'

const str2 = 'hello ts'

  • 通过 TS 类型推断机制，可以得到答案：

    1. 变量 str1 的类型为：string

    2. 变量 str2 的类型为：'hello ts'

  • 解释:

    1. str1 是一个变量(let)，它的值可以改变，可以是任意字符串，所以类型为 string

    2. str2 是一个常量(const)，它的值不能改变，只能是 'hello ts'，所以，它的类型为 'hello ts'

  • 注意：此处的 'Hello TS'，就是一个字面量类型

  • 任意的 JS 字面量（比如，数字、字符串、布尔值、数组、对象、函数等）都可以作为类型使用

    • 字面量： 20 'abc' false [] { name: 'jack' } function() {}

使用场景

使用场景：字面量类型配合联合类型一起使用，表示一组明确的可选值

优点：使用字面量类型更加精确、严谨

  • 示例 1：性别的取值，只能是男或女其中的一个

type GenderType = '男' | '女'

// 赋值时，会有类型提示

let gender: GenderType = '男'

示例 2：在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 使用自定义类型:

type DirectionType = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: DirectionType) {

  console.log(direction)

}

// 调用函数时，会有类型提示

changeDirection('up')

枚举类型

枚举：类似于字面量类型+联合类型组合的功能，表示一组明确的可选值

  1. 枚举既可以当做类型使用，也可以当做数据值使用

  2. 枚举既可以通过键取到值，也可以通过值取到键

// 定义枚举

enum Direction {

  Up = 'Up',

  Down = 'Down',

  Left = 'Left',

  Right = 'Right'

}

// 枚举可以当做类型使用

function changeDirection(direction: Direction) {

  console.log(direction)

}

// 枚举也可以当做数据值使用

changeDirection(Direction.Up)


 

// 枚举既可以通过键取到值，也可以通过值取到键

enum ExamineStatus {

  /* 待审核 */

  WaitExamine =  1,

  /* 审核成功 */

  ExamineSuccess = 2,

  /* 审核失败 */

  ExamineFail = 3

}

console.log(ExamineStatus.ExamineFail)

console.log(ExamineStatus[1])

注意:

  1. 使用 enum 关键字定义枚举

  2. 约定枚举名称以大写字母开头

  3. 枚举中的多个值之间通过 逗号 分隔

any 类型

any 类型：逃避 TS 的类型检查。

  • 当值的类型为 any 时，可以对该值进行任意操作，编辑器也不会报错，并且不会有代码提示。这样就会使代码出现问题的概率增大。

let temp: any = 11

temp = 'str' // 没有报错

temp.toFixed(2) // 没有提示。但浏览器执行代码时会报错

  • 原则: 不推荐使用 any! 这会让 TypeScript 变为 “AnyScript” (失去 TS 类型保护的优势)

  • 尽可能的避免使用 any 类型，但是有时候，在开发过程中，不确定类型时，可以先用 any 占位 =》确认类型后 =》再去写成具体类型

类型断言

类型断言：有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。

需求：假设在页面上有一个 a 标签，<a id="link" href="xxx"></a> ，我们想要获取 a 标签 DOM 元素的 href 属性。

// 这种方式获取的元素，ts 不知道它是一个 a 标签。所以获取元素的 href 属性时，会报错。

const aLink = document.querySelector('#link')

console.log(aLink.href) // 报错

// ts 不知道，但是我们知道。所以要给它加上类型断言，告诉 ts 它就是一个 a 标签的元素类型

const aLink = document.querySelector('#link') as HTMLAnchorElement

console.log(aLink.href)

// 想要知道一个 html 元素的具体类型，可以创建该元素，然后使用鼠标悬停去摸一摸

const a = document.createElement('a')

TypeScript 泛型

泛型：可以将类型当做参数传递，从而实现复用。常用于：函数、接口、类型别名中。

泛型在函数上的应用

泛型函数：函数可以配合泛型来使用，以增加其灵活性和复用性。

需求：给 sayHi 函数传入打招呼的名字，并将该名字返回。（也就是说，参数和返回值类型相同）

// JS 通过函数传参，达到数据的复用

const sayHi1 = () => {

  console.log('hello zs');

  return 'zs'

}

const sayHi2 = () => {

  console.log('hello ls');

  return 'ls'

}

const sayHi = (name: string): string => {

  console.log('hello' + name);

  return name

}

sayHi('zs')

sayHi('ls')


 

// TS 通过类型传参，达到类型复用

// 不使用泛型

const sayHi1 = (name: string): string => {

  console.log('hello' + name);

  return name

}

sayHi1('zhangsan')

const sayHi2 = (name: number): number => {

  console.log('hello' + name);

  return name

}

sayHi2(9527)

// 使用泛型

const sayHi = <T>(name: T): T => {

  console.log('hello' + name);

  return name

}

sayHi<string>('zhangsan')

sayHi<number>(9527)

泛型在接口上的应用

泛型接口：接口也可以配合泛型来使用，以增加其灵活性和复用性。

// 不使用泛型

interface MyObj1 {

  name: string,

  sayHi(): string

}

const obj1: MyObj1 = {

  name: 'zs',

  sayHi() {

    console.log('Hi,', this.name)

    return this.name

  }

}

interface MyObj2 {

  name: number,

  sayHi(): number

}

const obj2: MyObj2 = {

  name: 9527,

  sayHi() {

    console.log('Hi,', this.name)

    return this.name

  }

}

// 使用泛型

interface IMyObj<T> {

  name: T,

  sayHi(): T

}

const obj1: IMyObj<string> = {

  name: 'zs',

  sayHi() {

    console.log('Hi,', this.name)

    return this.name

  }

}

const obj2: IMyObj<number> = {

  name: 9527,

  sayHi() {

    console.log('Hi,', this.name)

    return this.name

  }

}

内置的泛型接口：

const arr: Array<string> = ['a', 'b', 'c']

arr.push('d', 'e')

技巧：可以通过 ctrl + 鼠标左键（Mac：command + 鼠标左键）来查看具体的类型信息

泛型在类型别名上的应用

泛型别名：类型别名也可以配合泛型来使用，以增加其灵活性和复用性。

需求：对后端返回的数据进行类型定义。

// 后端返回的数据

// const res = await getUserInfo()

// 用户信息

let res1 = {

  msg: '操作成功',

  code: 10000,

  data: {

    name: 'zhangsan',

    age: 18

  }

}

// 商品信息

let res2 = {

  msg: '操作成功',

  code: 10000,

  data: {

    id: 10001,

    goodsName: '苹果'

  }

}

// 定义后端返回的数据的类型

// 不使用泛型

type UserData = {

  msg: string;

  code: number;

  data: {

    name: string;

    age: number;

  }

}

let res1: UserData = {

  msg: '操作成功',

  code: 10000,

  data: {

    name: 'zhangsan',

    age: 18

  }

}

type GoodsData = {

  msg: string;

  code: number;

  data: {

    id: number;

    goodsName: string;

  }

}

let res2: GoodsData = {

  msg: '操作成功',

  code: 10000,

  data: {

    id: 10001,

    goodsName: '苹果'

  }

}

// 使用泛型

type Data<T> = {

  msg: string;

  code: number;

  data: T

}

type UserData = {

  name: string;

  age: number;

}

type GoodsData = {

  id: number;

  goodsName: string;

}

let res1: Data<UserData> = {

  msg: '操作成功',

  code: 10000,

  data: {

    name: 'zhangsan',

    age: 18

  }

}

let res2: Data<GoodsData> = {

  msg: '操作成功',

  code: 10000,

  data: {

    id: 10001,

    goodsName: '苹果'

  }

}

zhaoyifei01
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeScript基础知识点
06-20
TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载TypeScript基础知识点，自己总结的，免费，欢迎下载
typescript基础大全
02-02
TypeScript 是一种由微软开发的强类型、面向对象的编程语言，它是 JavaScript 的超集，旨在为大型应用提供更好的可维护性和静态检查能力。以下是一些 TypeScript 基础语法元素
TS实现原生数组方法之pop()、push()、shift()、unshift()
Hi-Sun的博客
07-11 6449
TS实现原生数组方法之pop()、push()、shift()、unshift()
TypeScript学习笔记
qq_37654083的博客
08-24 206
一 简介 从 TypeScript 的名字就可以看出来，「类型」是其最核心的特性。 静态类型是指编译阶段就能确定每个变量的类型，这种语言的类型错误往往会导致语法错误。TypeScript 在运行前需要先编译为 JavaScript，而在编译阶段就会进行类型检查，所以 TypeScript 是静态类型 安装 npm install -g typescript 编辑 tsc hello.ts TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。如果要在报错的时候
typescript 实现数组push unshift pop shift
weixin_43936284的博客
08-19 1132
代码】typescript 实现数组push unshift pop shift。
TypeScript常见的数组操作函数
VirusScanLog的博客
04-21 1879
文章目录TypeScript常见的数组处理方式使用 `push()` 函数操作数组使用 `pop()` 函数操作数组使用 `shift()` 函数操作数组使用 `unshift()` 函数操作数组 TypeScript常见的数组处理方式 使用 push() 函数操作数组 一个简单的方法将数据添加到一个数组的末尾是通过push()函数。 .push()接受把一个或多个参数，并把它“推”入到数组的末尾。 举例： let arr = [1,2,3]; arr.push(4); // 现在arr的值为 [1,2
ts之入门学习
f2737469470的博客
09-03 878
本文是ts入门学习的记录，如有问题欢迎大家指出。 一、数据类型 1、原始类型 Number String Boolean BigInt Symbol Null Undefined 其中 null 和 undefined 较为特殊，是其他任意类型的子集，复制给其他数据类型的变量不会报错。 let name:string = undefined; let age:number = null; any 若变量定义 any 类型，变量允许访问任意类型的属性和方法。但是如果可以确定数据的类型，
TS的踩坑之路（二）
在路上`的博客
07-25 1175
TS 踩坑之路（二）
【vue】JavaScript 和 TypeScript 数组方法详解
m0_71975585的博客
02-07 413
大家都知道，在做前后端交互的时候，后端传回来的数据有很多都是数组类型，那么也必定会有很多复杂的数组操作，你是不是还只会简单的push和forEach？
TypeScriptAcademind：TypeScript基础
02-12
TypeScript 基础类型
12-13
TypeScript 基础类型 TypeScript 包含的数据类型如下表: 数据类型 关键字 描述 任意类型 any 声明为 any 的变量可以赋予任意类型的值。 数字类型 number 双精度 64 位浮点值。它可以用来表示整数和分数。 ...
UCTSBasics:终极课程TypeScript基础课程
04-14
此仓库充当Ultimate Angular的TypeScript基础课程的种子项目，以及分步分支中的最终解决方案，请与我们一起 ！ | |设置和安装从GitHub内部分叉此存储库，以便您可以直接提交到您的帐户，或仅下载内部包含内容的.zip...
typescript学习
lzc13902932164的博客
07-05 83
TS泛型简单来说就是类型参数，在定义某些函数、接口和类时，不写死类型，而是改用类型参数的形式，让类型更加灵活。message?: string;data: T;id: number;// 使用时传入User类型code: 200,data: {id: 1,装饰器的作用，简单来说就是代码复用，和Java里的注解以及Rust里的属性宏类似。把通用的代码封装成装饰器，然后在使用的时候就可以将@xxx添加在方法或者类上，方法和类就得到了加强，特别简洁优雅。
TS 踩坑之路（三）
在路上`的博客
04-04 458
Declaration of public instance method not allowed after declaration of private instance method. Instead, this should come after private instance fields.将定义的public 方法放到最前面，（排在最前）
数组的属性与操作方法（简单）
ts_shinian_web
05-29 163
数组索引从0colors[0]为redcolors[1]为black以此类推...isArray。
TypeScript之元组、数组以及 as const
程邓楠的博客
01-17 1983
在 TS 中，元组表示 这个数组有不同的类型 。简单的一句话来表述，如果类型相同的一组数据就是数组，反之就是元组；数组的 api 对于元组来讲也是通用的(push、pop等)，只是类型不同；
三（四）ts非基础类型（数组）
qq_44473483的博客
12-12 238
数组作为我们最常用的数据结构之一，在ts里面存在众多定义方法。
TypeScript Array(数组)声明和简单使用
samxiaoguai的博客
12-20 8238
TypeScript Array(数组)声明和简单使用：数组声明、Array 对象、数组解构、数组迭代、多维数组、数组在函数中的使用、数组方法、数组方法的简单使用
《前端面试题》- TypeScript - TypeScript的优/缺点
最新发布
小张微说的博客
04-22 7084
问题 简述TypeScript的优/缺点 答案 优点 增强了代码的可读性和可维护性 包容性，js可以直接改成ts，ts编译报错也可以生成js文件，兼容第三方库，即使不是ts编写的 社区活跃，完全支持es6 缺点 增加学习成本 增加开发成本，因为增加了类型定义 需要编译，类型检查会增加编译时长，语法和类型系统复杂的话时间特别特别长 eval和new Function()这种操作类型系统管不到 ...
TypeScript基础语法
07-08
下面是 TypeScript 的一些基础语法： 1. 变量声明和类型注解: ```typescript let num: number = 10; let name: string = "John"; let isTrue: boolean = true; ``` 2. 函数定义和类型注解: ```typescript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值