typescript学习笔记整理（上）

编程语言 2022-06-02 15:23:52 阅读次数: 0

TypeScript 介绍

TS Logo
  1. TypeScript 是什么
  2. TypeScript 为什么要为 JS 添加类型支持?
  3. TypeScript 相比 JS 的优势

TypeScript 是什么

  1. TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。
  2. 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript
  3. TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行
// TypeScript  代码有明确的数据类型
let age1: number = 18
// JavaScript  代码没有明确的类型
let age2 = 18

为什么要为 JS 添加类型支持?

JS的缺陷

  1. JS 的类型系统是弱类型的，没有类型的概念

    let ar = 11  // 这里是数值
ar = []  // 偷偷的改成了数组类型
ar.toFixed(2) // 这里会报类型错误

    没有类型校验，导致了在使用 JS 进行项目开发时，会经常遇到类型错误的问题，增加了找 Bug、改 Bug 的时间，严重影响开发效率

  2. JavaScript 属于动态类型的编程语言

    边解释边执行，错误只能在运行阶段才能发现。

TS属于静态类型的编程语言

  1. 它要先编译，再执行。不能直接执行，需要编译成js才能执行
  2. 它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

对比：

  • 使用 JS：
    1. 在 VSCode 里面写代码
    2. 在浏览器中运行代码 --> 运行时，才会发现错误【晚】
  • 使用 TS：
    1. 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
    2. 在浏览器中运行代码

小结

  1. TS是______ + Script的简写，它是___开发的开源编程语言。
  2. TS是JS的____超集，它在js的基础上增加了____支持。

TypeScript和JS的对比

目标

javascript和Typescript的区别

  1. ts完全兼容javascript，它可以编译成javascript
  2. 使用TS会有强大的代码类型提示
  3. 提升了代码的可维护性，使得重构代码更容易
  4. 支持最新的 ECMAScript 语法。.ts-----编译---> .js

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7wb5y8S-1652532070519)(asset/TS编译.png)]

生态

Vue 3 源码使用 TS 重写、Angular 默认支持 TS、React 与 TS 完美配合，TypeScript 已成为大中型前端 项目的首选编程语言

目前，前端最新的开发技术栈：

  1. React： TS + Hooks
  2. Vue： TS + Vue3

注意： Vue2 对 TS 的支持不好~

TypeScript 初体验

目标

安装可以把TS编译成JS的工具，搭建一个可以运行TS的环境

全局安装编译 TS 的工具包

安装包：npm i -g typescript

  • typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化
  • 验证是否安装成功：tsc –v (查看 typescript 的版本)

注意：Mac 电脑安装全局包时，需要添加 sudo 获取权限：sudo npm i -g typescript

编译并运行 TS 代码

步骤

  1. 创建ts文件。例如 hello.ts 文件（注意：TS 文件的后缀名为 .ts）

  2. 编译。将 TS 编译为 JS

    在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）

  3. 执行 JS 代码。

    1. 在node中运行。在终端中输入命令，node hello.js
    2. 在浏览器中运行。

拓展：在线运行

https://www.typescriptlang.org/play

小结

  1. 要运行.ts文件，先要全局安装____包，它的提供___命令，将.ts转成.js文件。

ts-node 简化运行 TS 的步骤

目标

了解ts-node命令的基本使用；

问题描述

每次修改代码后，都要重复执行两个命令，才能运行 TS 代码，太繁琐。

tsc  你的代码.ts

node 你的代码.js

简化方式

使用 ts-node 包，直接在 Node.js 中执行 TS 代码。它提供了 ts-node 命令，可以简化执行命令。

安装命令

npm i -g ts-node

使用方式：ts-node hello.ts

相当于：1 tsc 命令 2 node（注意：ts-node 不会生成 js 文件）

解释：ts-node 命令在内部偷偷的将 TS -> JS，然后，再运行 JS 代码

小结

在初始学习阶段，我们会使用ts-node来运行代码，在项目阶段就不会再这样使用了。

ts-node报错问题

console.log报错问题

Cannot find name 'console'. Do you need to change your target library? Try changing thelib compiler option to include 'dom'.

解决

  1. tsc --init 生成配置文件 tsconfig.json
  2. 写代码时，用{ }包起来

TS类型注解

目标

了解类型注解的概念； 能掌握类型注解的使用方式

背景

TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

  • TS中定义变量(常量)可以指定类型了。
  • A类型的变量不能保存B类型的数据

可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

类型注解

格式

let 变量名: 类型 = 初始值

示例代码:

let age: number = 18

说明：代码中的 : number 就是类型注解

作用：为变量添加类型约束

上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

// 错误代码：
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致
let age: number = '18'

错误提示-拓展

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DjmE0rTC-1652532070522)(asset/image-20211123151718680.png)]

类型推论

目标

了解类型推论的场景

类型推论

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

发生类型推论的 2 种常见场景

  1. 声明变量并初始化时
  2. 决定函数返回值时
// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
    
    
  return num1 + num2
}

