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

文章目录

前言
一、类型注解
二、类型概述
- [2.1 原始数据类型](#2.1 原始数据类型)
- [2.2 数组类型](#2.2 数组类型)
- [2.3 联合类型](#2.3 联合类型)
- [2.4 类型别名](#2.4 类型别名)
- [2.5 函数类型](#2.5 函数类型)
- [2.6 void类型](#2.6 void类型)
- [2.7 可选参数](#2.7 可选参数)
- [2.8 对象类型](#2.8 对象类型)
- [2.9 接口类型](#2.9 接口类型)
- [2.9.1 接口继承](#2.9.1 接口继承)
- [2.10 元组类型](#2.10 元组类型)
- [2.11 类型推论](#2.11 类型推论)
- [2.12 字面量类型](#2.12 字面量类型)
- [2.13 枚举类型](#2.13 枚举类型)
- [2.14 any类型](#2.14 any类型)
- [2.15 类型断言](#2.15 类型断言)
- [2.16 TypeScript泛型](#2.16 TypeScript泛型)
- [2.17 泛型约束](#2.17 泛型约束)
- [2.18 泛型约束------多个类型变量](#2.18 泛型约束——多个类型变量)
- [2.19 泛型接口](#2.19 泛型接口)
[三、TypeScript 与 Vue3](#三、TypeScript 与 Vue3)
- [3.1 defineProps 与 TypeScript](#3.1 defineProps 与 TypeScript)
- [3.2 defineEmits 与 TypeScript](#3.2 defineEmits 与 TypeScript)
- [3.3 ref 与 TypeScirpt](#3.3 ref 与 TypeScirpt)
- [3.4 computed 与 TypeScript](#3.4 computed 与 TypeScript)
- [3.5 事件处理与 TypeScript](#3.5 事件处理与 TypeScript)
- [3.6 Template Ref 与 TypeScript](#3.6 Template Ref 与 TypeScript)
- [3.7 非空断言](#3.7 非空断言)
- [3.8 TypeScript类型声明文件](#3.8 TypeScript类型声明文件)
- [3.8.1 内置类型声明文件](#3.8.1 内置类型声明文件)
- [3.8.2 第三方库类型声明文件](#3.8.2 第三方库类型声明文件)
- [3.8.3 自定义类型声明文件------共享类型](#3.8.3 自定义类型声明文件——共享类型)
- [3.8.4 类型声明文件的使用说明](#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 类型系统的主要优势：可以显示标记出代码中的意外行为，从而降低了发生错误的可能性

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

typescript 复制代码

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

2.2 数组类型

ts中数组类型有两种写法

typescript 复制代码

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

2.3 联合类型

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

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

typescript 复制代码

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

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

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

2.4 类型别名

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

当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

typescript 复制代码

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

2.5 函数类型

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

单独指定参数、返回值的类型

typescript 复制代码

  // 函数声明
  // 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
   }

同时指定参数、返回值的类型（函数的类型别名）

typescript 复制代码

type AddFn = (num1: number, num2: number) => number
const add: AddFn = (num1, num2) => {
    return num1 + num2
}

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

2.6 void类型

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

typescript 复制代码

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

2.7 可选参数

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

typescript 复制代码

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

2.8 对象类型

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

typescript 复制代码

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

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

typescript 复制代码

  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 ）来描述对象的类型，达到复用的目的

typescript 复制代码

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

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

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

推荐：能使用 type 就是用 type

2.9.1 接口继承

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

typescript 复制代码

  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也能实现类似继承的效果

typescript 复制代码

// 使用 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 元组类型

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

typescript 复制代码

let position: [number, number] = [39.5427, 116.2317]

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

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

2.11 类型推论

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

typescript 复制代码

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

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

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

2.12 字面量类型

typescript 复制代码

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

通过 TS 类型推论机制:

变量 str1 的类型为：string
变量 str2 的类型为：'Hello TS'

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

typescript 复制代码

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
function changeDirection(direction: Direction) {
console.log(direction)
}
// 调用函数时，会有类型提示：
changeDirection('up')

解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
优势：相比于 string 类型，使用字面量类型更加精确、严谨

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

2.13 枚举类型

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

typescript 复制代码

// 创建枚举
enum Direction { Up, Down, Left, Right }
// 使用枚举类型
function changeDirection(direction: Direction) {
    console.log(direction)
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection(Direction.Up)

数字枚举：默认为从 0 开始自增的数值

typescript 复制代码

// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 10, Down, Left, Right }

字符串枚举：字符串枚举的每个成员必须有初始值（没有自增长行为）

typescript 复制代码

enum Direction {
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码

typescript 复制代码

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 类型的情况

声明变量不提供类型也不提供默认值
函数参数不加类型

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

typescript 复制代码

  function fn(a, b) {}
  let b

2.15 类型断言

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

typescript 复制代码

const aLink = document.getElementById('link')

该方法返回值的类型是 HTMLElement，此类型只包含所有标签公共的属性或方法，不包含 a
标签特有的 href 等属性，导致无法操作 href 等 a 标签特有的属性或方法（这种情况下就需要使用类型断言指定更加具体的类型）

typescript 复制代码

const aLink = document.getElementById('link') as HTMLAnchorElement

关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）

typescript 复制代码

// 此语法不常用，知道即可：
const aLink = <HTMLAnchorElement>document.getElementById('link')

2.16 TypeScript泛型

泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用
在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一

typescript 复制代码

//定义泛型函数
function id<Type>(value: Type): Type { return value }
function id<T>(value: T): T { return value }

该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)

typescript 复制代码

// 调用泛型函数
const num = id<number>(10)
const str = id<string>('a')

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

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

typescript 复制代码

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

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

2.17 泛型约束

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

typescript 复制代码

function id<Type>(value: Type): Type {
	console.log(value.length)
	return value
}
id(2)

Type 可以代表任意类型，无法保证一定存在 length 属性，比如 number 类型就没有 length

此时，就需要为泛型添加约束来收缩类型 (缩窄类型取值范围)

添加泛型约束收缩类型，主要有以下两种方式：1 .指定更加具体的类型 2. 添加约束

指定更加具体的类型

typescript 复制代码

function id<Type>(value: Type[]): Type[] {
	console.log(value.length)
	return value
}

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

添加约束

typescript 复制代码

// 创建一个接口
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 泛型约束------多个类型变量

泛型的类型变量可以有多个，并且类型变量之间还可以约束(比如，第二个类型变量受第一个类型变量约束)

比如，创建一个函数来获取对象中属性的值：

typescript 复制代码

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
	return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')

两个类型变量之间的使用，用逗号分隔。
keyof 关键字接收一个对象类型，生成其键名称(可能是字符串或数字)的联合类型。
本示例中 keyof Type 实际上获取的是 person 对象所有键的联合类型，也就是： 'name' | 'age'
类型变量 Key 受 Type 约束，可以理解为：Key 只能是 Type 所有键中的任意一个，或者说只能访问对象中存在的属性

typescript 复制代码

function getProperty<Type extends object, Key extends keyof Type>(obj: Type, key: Key)
{
	return obj[key]
}

2.19 泛型接口

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

typescript 复制代码

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默认语法进行类型校验：

typescript 复制代码

defineProps({
	money: {
		type: Number,
		required: true	
},
	car: {
		type: String,
		required: true
}
})

defineProps配合ts的泛型，定义props类型校验

typescript 复制代码

// 使用ts的泛型指定props类型
defineProps<{
	money: number
	car?: string
}>()

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

3.2 defineEmits 与 TypeScript

defineEmits配合运行时声明

typescript 复制代码

const emit = defineEmits(['change', 'update'])

defineEmits配合ts类型声明

typescript 复制代码

const emit = defineEmits<{
	(e: 'changeMoney', money: number): void
	(e: 'changeCar', car: string): void
}>()

3.3 ref 与 TypeScirpt

typescript 复制代码

// 简单值 类型可忽略
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

typescript 复制代码

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

3.5 事件处理与 TypeScript

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

typescript 复制代码

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

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

typescript 复制代码

document.createElement('img').__proto__

3.7 非空断言

如果我们明确的知道对象的属性一定不会为空，那么可以使用非空断言 !

注意：非空断言一定要确保有该属性才能使用，不然使用非空断言会导致bug

typescript 复制代码

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

3.8 TypeScript类型声明文件

类型声明文件：用来为已存在的 JS 库提供类型信息
TS 中有两种文件类型：1 .ts 文件 2 .d.ts 文件
.ts 文件:

既包含类型信息又可执行代码
可以被编译为 .js 文件，然后执行代码
用途：编写程序代码的地方

.d.ts 文件:

只包含类型信息的类型声明文件
不会生成 .js 文件，仅用于提供类型信息,在.d.ts文件中不允许出现可执行的代码，只用于提供类型
用途：为 JS 提供类型信息
总结：.ts 是 implementation (代码实现文件)；.d.ts 是 declaration(类型声明文件)
如果要为 JS 库提供类型信息，要使用 .d.ts 文件

3.8.1 内置类型声明文件

TS 为 JS 运行时可用的所有标准化内置 API 都提供了声明文件
比如，在使用数组时，数组所有方法都会有相应的代码提示以及类型信息:

typescript 复制代码

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 第三方库类型声明文件

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

库自带类型声明文件

这种情况下，正常导入该库（举例axios=>查看 node_modules/axios 目录），TS 就会自动加载库自己的类型声明文件，以提供该库的类型声明。
由 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 文件提供该类型，实现类型共享。

操作步骤:

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

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

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

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

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

TS 项目中也可以使用 .js 文件。
在导入 .js 文件时，TS 会自动加载与 .js 同名的 .d.ts 文件，以提供类型声明。（如果 .js 文件和 .d.ts 文件在同一文件夹下，TypeScript 会自动关联它们。如果将 .d.ts 文件放在不同的文件夹中，也可以通过配置 tsconfig.json 文件中的 typeRoots 或 paths 选项来实现。）
declare 关键字:用于类型声明，为其他地方(比如，.js 文件)已存在的变量声明类型，而不是创建一个新的变量。

对于 type、interface 等这些明确就是 TS 类型的(只能在 TS 中使用的)，可以省略 declare 关键字。
对于 let、function 等具有双重含义(在 JS、TS 中都能用)，应该使用 declare 关键字，明确指定此处用于类型声明。

javascript 复制代码

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文件提供类型声明文件

typescript 复制代码

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、非空断言和类型声明文件等内容。

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

文章目录

前言

一、类型注解

二、类型概述

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 类型声明文件的使用说明

总结

3.5 事件处理与 TypeScript