千字文带你入门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 = blet 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~