VSCode中的编码技巧

  • 如果不知道类型，可以通过鼠标放在变量名称上，利用 VSCode 的提示来查看类型

  • 写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cU1KJiKh-1652532070523)(asset/image-20211025144309989.png)]

console.log()
document.createElement()

TS的类型

目标

了解ts中的数据类型

常用基础类型

将 TS 中的常用基础类型分为两类

  1. JS 已有类型

    1. 原始类型：number/string/boolean/null/undefined/symbol
    2. 对象类型：object（包括，数组、对象、函数等对象）

  2. TS 新增类型

    1. 联合类型
    2. 自定义类型(类型别名)
    3. 接口
    4. 元组
    5. 字面量类型
    6. 枚举
    7. void
    8. any 等
  • 注意：
    1. 原始类型在 TS 和 JS 中写法一致
    2. 对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法

原始类型

  • 原始类型：number/string/boolean/null/undefined/symbol
  • 特点：简单，这些类型，完全按照 JS 中类型的名称来书写
// 数值类型
let age: number = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

联合类型

需求

如何定义一个变量可以是null也可以是 number 类型?

目标

掌握联合类型的用法

let arr: (number | string)[] = [1, 'a', 3, 'b']

联合类型的格式

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

解释：|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

应用场景

  1. 定时器id
// | 联合类型

// 联合类型1： 变量可以是两种类型之一
let timer:number|null = null
timer = 2

// 联合类型2： 数组元素可以是两种类型之一
let arr: (number|string|boolean)[] = [1,2,3]

arr[0] = '1'
arr[2] = true

注意：这是 TS 中联合类型的语法，只有一根竖线，不要与 JS 中的或（|| 或）混淆了

数组类型

目标

掌握在ts中使用数组的方法。

两种写法

格式

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

基本示例

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

拓展示例

如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

分析，结合联合类型来使用

let arr: (number | string) [] = ['1', 1]

这里有个有优先级的问题

小结

推荐使用 number[] 写法

类型别名

目标

掌握类型别名的用法，能给类型起别名。

格式

定义

type 别名 = 类型

使用

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

作用

  1. 给类型起别名
  2. 定义了新类型

场景

给复杂类型起别名

// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

别名可以是任意的合法字符串，一般首字母大写

小结

  1. 类型别名的关键字是___
  2. 类型别名的作用是

函数-单个定义

目标

对函数中涉及的类型进行约定

函数的类型

函数的类型实际上指的是：函数参数和返回值的类型

格式

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 {
    
     }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => {
    
     }

示例

// 函数声明
function add(num1: number, num2: number): number {
    
    
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
    
    
  return num1 + num2
}

add（1,'1') // 报错

小结

  1. 返回值的类型注解写在()的后边

函数-统一定义函数格式

问题

定义多个具有相同参数类型和返回值类型的函数时，代码比较累赘

const add = (a:number,b:number):number =>{
    
    
       return a + b
   }

   const sub = (a:number,b:number):number =>{
    
    
       return a - b
   }

分析

把拥有相同形参和实参的函数当做一个整体，来定义

const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{
    
    return a+b }

提炼自定义类型

type Fn = (n1:number,n2:number) =>number 
const add1 : Fn = (a,b)=>{
    
    return a+b }

小结

  1. 分别指定参数和返回值的类型
  2. 统一指定函数类型(类型别名来优化， 使用于函数表达式)

函数返回值是void

目标

掌握函数的返回值是void的情况

void 类型

如果函数没有返回值，那么，函数返回值类型为：void

function greet(name: string): void {
    
    
  console.log('Hello', name)
  //
}

如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足

  • 不写return

  • 写return ，但是后面不接内容

  • 写return undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {
    
    }
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {
    
    }

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
    
    
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

void和undefined的区别

  1. 如果函数没有指定返回值，调用结束之后，值是undefined的

  2. 当不能直接声明返回值是undefined

    function add(a:number, b:number): undefined {
      
       // 这里的会报错
  console.log(a,b)
}

小结

没有返回值的函数要指定它的类型是_________

函数-可选参数

目标

掌握可选参数的使用，能用可选参数定义函数

场景

使用函数实现某个功能时，参数可以传也可以不传。

例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]

这种情况下，在给函数参数指定类型时，就用到可选参数了

格式

可选参数：在可选参数名的后面添加 ?（问号）

function mySlice(start?: number, end?: number): void {
    
    
  console.log('起始索引：', start, '结束索引：', end)
}

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

可选和默认值的区别

相同点： 调用函数时，可以少传参数

区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的并一定有值。

注意：它们不能一起使用。优先使用默认值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZxexvAp-1652532070523)(asset/image-20211123163705731.png)]

对象类型-单独使用

目标

掌握给对象指定类型的描述

格式

const 对象名: {
	属性名1：类型1，
  属性名2：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2)=>返回值类型
} = { 属性名1: 值1，属性名2：值2  }

可选属性用 ?

const 对象名: {
    
    属性名1？：类型1，属性名2：类型2 } = {
    
     属性名2：值2 }

示例

