TypeScript 语法 + 工具封装

环境配置

安装 npm install typescript -g
查看版本 tsc --version

1.初识typescript

邂逅typescript，typescript的基本使用

新建ts 文件（记得导出）
typescript 定义时可指定 变量类型 在名称后面加引号和类型
格式为 let 名称: 类型 = 值 （例如： let name:string = ‘张三’）
类型 string 首字母为小写

let message: string = '张三'
console.log(message, '------')
let name = 123
name = 66
export {}

运行 tsc xxxx 并在html中引入

<html><head></head><body><h1>哈哈哈哈</h1></body><script src="xxxxx"></script>
</html>

typescript的类型推导

在 ts 中不定义 类型会默认赋值 值的类型
例如 let name = 123 则默认 name的类型是 number
但使用 const 赋值时会默认返回 字面量类型
例如 const name = 1.88 则默认 name的类型是 1.88 等同于 const name:1.88 = 1.88
所以：let 推导出来的是通用类型，const推导出来的是字面量类型

2.typescript的数据类型

js中的类型

Array

//明确的指定<数组>的类型注解：两种写法
// 1.string[]: 数组类型，并且数组中存放的是字符串
let list: string[] = ['张三','李斯']
list.push('王五')
//2. Array<number> 数组类型，并且数组中存放的是number
let arr:Array<number> = [0,1,2]
arr.push(9)
export {}

Object

let info: {name: stringage: number
} = {name: '青子',age: 18
}
console.log(info.name)
// 可以通过 type 定义
type infos = {names: stringages: number
}
let info1: infos = {names: '陆景',ages: 18
}
console.log(info1.ages)
export { }

使用

// z? 为可传值，不是必传
type obj = {x: numbery: numberz?: number
}function getNum(val: obj) {return val.x + val.y
}getNum({ x: 1, y: 2 })export { }

函数的类型
参数

function getInfo(num1:number,num2:number){return num1 + num2
}
getInfo(5,6)
export {}

返回值

//返回值可以明确指定，也可以自动进行推导
function getInfo(num1:number,num2:number):number{return num1 + num2
}
let val = getInfo(5,6)
console.log(val)
export {}

匿名参数

const names = ['abc','cds','opp']
//匿名函数最好不要添加注解类型
names.forEach(function(item,index,arr){console.log(item,index,arr)
})
export {}

使用

type val = {time: numbertext: string
}
function getList(value: string) {let arr: val[] = []arr.push({ time: 111, text: '你好' })return arr
}let list = getList('oioioio')
list.map(item => {console.log(item.time, item.text)
})
export {}

ts中的类型

any

//any表示不限制任意类型
let id: any = 44
id = "text"
id = []
console.log(id.length)
export { }

unknown

let foo:unknown = 'pp'
foo = 123
//要求必须进行类型的校验
if( typeof foo === 'string'){console.log(foo.length)
}
export{}

void

// 没有返回值的时候
function foo(num:number,num1:number):void{console.log(num+num1)
}
export {}

never

// 一般情况下不会使用never ,never表示不会返回任何值
// 封装工具的时候可以使用
function getFoo(message: number | string) {switch (typeof message) {case "string":console.log(message.length)breakcase "number":console.log(Number(message))breakdefault:const check: never = message}
}
getFoo(123)
export{}

tuple

//元组类型，元组数据结构中可以存放不同的数据类型，取出来的item也是有明确的类型
const info:[string,number,number] = ['zs',18,1.88]
const value = info[1]
export{}

3. typescript的语法细节

联和类型的使用

//有的情况下一个值可能是number 也可能是string 类型，这种情况下就可以使用联合类型
let id: number | string = 123
id = 'aaa'
//范围缩小
if(typeof id === 'string'){console.log(id.length)
}
export{}

类型别名的使用type

// type 类型的别名
type val = number | string
let id: val = '123'
id = 456
export { }

接口声明的使用interface

//type 直接赋值
type info = {x: numbery: numberz?: number
}
//interface 声明
interface info1 {x: numbery: numberz?: number
}
function getFoo(val:info1){return val.x + val.y
}
getFoo({x:1,y:2})
export{}

别名和接口的区别

//区别一：type类型使用范围更广，接口类型只能用来声明对象
type info = number
type info1 = string[]
//区别二 : interface 可以多次声明,可以继承
interface Ikun {x: numbery: number
}
interface Ikun {z?: number
}
export { }

交叉类型的使用

//交叉类型，满足两个或多个条件
interface info {name: string,age: number
}
interface Ikun {running: () => void
}
type NewType = info & Ikun
let list: NewType = {name: '张三李斯',age: 15,running: function () {return '你干嘛！哎哟'}
}
export {}

类型断言

// 获取DOM 元素  <img calss="img"/>
//使用类型断言
//类型断言规则：断言只能断言成更加具体的类型，或者不太具体（any/unknown)类型
const imgEl = document.querySelector(".img") as HTMLImageElement
imgEl.src = "xxx"
imgEl.alt = 'yyy'
export {}

非空类型断言

interface info {name:stringage:18friend?:{name:string}
}
let foo:info = {name:'张三',age:18
}
// 访问属性：可选链：?.
console.log(foo.friend?.name)
// 属性赋值
// 解决方案一：范围缩小
if(foo.friend){foo.friend.name = '言念'
}
// 解决方案二：非空类型断言（有点危险，只有在确保friend 一定有值时才能使用
foo.friend!.name = '言念'
export{}

字面量类型

type utils = { url: string, method: "post"|"get" }
let request:utils = {url:'xxxx',method:'post'}
request.method as "post"
export {}

类型缩小

//1 typeof
type id = string | number
let foo: id = "123"
if (typeof foo === "string") {console.log(foo.length)
}
// 2 ===/！==
type Direction = "left" | "right" | "top" | "bottom"
function switchDirection(direction: Direction) {if (direction === "left") {console.log("左")} else if (direction === "right") {console.log("右")} else if (direction === "top") {console.log("上")}else if (direction === "bottom") {console.log("下")}
}
// 3 instanceof 传入一个日期，打印日期
function printDate(date: string | Date) {if (date instanceof Date) {console.log(date.getTime())} else {console.log(date)}
}
// 4 in 判断是否有一个属性
interface Iswim {swim: () => void
}
interface Irun {run: () => void
}
function move(animal: Irun | Iswim) {if ("swim" in animal) {animal.swim()} else if ("run" in animal) {animal.run()}
}
const fish: Iswim = {swim: function () { }
}
const dog: Irun = {run: function () { }
}
move(dog)
export { }