TypeScript 语法 + 工具封装

2024-01-02 12:31:09

环境配置

安装 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: string
    age: number
} = {
    name: '青子',
    age: 18
}
console.log(info.name)
// 可以通过 type 定义
type infos = {
    names: string
    ages: number
}
let info1: infos = {
    names: '陆景',
    ages: 18
}
console.log(info1.ages)
export { }

使用

// z? 为可传值，不是必传
type obj = {
    x: number
    y: number
    z?: 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: number
    text: 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)
            break
        case "number":
            console.log(Number(message))
            break
        default:
            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: number
    y: number
    z?: number
}
//interface 声明
interface info1 {
    x: number
    y: number
    z?: 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: number
    y: 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 {}

文章来源:https://blog.csdn.net/weixin_43457011/article/details/135313533
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。