千字文带你入门typescript

---

theme: qklhk-chocolate

highlight: a11y-dark

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

前言

• vue3接触有一段时间了，还是用vue+js。今天一起来学习ts语法
• 本文从环境安装到ts入门

环境安装

• 安装node.js环境
• 全局安装typescript npm i -g typescript
• 创建一个ts文件
• 使用tsc对ts文件编译 (进入ts文件目录 执行tsc 文件名.ts)

ts基本类型

• 类型声明:
  • 类型声明是ts中非常重要的特点
  • 通过类型声明可以指定ts中变量(参数，形参)的类型
  • 指定类型后，当为变量赋值时，ts会自动检查值是否符合类型声明，符合则赋值，否则就报错
  • 类型声明给变量设置了类型，变量就只能存储当前类型的值

ts // 声明变量a的类型为number let a: number; // 把数字1赋给变量a a = 1 // 此处语法报错 'hello'为string a = 'hello'

ts // 声明b变量的类型为boolean 并赋值为true // let b: boolean = true // 在变量赋值过程中 ts会自动检测变量类型 let b = true // 此处语法报错 b为boolean 不能赋值为number类型 b = 123

• 函数参数类型

```ts // 自动检测a,b类型为number function sum(a, b) { return a + b } sum(123, 456)

// 将函数参数给定类型
function sum(a:number, b:number) {
    return a + b
}
// 参数只能给number类型 否则报错
sum(123, 456)
// 参数个数严格限制 由于参数就2个，传参传了3个，此处语法报错
sum(123, 456 ,789)

```

• 函数返回值类型

ts // 在函数后面加上返回值类型 返回值类型给定 function sum(a, b):number { // 此处语法报错 不能给string类型 return a + '456' } sum(123, 456)

• ts类型

| 类型 | 例子 | 描述| | --- | --- | -- | | number | 1,-33,2.5 | 任意数字 | string | 'hello',"hello" | 任意字符串 | boolean | true,false | 布尔值 | 字面量 | 其本身 | 限制变量的值就是该字面量的值 | any | * | 任意类型 | unknown | * | 类型安全的any | void | 空值(undefined) | 没有值或undefined | never | 没有值 | 不能是任何值 | object | {name:'vike'} | 任意js对象 | array | [1,2,3] | 任意js数组 | tuple | [4,5] | 元组 ts新增类型 固定长度数组 | enum | enum{A,B} | 枚举 ts新增类型

• 字面量类型声明

```ts // a声明为10 不能更改 let a:10 // 此代码报错 不能赋值为11 a = 11

// 字面量类型声明基础用法
// b声明为man或者woman 可以使用|来连接多个类型
let b : "man" | "woman"
b = "man"
b = "woman"
// 此代码报错 不是定义的字面量类型
b = "vike"

```

• 多个类型声明
  • 使用|来连接多个类型
  • 联合类型

ts let a: boolean | string a = true a = 'hello'

• any 类型

  • any表示的是任何类型
  • 变量设置了any类型后，相当于关闭了对该变量ts的类型检测
  • ts种不建议使用any类型
  • 声明变量不指定类型，ts解析器自动判断变量类型为any
  • any类型的变量可以赋值给任意变量 ```ts // 显示any类型 let b : any b = 123 b = 'hello' b = true

  // 隐式any类型 let b ```

• unknown 类型

  • 表示未知类型的值

ts let b : unknown b = 123 b = 'hello' b = true + unknown 和 any的区别 - any 可以赋值给其他变量 污染环境 - unknown 只影响自己 - unknown 实际上就是一个类型安全的any - unknow 类型的变量不能赋给其他变量

```ts
let b : any b = 123 b = 'hello' b = true

let s : string
// 赋值成功 污染变量s
s = b

let c : unknown
c = '123'
// 赋值不成功 s还是string类型 代码报错
s = c

``` + unknown 类型赋值 - 1. if 判断类型是否相同 - 2. 类型断言 告诉解析器变量的实际类型

ts let s : string let c : unknown c = '123' // if 判断 if (c === 'string') { s = c } // 断言 方法1 s = c as string // 断言 方法2 s = <string> c

• void 类型

  • 用来表示空 函数为例 就是没有返回值 ts function fn(): void { // 此处代码报错 return 123 // 此处代码正常运行 return null return undefined }

• never 类型

  • 表示永远不会返回结果
  • 常用于报错，不能返回任何空和undefined都不行

ts function fn1() : never { throw new Error('报错信息') }

• object 类型
  • object表示js的一个对象
  • 对象里有多少参数就要写多少参数
  • 如果参数不齐 就在参数后面跟？表示不确定参数

```ts let d: { name: string, age: number } d = { name: 'vike', age: 18 }

// 特殊写法 不报错 表示可选属性
let d: { name: string, age: number , sex?: string}
d = { name: 'vike', age: 18 }

// 特殊写法 传参过多 propName是自定义写法  any是属性值
let e: { name: string, [propName: string]: any }
e = { name: 'vike', age: 18, sex: 'man' }

```

• 设置函数结构的类型声明
  • 语法： (形参:类型，形参:类型 ...)=>返回值

ts let f : (a:number,b:number)=>number f = function(a, b):number { return 10 } + array 类型 - 数组声明两种方式 - 类型[] - Array<类型> ts // 字符串数组 创建方式 let h : string[] h = ['1', '2', '3'] // 数字数组 创建方式 // let g : number[] let g : Array<number> g = [1, 2, 3]

• tuple 类型

  • 元组就是固定长度的数组
  • 语法: [类型, 类型, 类型] ts let j : [string, number] j = ['123', 123]

• enum 类型

  • 枚举类型
  • Gender

```ts enum Gender { Male = 0, Female = 1 }

let i: { name: string, gender: Gender }
i = { name: 'vike', gender: Gender.Male }

```

• 特殊符号

  • & 表示同时 ts let x: { name: string } | { age: number } x = { name: 'vike', age: 18 }

• 类型的别名

  • 给自定义类型取简单别名

ts type MyType = 1 | 2 | 3 | 4 | 5 let k : MyType let l : MyType

总结

• 今日 typescript 基础及类型知识 get~