IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TypeScript -> 正文阅读

[JavaScript知识库]TypeScript

TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。

ts的基本类型

string number boolean

使用 :

let a:string='kang'
let b:number=1
let c:boolean=true

使用字面量来标注类型

let a: 11 | 12   //联合类型,此时的a只能是11或者12
a = 12

any 任意类型,any或者没有声明类型的变量都是任意类型

let name
let d: any;
d = 1
d = 'str'
d = false

unknown 表示未知类型,实际上就是类型安全的any,她不能直接复制给别的变量

let k: unknown;
k = 1
k = 'lll'

ang和unkown区别

let s: string = d   //不报错,any类型可以将自己赋值给别的类型,
// let f:string =k   //报错,不能将unknown类型的变量赋值给string类型,想要让它赋值要先做判断或类型断言
if (typeof k === 'string') {
    s = k
}
// 使用类型断言,可以告诉解析器变量的实际类型,两种语法
s = k as string
s = <string>k

void 表示空(undefined), 用来设置函数的返回值,表示函数没有返回值

function fn(): void {
}

never 表示没有值,不永远不会返回结果

function fn2(): never {
    throw new Error('err')
}

其他类型

object 对象

以下两种方式都可以来定义对象类型的变量

let obj = {}
console.log(typeof obj);   //object
let obj2: object = { l: 'l' }
console.log(typeof obj2);  //object
  • 限制对象的结构
// 通常用{}来指定对象里面可以包含哪些属性,复制的对象和指定的对象的结构必须要一样,都则会报错
let obj3: { name: string, age: number }
obj3 = { name: 'kang', age: 18 }
// obj3={name:'yi'}  //报错:类型 "{ name: string; }" 中缺少属性 "age"

// 给属性后面加?表示这个属性是可选的,可有可无
let obj4: { name: string, age?: number }
obj4 = { name: 'kangyi' }

// 表示在obj5里面必须有name属性,其他属性可有可无,其他属性的格式是属性名是字符串,属性是是任意的
let obj5: { name: string, [propName: string]: any }
obj5 = { name: 'kyky', age: 18, gender: 'famale' }
obj5 = { name: 'kyky' }
// obj5={age:18,gender:'famale'}   //报错,类型 "{ age: number; sex: string; }" 中缺少属性 "name"
  • 限制函数的结构
let fn3: (a: number, b: number) => number
fn3 = function (a: number, b: number): number {
    return a + b
}

array数组,两种表达方式

let arr1: number[]  //数组里只能存放数字
arr1 = [1, 2, 3, 4]
// arr1=[1,2,3,'k']    //不能将类型“string”分配给类型“number”

let arr2: Array<string>
arr2 = ['a', 'b', 'c', 'sss']
// arr2=[1,'a']     //不能将类型“number”分配给类型“string”

tuple 元组,有固定长度的数组

let t1: [number, number, number]
t1 = [1, 2, 3]

enum 枚举

enum Gender {
    male,
    famale
}
let person: { name: string, gender: Gender }
person = { name: "kang", gender: Gender.famale }

给类型起别名,可以简化类型的使用

type myType = 1 | 2 | 3 | 4 | 5
let m: myType
let n: myType

遇到的bug

刚开始的时候报错:let a: number = 1; 无法重新声明块范围变量“a”。
之所以 tslint 会提示这个错误,是因为在 Commonjs 规范里,没有像 ESModule 能形成闭包的「模块」概念,所有的模块在引用时都默认被抛至全局,因此当再次声明某个模块时,TypeScript 会认为重复声明了两次相同的变量进而抛错。

  • 在ts最后加上export{} 使用插件@babel/plugin-transform-modules-commonjs
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-03 15:59:25  更:2022-01-03 16:00:53 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 12:50:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码