首页 前端知识 【TS简单上手,快速入门教程】————适合零基础

【TS简单上手,快速入门教程】————适合零基础

2024-08-18 22:08:36 前端知识 前端哥 333 147 我要收藏

文章目录

  • 前言
  • 一、类型注解
  • 二、类型概述
    • 2.1 原始数据类型
    • 2.2 数组类型
    • 2.3 联合类型
    • 2.4 类型别名
    • 2.5 函数类型
    • 2.6 void类型
    • 2.7 可选参数
    • 2.8 对象类型
    • 2.9 接口类型
    • 2.9.1 接口继承
    • 2.10 元组类型
    • 2.11 类型推论
    • 2.12 字面量类型
    • 2.13 枚举类型
    • 2.14 any类型
    • 2.15 类型断言
    • 2.16 TypeScript泛型
    • 2.17 泛型约束
    • 2.18 泛型约束——多个类型变量
    • 2.19 泛型接口
  • 三、TypeScript 与 Vue3
    • 3.1 defineProps 与 TypeScript
    • 3.2 defineEmits 与 TypeScript
    • 3.3 ref 与 TypeScirpt
    • 3.4 computed 与 TypeScript
    • 3.5 事件处理 与 TypeScript
    • 3.6 Template Ref 与 TypeScript
    • 3.7 非空断言
    • 3.8 TypeScript类型声明文件
    • 3.8.1 内置类型声明文件
    • 3.8.2 第三方库类型声明文件
    • 3.8.3 自定义类型声明文件——共享类型
    • 3.8.4 类型声明文件的使用说明
  • 总结


前言

学习一门语言之前,我们首先肯定要知道我们为什么而学?
JS 的类型系统存在“先天缺陷”弱类型,JS 代码中绝大部分错误都是类型错误(Uncaught TypeError)。
这些经常出现的错误,导致了在使用 JS 进行项目开发时,增加了找 Bug、改 Bug 的时间,严重影响开发效率。
TypeScript 属于静态类型(编译期做类型检查)的编程语言,JavaScript 属于动态类型(执行期做类型检查)的编程语言
对于 JS 来说:需要等到代码真正去执行的时候才能发现错误(晚)
对于 TS 来说:在代码编译的时候(代码执行前)就可以发现错误(早)
并且,配合 VSCode 等开发工具,TS 可以提前到在编写代码的同时就发现代码中的错误,减少找 Bug、改 Bug 时间。

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


一、类型注解

TypeScript 是 JS 的超集,TS 提供了 JS 的所有功能,并且额外的增加了:类型系统
JS也有类型(比如,number/string 等),但是 JS 不会检查变量的类型是否发生变化,而 TS 会检查
TypeScript 类型系统的主要优势:可以显示标记出代码中的意外行为,从而降低了发生错误的可能性

let age: number = 10
let username: string = '刘狄威'

上述代码中,约定变量 age 的类型为 number 类型,username的类型为string类型,约定了什么类型,就只能给变量赋值该类型的值,否则就会报错

约定了类型之后,代码的提示就会非常的清晰

二、类型概述

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

  • JS 已有类型
    原始数据类型( number/string/boolean/null/undefined )
    复杂数据类型(数组,对象,函数等)
  • TS 新增类型
    联合类型
    自定义类型(类型别名)
    接口
    元组
    字面量类型
    枚举
    void

2.1 原始数据类型

原始类型:number/string/boolean/null/undefined

let age: number = 18
let myName: string = '老师'
let isLoading: boolean = false

2.2 数组类型

ts中数组类型有两种写法

// 写法一(推荐):
let numbers: number[] = [1, 3, 5]
// 写法二:
let strings: Array<string> = ['a', 'b', 'c']

2.3 联合类型

通过联合类型将多个类型组合成一个类型

如果数组中既有 number 类型,又有 string 类型,那么这个数组的类型应该如何写?

  let arr: (number | string)[] = [1, 2, 3, 'abc']
  // 注意事项: | 的优先级较低, 需要用 () 包裹提升优先级
  // 一旦使用联合类型, 说明 arr 中存储的既可能是 number 也可能是 string, 所以会丢失一部分提示信息 (只能提示共有的方法和属性)
  let timerId: number | null = null

| (竖线)在 TS 中叫做联合类型,即:由两个或多个其他类型组成的类型,表示可以是这些类型中的任意一种
注意:这是 TS 中联合类型的语法,只有一根竖线,不要与 JS 中的或(||)混淆了

2.4 类型别名

