本文详细介绍TypeScript的基础知识，涵盖从全局安装tsc到编写第一个.ts文件的全过程。深入解析类型注解、原始类型、联合类型、接口、元组及函数类型等核心概念，帮助开发者快速掌握TS静态类型检查与类型推论机制，提升代码健壮性。
什么是 TypeScript？
TypeScript，简称 ts，是由微软开发的一种静态类型编程语言，它构成了 JavaScript 的超集。那么，它的独特之处究竟在哪里？
- 简而言之，JavaScript 具备的功能 TypeScript 均支持，所有合法的 JavaScript 代码均可直接在 TypeScript 环境中运行。
- TypeScript 的核心优势在于其类型支持，其名称即由 type 与 JavaScript 组合而来。
那么，TypeScript 与 JavaScript 之间究竟存在哪些区别？
JavaScript 属于动态类型编程语言，而 TypeScript 则属于静态类型编程语言。
JavaScript 采取边解释边执行的机制，错误往往只有在运行时才能被发现。
TypeScript 则采用先编译再执行的机制，在编写代码阶段即可发现潜在错误（由于 TypeScript 不能直接执行，需先编译为 JavaScript）。
TypeScript 完全兼容 JavaScript，支持直接转换。
TypeScript 具备类型支持，并提供强大的代码类型提示功能。
相信大家对 TypeScript 已有了基本了解，接下来介绍如何开始使用。首先需完成以下简单准备工作：
- 下载一个全局包。
npm i -g typescript
#或者
yarn global add typescript
- 打开 cmd 窗口，输入命令 tsc -v 以检查包是否下载成功。
当 cmd 窗口中显示版本号时，即表示下载成功。
首先打开 vscode，新建一个 .ts 文件。
例如创建 hello.ts。
接下来即可编写 TypeScript 代码！
- 新建文件，例如 hello.ts（TypeScript 文件的后缀名均为 .ts）。
- 书写代码。
编译代码：在终端输入 tsc ./hello.ts，系统将自动生成一个 js 文件。随后即可使用 node 命令运行该 js 文件，或在浏览器中打开查看效果。
若不想下载本地包，也可选择在线运行，链接如下： 在线运行。接下来了解 TypeScript 的类型注解。
什么是类型注解？
即为变量添加类型约束，可显式标记代码中的意外行为，从而降低出错的可能性。语法如下：
let 变量名: 类型 = 初始值 let age: number = 18
这样编写有何好处？它能更严格地规定数据类型，避免不必要的错误。若不慎写错，系统会直接提示类型错误，非常贴心。
代码中的 : number 即为类型注解。
注：此处代码错误提示需下载插件方可显示。若希望获得相同提示，可在 vscode 中下载相关插件。插件截图如下。
TypeScript 的类型。
TypeScript 的常用基础类型分为两类：JavaScript 已有类型。
原始类型：number/string/boolean/null/undefined/symbol。
对象类型：object（包括数组、对象、函数等对象）。
TypeScript 新增类型。
- 联合类型。
- 自定义类型（类型别名）。
- 接口。
- 元组。
- 字面量类型。
- 枚举。
- void。
- any。
- 等等。
原始类型：number/string/boolean/null/undefined/symbol，语法较为简单。
基本与 JavaScript 差别不大。
// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
// symbol
let uniKey:symbol = Symbol()
类型推论：在 TypeScript 中，若未明确指定类型，TypeScript 的类型推论机制会自动提供类型。其好处在于，部分场景下的类型注解可省略不写。存在以下两种场景：
- 声明变量并初始化时。
- 决定函数返回值时。
已知函数的两个参数均为number类型，则该函数的返回值亦为 number 类型。
联合类型。
需求：如何定义一个变量既可以是 null 也可以是 number 类型？此时前文所学已无法满足需求，需引入新类型——联合类型。语法如下：
let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr1 :number | string = 1 // 可以写两个类型
注意：此处的 | 竖线，在 TypeScript 中称为联合类型，即由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。请勿与 JavaScript 中的 || 混淆。应用场景示例：定时器 id。
// | 联合类型 变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()
类型别名。
在定义类型时，若自定义类型名过长，需定义别名以方便书写。语法如下：
type 别名 = 类型
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'
作用：
- 为类型起别名。
- 定义新类型。
使用场景：为复杂类型起别名。
type NewType = string | number
let a: NewType = 1
let b: NewType = '1'
注意：别名可为任意合法字符串，通常首字母大写。
数组类型。
语法：
// 写法1：
let 变量: 类型[] = [值1，...]:
let numbers: number[] = [1, 3, 5]
// numbers必须是数组，每个元素都必须是数字
// 写法2：
let 变量: Array<类型> = [值1，...]
let strings: Array<string> = ['a', 'b', 'c']
// strings必须是数组，每个元素都必须是字符串
函数。
函数涉及的类型实际上指：函数参数和返回值的类型。
定义单个函数。
语法：
// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
// 声明式实际写法:
function add(num1: number, num2: number): number {
return num1 + num2
}
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }
const add2 = (a: number =100, b: number = 100): number =>{
return a + b
}
// 注意： 箭头函数的返回值类型要写在参数小括号的后面
add（1,'1') // 报错
统一定义函数格式。
当多个函数类型一致时，重复编写会导致代码冗余，因此需统一定义函数格式，如下所示：
const add2 = (a: number =100, b: number = 100): number => {
return a + b
}
function add1 (a:number = 100 , b: number = 200): number {
return a + b
}
// 这里的 add1 和 add2 的参数类型和返回值一致，
// 那么就可以统一定义一个函数类型
type Fn = (n1:number,n2:number) => number
const add3 : Fn = (a,b)=>{return a+b }
// 这样书写起来就简单多啦
函数返回值类型 void。
在 TypeScript 中，若函数无返回值，应使用 void 类型。
function greet(name: string): void { console.log('Hello', name) //}
可应用于void，有以下几种情况：
- 函数未写 return。
- 仅写了 return，无具体返回值。
- return 的是 undefined。
// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 如果return之后什么都不写，此时，add 函数的返回值类型为： void
const add = () => { return }
const add = (): void => {
// 此处，返回的 undefined 是 JS 中的一个值
return undefined
}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}
有人好奇，既然 return undefined，为何不能直接在返回值处写 :undefined？若函数未指定返回值，调用结束后值为 undefined，但不能直接声明返回值为 undefined。
function add(a:number, b:number): undefined { // 这里会报错
console.log(a,b)
}
函数-可选参数。
使用函数实现某功能时，参数可传可不传。
例如：数组的 slice 方法，可 slice() 也可 slice(1) 还可 slice(1, 3)。因此可定义可选参数。语法如下：
//可选参数：在可选参数名的后面添加 ?（问号）
function slice (a?: number, b?: number) {
// ? 跟在参数名字的后面，表示可选的参数
// 注意：可选参数只能在 必须参数的后面
// 如果可选参数在必选参数的前面，会报错
console.log(111);
}
slice()
slice(1)
slice(1,2)
}
可选与默认值的区别。
相同点：调用函数时，可少传参数。
区别：设置默认值后即为可选，不写则使用默认值；可选参数必须有值。
注意：二者不可同时使用，优先使用默认值。
对象类型-单独使用。
格式：方法有两种写法：普通函数和箭头函数。
const 对象名: {
属性名1：类型1，
属性名2?：类型2，
方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2 }
对象类型-类型别名。
// 创建类型别名
type Person = {
name: string，
age: number
sayHi(): void
}
// 使用类型别名作为对象的类型：
let person: Person = {
name: '小花',
age: 18
sayHi() {}
}
接口。
当一个对象类型被多次使用时，有以下两种方式描述对象类型，以达到复用目的：
- 类型别名，type。
- 接口，interface。
语法：
interface 接口名 {属性1: 类型1, 属性2: 类型2}
// 这里用 interface 关键字来声明接口
interface IGoodItem {
// 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 `I` 开头
name: string, price: number, func: ()=>string
}
// 声明接口后，直接使用接口名称作为变量的类型
const good1: IGoodItem = {
name: '手表',
price: 200,
func: function() {
return '看时间'
}
}
const good2: IGoodItem = {
name: '手机',
price: 2000,
func: function() {
return '打电话'
}
}
接口和类型的区别 interface（接口）和 type（类型别名）的对比：
- 相同点：均可给对象指定类型。
- 不同点:
- 接口仅能为对象指定类型，且可继承。
- 类型别名不仅可为对象指定类型，实际上可为任意类型指定别名。
先有 interface，后有 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
}
接口继承。
若两个接口有相同属性或方法，可将公共属性或方法抽离，通过继承实现复用。语法如下：
interface 接口2 extends 接口1 {
属性1： 类型1， // 接口2中特有的类型
}
interface a { x: number; y: number }
// 继承 a
// 使用 extends(继承)关键字实现了接口
interface b extends a {
z: number
}
// 继承后，b 就有了 a 的所有属性和方法(此时，b 同时有 x、y、z 三个属性)
元组。
元组是一种特殊数组，具有两点特殊之处：
它约定了元素个数。
它约定了特定索引对应的数据类型。
举例：以 React 中的 useState 为例：
function useState(n: number): [number, (number)=>void] {
const setN = (n1) => {
n = n1
}
return [n, setN]
}
const [num ,setNum] = useState(10)
字面量类型。
例如下面的代码。
let str1 = 'hello TS'
const str2 = 'hello TS'
请大家猜测，str1 是什么类型，str2 是什么类型？请勿偷看答案。
正确答案：str1 的类型为 string 类型，str2 的类型为 Hello TS类型。
原因何在？
- str1 是变量（let），其值可为任意字符串，故类型为:string。
- str2 是常量（const），其值不可变，只能是 'hello TS'，故类型为:'hello TS'。
注意：此处的 'Hello TS' 即为字面量类型，意味着特定字符串也可作为 TypeScript 中的类型。
有人好奇，字面量类型有何作用？字面量类型通常配合联合类型使用，用于表示一组明确的可选值列表。例如下面的例子：
type Gender = 'girl' | 'boy'
// 声明一个类型，他的值 是 'girl' 或者是 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误
可见会有提示，明确告知仅能选这两种。妈妈再也不用担心写错啦。
枚举。
枚举（enum）功能类似于字面量类型与联合类型的组合，用于描述一个值，该值只能是 一组命名常量 中的一个。在未引入 type 前，大家较多使用枚举，现较少使用。语法如下：
enum 枚举名 { 可取值1, 可取值2,.. }
// 使用格式：
枚举名.可取值
注意：
- 一般枚举名称以大写字母开头。
- 枚举中的多个值之间通过
,（逗号）分隔。 - 定义好枚举后，直接使用枚举名称作为类型注解。
枚举亦分数值枚举和字符串枚举。数值枚举：默认情况下，枚举值为数值，默认为：从 0 开始自增的数值。当然，亦可给枚举成员初始化值。
enum Direction { Up = 10, Down, Left, Right }
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }
字符串枚举：
enum Direction {
Up = 'UP',
Down = 'DOWN',
Left = 'LEFT',
Right = 'RIGHT'
}
注意：字符串枚举无自增长行为，因此，字符串枚举的每个成员必须有初始值。
any 类型。
any：任意的。当类型设置为 any 时，即取消了类型限制。例如：
let obj: any = { x: 0 }
obj.bar = 100
obj()
// obj 可以是任意类型
const n: number = obj
使用 any 的场景。
- 函数不挑类型。例如，
console.log()；定义一个函数，输入任意类型数据，返回该数据类型。 - 临时使用 any 来“避免”书写很长、很复杂的类型。
还有一种隐式 any，有下面两种情况会触发：
- 声明变量不提供类型也不提供默认值。
- 定义函数时，参数不给类型。
注意：不推荐使用 any！这会让 TypeScript 变为 “AnyScript”(失去 TypeScript 类型保护的优势)。
类型介绍这边就不一一展开了，更多介绍请参阅官网。TypeScript官方文档。
以上就是TypeScript保姆级教程的详细内容，更多关于TypeScript教程的资料请关注本站其它相关文章！