const goodItem:{
    
    name: string, price: number, func: ()=>string }  = {
    
    
    name: '手机', 
    price: 2000, 
    func:function(){
    
     return '打电话' }
}

说明:

  1. 使用 {} 来描述对象结构
  2. 属性采用属性名: 类型的形式，如果是多行，可以省略,
  3. 方法采用方法名(): 返回值类型的形式
  4. 可选使用 ?

对象类型-类型别名

目标

用类型别名来简化定义对象的类型的方式

思路

把类型注解封装一下，定义类型

示例

// 创建类型别名
type Person = {
    
    
  name: string，
  age: number
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
    
    
  name: '小花',
  age: 18
  sayHi() {
    
    }
}

function f1 (p: Persion) :void {
    
    
  
}

小结

  1. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

对象类型-练习

创建两个对象：
学生对象

指定对象的类型
- 姓名
- 性别
- 成绩
- 身高
- 学习（）
- 打游戏（）

对象类型-接口

目标

掌握接口的使用

场景

当一个对象类型被多次使用时，可以有两种方式来来描述对象的类型，达到复用的目的。

  1. 类型别名，type
  2. 接口, interface

格式

interface 接口名  {
    
    
    属性1: 类型1, 属性2: 类型2,
}

示例

interface IGoodItem  {
    
    
    name: string, price: number, func: ()=>string
}


const good1: IGoodItem = {
    
    
    name: '手表',
    price: 200,
    func: function() {
    
    
        return '看时间'
    }
}

const good2: IGoodItem = {
    
    
    name: '手机',
    price: 2000,
    func: function() {
    
    
        return '打电话'
    }
}

解释：

  1. 使用 interface 关键字来声明接口
  2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
  3. 声明接口后，直接使用接口名称作为变量的类型

接口和类型的区别

interface（接口）和 type（类型别名）的对比：

  • 相同点：都可以给对象指定类型
  • 不同点:
    • 接口，只能为对象指定类型。它可以继承。
    • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

推荐：能使用 type 就是用 type

// 接口的写法-------------
interface IPerson {
    
    
	name: string,
	age: number
}

const user1：IPerson = {
    
    
	name: 'a',
	age: 20
}

// type的写法-------------
type Person  = {
    
    
	name: string,
	age: number
}
const user2：Person = {
    
    
	name: 'b',
	age: 20
}

接口继承

目标

掌握接口的继承

背景

比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐

interface IPoint2D {
    
     x: number; y: number }
interface IPoint3D {
    
     x: number; y: number; z: number }

分析

如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用

继承格式

interface 接口2 extends 接口1 {
    
    
    属性1： 类型1， // 接口2中特有的类型
    ... 
}

接口继承的示例

interface Point2D {
    
     x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
    
    
  z: number
}

解释：

  1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
  2. 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

小结

  1. 接口继承的关键字是______
  2. 继承的作用是___
  3. 如果复杂的类型没有涉及继承关系，就可以直接使用____，如果涉及了继承可以使用___

元组

目标

掌握元组类型的使用

场景

固定结构的数据， 例如

  • 使用经纬度坐标来标记位置信息
  • 使用x,y来记录鼠标的位置

可以使用数组来记录坐标

let position: number[] = [116.2317, 39.5427] // 数组的元素都是数值类型

问题

使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字，而类似于经纬度只能有两个数字。

元组 Tuple

元组是另一种特殊的数组：

  • 它确切地包含多少个元素
  • 特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]

解释：

  1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
  2. 该示例中，元素有两个元素，每个元素的类型都是 number

示例

模拟定义useState。

useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。

function useState(n: number): [number, (number)=>void] {
    
    
        const setN = (n1) => {
    
    
            n = n1
        }
        return [n, setN]
    }

const [num ,setNum] = useState(10)

字面量类型

思考

let str1 = 'hello 武汉'
const str2 = 'hello 武汉'

问： str1是什么类型？ str2是什么类型？

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

  1. 变量 str1 的类型为：string
  2. 变量 str2 的类型为：‘Hello TS’

解释

  1. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string
  2. str2 是一个常量(const)，它的值不能变化只能是 ‘hello 武汉’，所以，它的类型为:‘hello 武汉’
  • 注意：此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

字面量类型

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PhpuvNp6-1652532070525)(asset/image-20211123190033005.png)]

说明：

  1. 上面的let a等价于const
  2. 简写为 const a = ‘abc’

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

字面量的作用

单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表

示例1

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

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
    
    
  console.log(direction)
}

// 调用函数时，写上''，就会有类型提示：
changeDirection('up')

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个

优势：相比于 string 类型，使用字面量类型更加精确、严谨

示例2

redux 中的actiontype

type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
    
    
  if(type === 'ADD_TODO')
}

示例3

性别取值只能有两个

let gender: 'girl' | 'boy' = 'boy'
    gender = 'abc' // 报错

小结

字面量类型约定：只能取某些个特定的值。一般和联合类型一起使用。

猜你喜欢

转载自blog.csdn.net/wanghaoyingand/article/details/124773727
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022