使用类型别名给类型起别名,简化类型的使用

当同一类型(复杂)被多次使用时,可以通过类型别名,简化该类型的使用

// 将一组类型存储到「变量」里, 用 type 来声明这个特殊的「变量」
type CustomArray = (number | string)[]
let arr1: CustomArray = [1, 'a', 3, 'b']
let arr2: CustomArray = ['x', 'y', 6, 7]

2.5 函数类型

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

  • 单独指定参数、返回值的类型
  // 函数声明
  // function 函数名(参数1: 参数1类型, 参数2: 参数2类型): 返回值类型 { 函数体 }
   function add(a: number, b: number): number {
     return a + b
   }
  // 函数表达式
   const fn = function(a: number, b: number): number {
     return a + b
   }
  // 箭头函数
  // 注意事项: 以前箭头函数如果只有一个参数, 则可省略小括号, ts不行
  // ts箭头函数必须要有小括号
   const sub = (a: number): number => {
     return a
   }
   const sub = (a: number, b: number): number => {
     return a - b
   }
  • 同时指定参数、返回值的类型(函数的类型别名)
type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

这种形式只适用于函数表达式

2.6 void类型

如果函数没有返回值,那么,函数返回值类型为: void

// 如果什么都不写,此时,add 函数的返回值类型为: void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void,与上面不指定返回值类型相同
const add = (): void => {}
// 但如果指定返回值类型为 undefined 时,函数体中必须显式的 return undefined 才可以
const add = (): undefined => {
// 此处,返回的 undefined 是 JS 中的一个值
return undefined
}

2.7 可选参数

使用?给函数指定可选参数类型

  // 注意事项: 必选参数不能在可选参数后(可选参数只能出现在参数列表的最后)
  const print = (name?: string, gender?: string): void => {
    if (name && gender) {
      console.log(name, gender)
    }
  }

2.8 对象类型

JS 中的对象是由属性和方法构成的,而 TS 对象的类型就是在描述对象的结构(有什么类型的属性和方法)

let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi(content: string) {}
}

也可以用类型别名进行简化

  type Person = {
    name: string,
    age: number,
    girlFriend?: string, // ? 表示可选属性
    // sayHi: (content: string) => void
    sayHi(content: string): void
  }

  // ts 就像在写注释, 以前写的注释是给程序员看的, ts 写的类型是给编辑器看的, 程序员也可以看
  let obj1: Person = {
    name: 'james',
    age: 39,
    sayHi(content) {
      console.log(content)
    }
  }

2.9 接口类型

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

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

interface(接口)和 type(类型别名)的对比:

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

推荐:能使用 type 就是用 type

2.9.1 接口继承

接口继承: 可以实现一个接口使用另一个接口的类型约束, 实现接口的复用

  interface IPerson {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }
  // 接口继承: IStudent 具备 IPerson 的所有约束规则
  interface IStudent extends IPerson {
    score: number
    sleep: () => void
  }

  const s1: IStudent = {
    username: 'james',
    age: 19,
    gender: '男',
    sayHi() {
      console.log('詹姆斯')
    },
    score: 59,
    sleep() {
      console.log('詹姆斯正在睡觉...')
    },
  }

使用type也能实现类似继承的效果

// 使用 type 实现和 interface 类似继承的效果
  type Person = {
    username: string
    age: number
    gender: string
    sayHi: () => void
  }

  // & 与连接符: 既要满足前面的也要满足后面的
  // | 或连接符: 满足其中一个即可
  type Student = {
    score: number
    sleep: () => void
  } & Person
  
  const s2: Student = {
    username: 'james',
    age: 28,
    gender: '未知',
    sayHi() {
      console.log('hello!')
    },
    score: 80,
    sleep() {
      console.log('我在睡觉')
    },
  }

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

2.10 元组类型

元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型

let position: [number, number] = [39.5427, 116.2317]
  • 元组类型可以确切地标记出有多少个元素,以及每个元素的类型
  • 该示例中,元素有两个元素,每个元素的类型都是 number

使用 number[] 的缺点:不严谨,因为该类型的数组中可以出现任意多个数字

2.11 类型推论

在 TS 中,某些没有明确指出类型的地方,TS 的类型推论机制会帮助提供类型

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

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

  1. 声明变量并初始化时
  2. 决定函数返回值时

2.12 字面量类型

let str1 = 'Hello TS'
const str2 = 'Hello TS'

通过 TS 类型推论机制:

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

