本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。中
前言
- vue3接触有一段时间了，还是用vue+js。今天一起来学习ts语法
- 本文从环境安装到ts入门
环境安装
- 安装node.js环境
- 全局安装typescript npm i -g typescript
- 创建一个ts文件
- 使用tsc对ts文件编译 (进入ts文件目录 执行tsc 文件名.ts)
ts基本类型
- 类型声明:
- 类型声明是ts中非常重要的特点
- 通过类型声明可以指定ts中变量(参数，形参)的类型
- 指定类型后，当为变量赋值时，ts会自动检查值是否符合类型声明，符合则赋值，否则就报错
- 类型声明给变量设置了类型，变量就只能存储当前类型的值
// 声明变量a的类型为number
let a: number;
// 把数字1赋给变量a
a = 1
// 此处语法报错 'hello'为string
a = 'hello'
复制代码 // 声明b变量的类型为boolean 并赋值为true
// let b: boolean = true
// 在变量赋值过程中 ts会自动检测变量类型
let b = true
// 此处语法报错 b为boolean 不能赋值为number类型
b = 123
复制代码- 函数参数类型
// 自动检测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)
复制代码- 函数返回值类型
// 在函数后面加上返回值类型 返回值类型给定
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新增类型 |
- 字面量类型声明
// a声明为10 不能更改
let a:10
// 此代码报错 不能赋值为11
a = 11
// 字面量类型声明基础用法
// b声明为man或者woman 可以使用|来连接多个类型
let b : "man" | "woman"
b = "man"
b = "woman"
// 此代码报错 不是定义的字面量类型
b = "vike"
复制代码- 多个类型声明
- 使用|来连接多个类型
- 联合类型
let a: boolean | string
a = true
a = 'hello'
复制代码- any 类型
- any表示的是任何类型
- 变量设置了any类型后，相当于关闭了对该变量ts的类型检测
- ts种不建议使用any类型
- 声明变量不指定类型，ts解析器自动判断变量类型为any
- any类型的变量可以赋值给任意变量
// 显示any类型
let b : any
b = 123
b = 'hello'
b = true
// 隐式any类型
let b
复制代码- unknown 类型
- 表示未知类型的值
let b : unknown
b = 123
b = 'hello'
b = true
复制代码- unknown 和 any的区别
- any 可以赋值给其他变量 污染环境
- unknown 只影响自己
- unknown 实际上就是一个类型安全的any
- unknow 类型的变量不能赋给其他变量
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 类型赋值
-
- if 判断类型是否相同
-
- 类型断言 告诉解析器变量的实际类型
-
let s : string
let c : unknown
c = '123'
// if 判断
if (c === 'string') {
s = c
}
// 断言 方法1
s = c as string
// 断言 方法2
s = <string> c
复制代码- void 类型
- 用来表示空 函数为例 就是没有返回值
function fn(): void {
// 此处代码报错
return 123
// 此处代码正常运行
return null
return undefined
}
复制代码- never 类型
- 表示永远不会返回结果
- 常用于报错，不能返回任何空和undefined都不行
function fn1() : never {
throw new Error('报错信息')
}
复制代码- object 类型
- object表示js的一个对象
- 对象里有多少参数就要写多少参数
- 如果参数不齐 就在参数后面跟？表示不确定参数
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' }
复制代码- 设置函数结构的类型声明
- 语法： (形参:类型，形参:类型 ...)=>返回值
let f : (a:number,b:number)=>number
f = function(a, b):number {
return 10
}
复制代码- array 类型
- 数组声明两种方式
- 类型[]
- Array<类型>
// 字符串数组 创建方式
let h : string[]
h = ['1', '2', '3']
// 数字数组 创建方式
// let g : number[]
let g : Array<number>
g = [1, 2, 3]
复制代码- tuple 类型
- 元组就是固定长度的数组
- 语法: [类型, 类型, 类型]
let j : [string, number]
j = ['123', 123]
复制代码- enum 类型
- 枚举类型
- Gender
enum Gender {
Male = 0,
Female = 1
}
let i: { name: string, gender: Gender }
i = { name: 'vike', gender: Gender.Male }
复制代码- 特殊符号
- & 表示同时
let x: { name: string } | { age: number }
x = { name: 'vike', age: 18 }
复制代码- 类型的别名
- 给自定义类型取简单别名
type MyType = 1 | 2 | 3 | 4 | 5
let k : MyType
let l : MyType
复制代码总结
- 今日 typescript 基础及类型知识 get~