数据类型typescript知多少（一文了解TypeScript数据类型）
时间：2021-10-25 10:23:58 类别：编程学习 浏览量：2637
数据类型typescript知多少
一文了解TypeScript数据类型目录
- 基础类型
- any类型
- 数组
- 元组
- Interface
- 函数
- 类型自推
- 联合类型（二选一甚至多选一）
- class
- 枚举
ts中支持更多的类型
let age: number = 10 // Number let firstName: string = '凉宸' // String let lastName: string = '凉宸' // String let isMary: boolean = true // boolean let unde: undefined = undefined // undefined let nu: null = null // null
undefined和 null 可以作为值赋值给其他类型，因为这两个可以看作其他类型的子类型
赋值的时候一定要根据定义的数据类型做赋值，否则会有如下提示错误
- 声明变量时，类型与值不符
- 为变量重新赋值时，类型与值不符
有的时候我们无法确定变量类型，我们可以将其指定类型为any
当我们赋值给其any类型后，可以为其赋任意值，且不会报错
let isAny:any='任意类型any' isAny=520 isAny=true isAny=null
但是为了避免类型不明确，我们还是尽量少使用any
any 类型的特点
- 允许赋值为任意类型
- 可以访问任意属性和方法
let userName: any = '凉宸';
// 可以访问任意属性
console.log(userName.name);
console.log(userName.name.firstName);
// 可以调用任意方法
userName.setName('David');
userName.setName('David').sayHello();
userName.name.setFirstName('David');
我们可以指定数组内元素类型
let ages: number[] = [5, 20, 13, 14] let names: string[] = ['凉宸','路飞', '明世隐', '李杨勇']
类数组：
类数组是不会拥有数组拥有的方法，tsc能够自动识别两者
let arguments=[555,555,55]
function lei(){
let arr:number=arguments
}
基本类似于数组，但是类型可以是多种
let arr:[number,string,boolean]=[520,'凉宸',true]
我们在赋值时一定要根据类型顺序填写
元素能多不能少
let arr:[number,string,boolean]=[520,'凉宸',true]
arr.push('b') // 可以
arr.push(4) // 可以
arr.push(true) // 可以
console.log(arr)
let arr:[number,string]=[520,'凉宸']
arr.push('b') // 可以
arr.push(4) // 可以
arr.push(true) // 不可以
console.log(arr)
- 接口可以理解为纲领、比较抽象，其中不会规定的具体的行为，也就是说接口中，我们只定义有属 性，哪些方法以及属性的类型，方法的抽象，不会为属性赋值，也不会定义方法的实现
- 类的话一般属性要赋值，方法也要有实现
- Interface 的声明像 class，成员更像字面量对象，而不是 class
作用：
- 对对象的形状(shape)进行描述
- Duck Typing（鸭子类型）
interface Point{
userName:string|number
password:number
} // 此时执行tsc不会解析出相应的js代码，因为此类型是ts特有的，只是表示约束
interface Point{
userName:string|number
password:number
}
let value:Point={
userName:'admin@qq.com',
password:123456
}
let val:Point={
userName:55555,
password:123456
} // 此时两种都符合，在执行tsc
// 只是出现如下代码，没有任何约束js
var value = {
userName: 'admin@qq.com',
password: 123456
};
var val = {
userName: 55555,
password: 123456
};
可选属性 ?
创建 IPerson 接口类型变量时，接口中声明的属性，变量赋值时也必须有，否则就会报错
但我们可以设置某个属性为可选属性，在创建变量时，就可以选择赋值
interface Point{
userName:string|number
password:number,
email?:string
}
let value:Point={
userName:'admin@qq.com',
password:123456
}
let val:Point={
userName:55555,
password:123456
}
只读属性readonly：
interface Point{
userName:string|number
password:number,
email?:string,
readonly address:string
}
let value:Point={
userName:'admin@qq.com',
password:123456,
address:'保定'
}
let val:Point={
userName:55555,
password:123456,
address:'北京'
}
value.password=65975222
value.address='kkk'
ts中函数可以定义返回值类型
const value=():number=>{
return 1
}
const val=():string=>{
return 1
}
在我们定义变量时没有赋予类型，则会按照值做推论
let value=5555 value='string'
let value:string|number value='凉宸' value=520 value=true
类型断言:
function get(data:string|number):number{
const str=data as string
if(str.length){
return str.length
}else {
const num = data as number
return num.toString().length
}
}
console.log(get('凉宸'));
console.log(get(520));
- 使用 as 进行断言
- 断言不是类型转换，断言后只是告诉编译器变量的类型，后面使用变量时就有提示了
- 如果不添加断言，使用某个类型的方式就会报错
type guard：
type guard不是一种类型，而是一种能够确认具体类型的一种机制
function get(data:string|number):number{
if(typeof data==='string'){
return data.length
}else {
return data.toString().length
}
}
console.log(get('凉宸'));
console.log(get(520));
class：类，ES6语法，是js面向对象晋升，class 仅仅是语法糖，底层仍然是基于函数和原型实现的
- 类：定义了一切事物抽象特点，像是一张蓝图、一张图纸
- 对象：类的实例
- 三大特征：封装、继承、多态
三个修饰符，可以控制类中成员的访问级别：
- Public：修饰的属性或方法是公有的，任何地方都可以访问，默认行为
- Protected：修饰的属性或者方法是受保护的，只有类本身和其子类可以访问
- Private：修饰的属性或者方法是私有的，只有类内部可以访问呢
class Person {
public name:string
protected age:number
private address:string
constructor(name:string,age:number,address:string){
this.name=name
this.age=age
this.address=address
}
speak(){
console.log(`Person:${this.name}---${this.age}---${this.address}`)
}
}
const Children = new Person('凉宸',20,'保定')
Children.speak()
// 可以正常输出
class Person {
public name:string
protected age:number
private address:string
constructor(name:string,age:number,address:string){
this.name=name
this.age=age
this.address=address
}
speak(){
console.log(`Person:${this.name}---${this.age}---${this.address}`)
}
}
class child extends Person{
say(){
console.log(`child:${this.name}---${this.age}`)
}
}
// const Children = new Person('凉宸',20,'保定')
// Children.speak()
const childs = new child('凉宸',20,'保定')
childs.say()
运行时也是报错的
class Person {
public name:string
protected age:number
private address:string
constructor(name:string,age:number,address:string){
this.name=name
this.age=age
this.address=address
}
speak(){
console.log(`Person:${this.name}---${this.age}---${this.address}`)
}
}
class child extends Person{
say(){
console.log(`child:${this.name}---${this.age}`)
}
}
// const Children = new Person('凉宸',20,'保定')
// Children.speak()
const childs = new child('凉宸',20,'保定')
childs.say()
class Person {
public name:string
protected age:number
private address:string
constructor(name:string,age:number,address:string){
this.name=name
this.age=age
this.address=address
}
speak(){
console.log(`Person:${this.name}---${this.age}---${this.address}`)
}
}
class child extends Person{
say(){
console.log(`child:${this.name}---${this.age}`)
}
}
const Children = new Person('凉宸',20,'保定')
Children.speak()
console.log(Children.address);
console.log(Children.age);
// const childs = new child('凉宸',20,'保定')
// childs.say()
枚举（Enum）类型用于取值被限定在一定范围内的场景
enum Week {
SUNDAY = '周日',
MONDAY = '周一',
TUESDAY = '周二',
WEDNESDAY = '周三',
THURSDAY = '周四',
FRIDAY = '周五',
SATURDAY = '周六'
}
function getProgramme(date: Week): string {
if (date === Week.SUNDAY) {
return '周日休闲娱乐'
} else if (date === Week.MONDAY) {
return '周一做博文'
} else if (date === Week.TUESDAY) {
return '周二冲刺'
}
else if (date === Week.WEDNESDAY) {
return '周三继续奋斗'
}
else if (date === Week.THURSDAY) {
return '周四发新文'
}
else if (date === Week.FRIDAY) {
return '周五准备休息'
}
else {
return '周六睡觉'
}
}
console.log(getProgramme(Week.THURSDAY));
到此这篇关于一文了解TypeScript数据类型的文章就介绍到这了,更多相关TypeScript数据类型内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！
标签：TypeScript 数据类型
您可能感兴趣
- TypeScript定义接口(interface)案例教程（TypeScript定义接口interface案例教程）
- typescript技巧（为什么TypeScript的Enum会出现问题）
- react新手指引页面编写（React+TypeScript进行项目构建案例讲解）
- typescript获取属性名（TypeScript 中如何限制对象键名的取值范围）
- typescript怎么加号（Typescript中的as、问号与感叹号详解）
- typescript使用技巧（深入理解typescript中的infer关键字的使用）
- typescript开发后端（教你使用webpack打包编译TypeScript代码）
- 数据类型typescript知多少（一文了解TypeScript数据类型）
- 14岁丧父 20岁丧母，从苦难走向辉煌的银泰创始人沈国军（14岁丧父20岁丧母从苦难走向辉煌的银泰创始人沈国军）
- 银泰集团董事长沈国军获评 北京影响力 十大企业家（银泰集团董事长沈国军获评）
- 15帅气男士发型，清爽时尚很有型，喜欢就试试（清爽时尚很有型）
- 哪几个历史人物被影协主席李雪健演的活灵活现（哪几个历史人物被影协主席李雪健演的活灵活现）
- 王伦狭隘，晁盖霸道，宋江奸诈骨头软，只有鲁智深才适合当寨主（王伦狭隘晁盖霸道）
- 他是梁山最早的头目，江湖人称 旱地忽律 ，宋江几乎将其遗忘（他是梁山最早的头目）
热门推荐
- 史上最全的css布局教程（详解CSS经典布局之Sticky footer布局）
- laravel后台登录教程（Laravel 默认邮箱登录改成用户名登录的实现方法）
- 织梦dedecms的时间调用标签（dedecms/织梦专题节点列表内容实现分页的方法介绍）
- sqlserver游标实例（Sql Server临时表和游标的使用小结）
- python基础教程常用函数整理（Python基础之函数的定义与使用示例）
- linux怎么上传windows的文件（Windows本地环境和Linux腾讯云服务器之间传输文件的方法）
- python语言支持多态（Python实现多态、协议和鸭子类型的代码详解）
- python图像仿射变换（详解Python计算机视觉 图像扭曲仿射扭曲）
- mysql中定义字段时zerofill属性的作用
- Extjs中FieldSet的收缩和展开
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8