此处的 ‘Hello TS’,就是一个字面量类型,也就是说某个特定的字符串也可以作为 TS 中的类型

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时,会有类型提示:
changeDirection('up')
  • 解释:参数 direction 的值只能是 up/down/left/right 中的任意一个
  • 优势:相比于 string 类型,使用字面量类型更加精确、严谨

字面量类型就是把字面量当做类型来用

2.13 枚举类型

枚举:定义一组命名常量。它描述一个值,该值可以是这些命名常量中的一个

// 创建枚举
enum Direction { Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
    console.log(direction)
}
// 调用函数时,需要应该传入:枚举 Direction 成员的任意一个
// 类似于 JS 中的对象,直接通过 点(.)语法 访问枚举的成员
changeDirection(Direction.Up)
  • 数字枚举:默认为从 0 开始自增的数值
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }
  • 字符串枚举:字符串枚举的每个成员必须有初始值(没有自增长行为)
enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}
  • 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
    因为:其他类型仅仅被当做类型,而枚举不仅用作类型,还提供值(枚举成员都是有值的)
    也就是说,其他的类型会在编译为 JS 代码时自动移除。但是,枚举类型会被编译为 JS 代码
enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}
// 会被编译为以下 JS 代码:
var Direction;
(function (Direction) {
	Direction['Up'] = 'UP'
	Direction['Down'] = 'DOWN'
	Direction['Left'] = 'LEFT'
	Direction['Right'] = 'RIGHT'
})(Direction || Direction = {})

2.14 any类型

这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
当值的类型为 any 时,可以对该值进行任意操作,并且不会有代码提示

  • 其他隐式具有 any 类型的情况
  1. 声明变量不提供类型也不提供默认值
  2. 函数参数不加类型

注意:因为不推荐使用 any,所以,这两种情况下都应该提供类型

  function fn(a, b) {}
  let b

2.15 类型断言

使用类型断言来指定更具体的类型

const aLink = document.getElementById('link')
  • 该方法返回值的类型是 HTMLElement,此类型只包含所有标签公共的属性或方法,不包含 a
    标签特有的 href 等属性,导致无法操作 href 等 a 标签特有的属性或方法(这种情况下就需要使用类型断言指定更加具体的类型)
const aLink = document.getElementById('link') as HTMLAnchorElement
  • 关键字 as 后面的类型是一个更加具体的类型(HTMLAnchorElement 是 HTMLElement 的子类型)
// 此语法不常用,知道即可:
const aLink = <HTMLAnchorElement>document.getElementById('link')

2.16 TypeScript泛型

  • 泛型在保证类型安全(不丢失类型信息)的同时,可以让函数等与多种不同的类型一起工作,灵活可复用
  • 在 C# 和 Java 等编程语言中,泛型都是用来实现可复用组件功能的主要工具之一
//定义泛型函数
function id<Type>(value: Type): Type { return value }
function id<T>(value: T): T { return value }
  • 该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)
// 调用泛型函数
const num = id<number>(10)
const str = id<string>('a')

实现了复用的同时保证了类型安全

泛型函数的调用可简化=>省略 <类型> 来简化泛型函数的调用,利用TS内部的类型参数推断

// 省略 <number> 调用函数
let num = id(10)
let str = id('a')

当编译器无法推断类型或者推断的类型不准确时,就需要显式地传入类型参数

2.17 泛型约束

为什么需要泛型约束呢,举例一个场景:

function id<Type>(value: Type): Type {
	console.log(value.length)
	return value
}
id(2)
  • Type 可以代表任意类型,无法保证一定存在 length 属性,比如 number 类型就没有 length

此时,就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)
添加泛型约束收缩类型,主要有以下两种方式:1 .指定更加具体的类型 2. 添加约束

  1. 指定更加具体的类型
function id<Type>(value: Type[]): Type[] {
	console.log(value.length)
	return value
}

将类型修改为 Type[] (Type 类型的数组),只要是数组就一定存在 length 属性

  1. 添加约束
// 创建一个接口
interface ILength { length: number }
// Type extends ILength 添加泛型约束
// 解释:表示传入的类型必须满足 ILength 接口的要求才行,也就是得有一个 number 类型的 length 属性
function id<Type extends ILength>(value: Type): Type {
	console.log(value.length)
	return value
}
  • 创建描述约束的接口 ILength,该接口要求提供 length 属性
  • 通过 extends 关键字使用该接口,为泛型(类型变量)添加约束
  • 该约束表示:传入的类型必须具有 length 属性
    此方法,传入的实参(比如,数组)只要有 length 属性即可(类型兼容性)

