typeScript

大帅子
85 阅读6分钟

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1文章，点击查看活动详情”

大家好,我是大帅子,今天给大家讲一下,typeScript的基础语法吧

1. 为什么要有typescript

内容：

  • 背景：JS 的类型系统存在“先天缺陷”弱类型，JS 代码中绝大部分错误都是类型错误（Uncaught TypeError）

    • 开发的时候，定义的变量本应该就有类型

  • 这些经常出现的错误，导致了在使用 JS 进行项目开发时，增加了找 Bug、改 Bug 的时间，严重影响开发效率

为什么会这样？ var num = 18 num.toLowerCase()

  • 从编程语言的动静来区分，TypeScript 属于静态类型的编程语言，JavaScript 属于动态类型的编程语言

    • 静态类型：编译期做类型检查
    • 动态类型：执行期做类型检查

  • 代码编译和代码执行的顺序：1 编译 2 执行

  • 对于 JS 来说：需要等到代码真正去执行的时候才能发现错误（晚）

  • 对于 TS 来说：在代码编译的时候（代码执行前）就可以发现错误（早）

并且，配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间

对比：

  • 使用 JS：

    1. 在 VSCode 里面写代码
    2. 在浏览器中运行代码 --> 运行时，才会发现错误【晚】

  • 使用 TS：

    1. 在 VSCode 里面写代码 --> 写代码的同时，就会发现错误【早】
    2. 在浏览器中运行代码

2. 安装

安装命令：npm i -g typescript 或者 yarn global add typescript

验证是否安装成功：tsc –v(查看 typescript 的版本)

3. 使用

  1. 创建 hello.ts 文件（注意：TS 文件的后缀名为 .ts）
  2. 将 TS 编译为 JS：在终端中输入命令，tsc hello.ts（此时，在同级目录中会出现一个同名的 JS 文件）
  3. 执行 JS 代码：在终端中输入命令，node hello.js

1 创建 ts 文件 ===> 2 编译 TS ===> 3 执行 JS

  • 说明：所有合法的 JS 代码都是 TS 代码，有 JS 基础只需要学习 TS 的类型即可
  • 注意：由 TS 编译生成的 JS 文件，代码中就没有类型信息了

真正在开发过程中，其实不需要自己手动的通过tsc把ts文件转成js文件，这些工作应该交给webpack或者vite来完成

语法

1. 类型注解

let age = 18
let age: number = 18

如果我们刚开始定义了数据的类型,然后我们就不能改变这个数据类型了 image.png

2. TypeScript类型概述

目标： 能够理解TypeScript中有哪些数据类型

内容：

可以将 TS 中的常用基础类型细分为两类：

  • JS 已有类型

    • 原始类型，简单类型（number/string/boolean/null/undefined）
    • 复杂数据类型（数组，对象，函数等）

  • TS 新增类型

    • 联合类型
    • 自定义类型（类型别名）
    • 接口
    • 元组
    • 字面量类型
    • 枚举
    • void
    • ...

3. 数组类型

// 写法一 :
let arr:number[] = [1,2,3,4]
// 写法二 :
let arr1:Array<string> = [1,2,3,4,5]

这个里面也是一样数据里面只能用定义好的数据类型

4. 联合类型

// 写法一 :
let arr:(number|string)[] = [1,'a',2]
// 写法一 :
let arr:Array<string|number>=[1,'a',2]

let arr2:Array<number|string|object|Array<number|string|object>> = 
[1,2,3,"4",{name:'ls'},[1,'2',{age:18}]]

5. 类型别名

我们应该使用一个关键字 type

type Tobj = {
 name: string,
 age: number,
 fun?:(n:number,n2:number)=>void
}

let obj:Tobj ={
  name: string,
  age: number,
  fun:(n:number,n1:number)=>void
  // fun(n:number,n1:number):void
}

6.函数类型

此处的void代码函数没有返回值

let fun=(num1:number,num2:number):void=>{
    
}

// 这里我们依然可以利用接口写出来
type Tfun = (num1:number,num2:number)=>void

let fun:Tfun=(num1,num2)=>{}

7.可选参数

内容：

  • 使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了
  • 比如，数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)
function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}
  • 可选参数：在可传可不传的参数名称后面添加 ?（问号）
  • 注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

8. 对象的类型

  • JS 中的对象是由属性和方法构成的，而 TS 对象的类型就是在描述对象的结构（有什么类型的属性和方法）
  • 对象类型的写法:
// 空对象
let person: {} = {}
​
// 有属性的对象
let person: { name: string } = {
  name: '同学'
}
​
// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}
​
// 对象中如果有多个类型，可以换行写：
// 通过换行来分隔多个属性类型，可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}

  • 解释:

    1 使用 {} 来描述对象结构 2 属性采用属性名: 类型的形式 3 方法采用方法名(): 返回值类型的形式

###接口类型

当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的

  • 解释：

    1 使用 interface 关键字来声明接口 2 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头 3 声明接口后，直接使用接口名称作为变量的类型 4 因为每一行只有一个属性类型，因此，属性类型后没有 ;(分号)

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {}
}

9.interface vs type

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

  • 相同点：都可以给对象指定类型

  • 不同点:

    • 接口，只能为对象指定类型
    • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

  • 推荐：能使用 type 就是用 type

interface IPerson {
  name: string
  age: number
  sayHi(): void
}

// 为对象类型创建类型别名
type IPerson = {
  name: string
  age: number
  sayHi(): void
}

// 为联合类型创建类型别名
type NumStr = number | string

10. 继承

  • 如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
  • 比如，这两个接口都有 x、y 两个属性，重复写两次，可以，但很繁琐
interface Point2D { x: number; y: number }
interface Point3D { x: number; y: number; z: number }
  • 更好的方式:
interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
  z: number
}
  • 解释：
    1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
    2. 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

11. 元祖

  • 使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
  • 更好的方式：元组 Tuple
  • 元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型
let position: [number, number] = [39.5427, 116.2317]

  • 解释：

    1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
    2. 示例中，元素有两个元素，每个元素的类型都是 number
好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!
avatar
文章
阅读
粉丝