2.18 泛型约束——多个类型变量

泛型的类型变量可以有多个,并且类型变量之间还可以约束(比如,第二个类型变量受第一个类型变量约束)
比如,创建一个函数来获取对象中属性的值:

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
	return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')
  1. 两个类型变量之间的使用,用逗号分隔。
  2. keyof 关键字接收一个对象类型,生成其键名称(可能是字符串或数字)的联合类型。
  3. 本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型,也就是: ‘name’ | ‘age’
  4. 类型变量 Key 受 Type 约束,可以理解为:Key 只能是 Type 所有键中的任意一个,或者说只能访问对象中存在的属性
function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key)
{
	return obj[key]
}

2.19 泛型接口

泛型接口:接口也可以配合泛型来使用,以增加其灵活性,增强其复用性

interface IdFunc<Type> {
	id: (value: Type) => Type
	ids: () => Type[]
}
let obj: IdFunc<number> = {
	id(value) { return value },
	ids() { return [1, 3, 5] }
}

在接口名称的后面添加 <类型变量> ,那么这个接口就变成了泛型接口。

三、TypeScript 与 Vue3

vue3配合ts中,还需要额外安装一个vscode插件:Typescript Vue Plugin TypeScript 与组合式 API

3.1 defineProps 与 TypeScript

  • defineProps配合vue3默认语法进行类型校验:
defineProps({
	money: {
		type: Number,
		required: true	
},
	car: {
		type: String,
		required: true
}
})
  • defineProps配合ts的泛型,定义props类型校验
// 使用ts的泛型指定props类型
defineProps<{
	money: number
	car?: string
}>()

// 赋予默认值
interface Props {
  value: boolean;
}
const props = withDefaults(defineProps<Props>(), { value: false });

3.2 defineEmits 与 TypeScript

  • defineEmits配合运行时声明
const emit = defineEmits(['change', 'update'])
  • defineEmits配合ts类型声明
const emit = defineEmits<{
	(e: 'changeMoney', money: number): void
	(e: 'changeCar', car: string): void
}>()

3.3 ref 与 TypeScirpt

// 简单值 类型可忽略
const money = ref<number>(10)
const money = ref(10)

// 复杂类型 推荐指定泛型
type Todo = {
	id: number
	name: string
	done: boolean
}
const list = ref<Todo[]>([])

3.4 computed 与 TypeScript

const leftCount = computed<number>(() => {
	return list.value.filter((item) => item.done).length
})

3.5 事件处理 与 TypeScript

const move = (e: MouseEvent) => {
	mouse.value.x = e.pageX
	mouse.value.y = e.pageY
}
<h1 @mousemove="move($event)">根组件</h1>

3.6 Template Ref 与 TypeScript

const imgRef = ref<HTMLImageElement | null>(null)
onMounted(() => {
	console.log(imgRef.value?.src)
})

如何查看一个DOM对象的类型:通过控制台进行查看

document.createElement('img').__proto__

3.7 非空断言

如果我们明确的知道对象的属性一定不会为空,那么可以使用非空断言 !
注意:非空断言一定要确保有该属性才能使用,不然使用非空断言会导致bug

// 告诉typescript, 明确的指定obj不可能为空
let nestedProp = obj!.second;

3.8 TypeScript类型声明文件

  • 类型声明文件:用来为已存在的 JS 库提供类型信息
    TS 中有两种文件类型:1 .ts 文件 2 .d.ts 文件
  • .ts 文件:
  1. 既包含类型信息又可执行代码
  2. 可以被编译为 .js 文件,然后执行代码
  3. 用途:编写程序代码的地方
  • .d.ts 文件:
  1. 只包含类型信息的类型声明文件
  2. 不会生成 .js 文件,仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码,只用于提供类型
  3. 用途:为 JS 提供类型信息
    总结:.ts 是 implementation (代码实现文件);.d.ts 是 declaration(类型声明文件)
    如果要为 JS 库提供类型信息,要使用 .d.ts 文件

3.8.1 内置类型声明文件

  • TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件
    比如,在使用数组时,数组所有方法都会有相应的代码提示以及类型信息:
const strs = ['a', 'b', 'c']
// 鼠标放在 forEach 上查看类型
strs.forEach

比如,查看(ctrl+鼠标左键) forEach 方法的类型声明,在 VSCode 中会自动跳转到 lib.es5.d.ts 类型声明文件中
当然,像 window、document 等 BOM、DOM API 也都有相应的类型声明( lib.dom.d.ts )

3.8.2 第三方库类型声明文件

第三方库的类型声明文件有两种存在形式:

  1. 库自带类型声明文件
    这种情况下,正常导入该库(举例axios=>查看 node_modules/axios 目录),TS 就会自动加载库自己的类型声明文件,以提供该库的类型声明。

  2. 由 DefinitelyTyped 提供 => 提供 TypeScript 类型定义文件(.d.ts 文件)用于流行的 JavaScript 库和框架。它的目的是为那些原本没有内置 TypeScript 支持的 JavaScript 库提供类型定义,以便开发者在使用这些库时能够享受到 TypeScript 的类型检查和智能提示功能。

可以通过npm/yarn来下载该仓库提供的 TS 类型声明包,这些包的名称格式为: @types/*,比如,@types/react、@types/lodash 等
当安装 @types/* 类型声明包后,TS 也会自动加载该类声明包,以提供该库的类型声明。 查询 @types/* 库

3.8.3 自定义类型声明文件——共享类型

项目内共享类型

如果多个 .ts 文件中都用到同一个类型,此时可以创建 .d.ts 文件提供该类型,实现类型共享
操作步骤:

  1. 创建 index.d.ts 类型声明文件。
  2. 创建需要共享的类型,并使用 export 导出(TS 中的类型也可以使用 import/export 实现模块化
    功能)。
  3. 在需要使用共享类型的 .ts 文件中,通过 import 导入即可(.d.ts 后缀导入时,直接省略)。

自定义类型声明文件为js提供声明。

为已有js 文件提供类型声明

  1. 在将 JS 项目迁移到 TS 项目时,为了让已有的 .js 文件有类型声明。(整个项目从js升级到ts不太可能,工程太庞大了,但是可以为已有js文件添加类型声明,这样在ts中使用时,也有类型提示)
  2. 成为库作者,创建库给其他人使用。

3.8.4 类型声明文件的使用说明

  • TS 项目中也可以使用 .js 文件。
  • 在导入 .js 文件时,TS 会自动加载与 .js 同名的 .d.ts 文件,以提供类型声明。(如果 .js 文件和 .d.ts 文件在同一文件夹下,TypeScript 会自动关联它们。 如果将 .d.ts 文件放在不同的文件夹中,也可以通过配置 tsconfig.json 文件中的 typeRoots 或 paths 选项来实现。)
  • declare 关键字:用于类型声明,为其他地方(比如,.js 文件)已存在的变量声明类型,而不是创建一个新的变量。
  1. 对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的),可以省略 declare 关键字。
  2. 对于 let、function 等具有双重含义(在 JS、TS 中都能用),应该使用 declare 关键字,明确指定此处用于类型声明。
let count = 10
let songName = '痴心绝对'
let position = {
	x: 0,
	y: 0
}
function add(x, y) {
	return x + y
}
function changeDirection(direction) {
	console.log(direction)
}
const fomartPoint = point => {
	console.log('当前坐标:', point)
}
export { count, songName, position, add, changeDirection, fomartPoint }

为以上js文件提供类型声明文件

declare let count:number
declare let songName: string
interface Position {
	x: number,
	y: number
}
declare let position: Position
declare function add (x :number, y: number) : number
type Direction = 'left' | 'right' | 'top' | 'bottom'
declare function changeDirection (direction: Direction): void
type FomartPoint = (point: Position) => void
declare const fomartPoint: FomartPoint
// TypeScript 通过 export 关键字了解哪些类型声明应该暴露给外部使用,从而在其他模块中提供类型检查和代码提示。
export {
count, songName, position, add, changeDirection, FomartPoint, fomartPoint
} 

总结

  • 一、类型注解
    TypeScript 是 JavaScript 的超集,增加了类型系统。通过类型注解,可以避免意外的类型错误,提高代码的可读性和维护性。

  • 二、类型概述
    文章详细介绍了 TypeScript 中的各种类型,包括基础类型(如 number、string)、数组类型、联合类型、类型别名、函数类型、void 类型、可选参数、对象类型、接口类型、元组类型、类型推论、字面量类型、枚举类型、any 类型、类型断言和泛型。

  • 三、TypeScript 与 Vue3
    文章最后介绍了如何在 Vue 3 中使用 TypeScript,包括 defineProps、defineEmits、ref、computed、事件处理、Template Ref、非空断言和类型声明文件等内容。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16062.html
标签
评论
发布的文章

无涯教程-HTML5 - MathML

2024-08-25 23:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!