TypeScript数据类型

目录

TypeScript数据类型

基础数据类型

number、string、boolean、 null 和 undefined、object

TypeScript 复制代码
//1.基础类型使用
// number:表示数值类型,例如:let age: number = 25;
// string:表示字符串类型,例如:let name: string = "John";
// boolean:表示布尔类型,例如:let isReady: boolean = true;
// null 和 undefined:表示空值类型,例如:let data: null = null;
// object:表示对象类型,例如:let person: object = { name: "John", age: 25 };\
export{}
let n:number=18;
let str:string="张三";
let b:boolean=true;
let arr:number[]=[1,2,3]; 
let arr2:Array<number>=[1,2,3];
let data:undefined=undefined;
let data2:null=null;
let data3:object={name:"张三",age:18};

其他数据类型

元组 []

类似数组。数组只能是一种数据类型,元组多个数据类型。但元组长度不能太长,不然不好理解。

TypeScript 复制代码
//元组
let tuple:[number,string]=[18,"cts"];

枚举 enum

TypeScript 复制代码
enum Color{Red,Yellow,Blue};

接口 interface

定义一组 属性(可以是数据类型或方法),不需要实现。可重复定义相同名称的接口,重名后将合并属性。

TypeScript 复制代码
//接口
interface IPerson {
   readonly id: number;
   name: string,
   age: number,
   color: Color;
   address?:string,
   [propName: string]: any;//可以添加任意属性
}
 let tom: IPerson = {
    id:1,
    name: 'Tom',
    age:12,
    gender2:'male',
    color:Color.Red
 };

console.log(tom.age);

联合类型 |

类型可选择

TypeScript 复制代码
let union:string|number;
union=18;
union="cts";

交叉类型 &

将多个类型合并成一个新的类型

TypeScript 复制代码
interface IPrintable {
    print(str:string): void;
}

interface ILoggable {
   isLog?:boolean;
   log(): void;
}
let c:IPrintable & ILoggable={
   print(str:string){
      console.log("Printable")
   },
   log(){
      console.log("Loggable")
   }
};
c.print("你好呀");

type声明

  • 1type 用于定义类型别名,使得我们可以为一个复杂类型或者一个较长的类型声明一个简短的别名。这个别名可以在任何地方使用,以代替原始的类型。
  • 2.如果多次声明同一个变量、函数或类,这些声明会被自动合并为一个声明。这种合并称为声明合并。而 type 关键字也可以用于声明合并,允许我们扩展已有的类型声明。
TypeScript 复制代码
type MyString = string;
type Point = { x: number; y: number };
type Callback = (data: any) => void;
let myStr:MyString="123";

type Person2 = {
   name: string;
 }
 type User2 = {
   age: number;
 }
 let person: Person2 & User2;
 person = {
   name: 'Echo',
   age: 26,
 }

面向对象

类class

TypeScript 复制代码
//定义类
 class Person{
   name:string;
   age:number;
   address?:string;//?可为空
   [propName: string]: any;//可以添加任意属性
   constructor(name:string,age:number){
       this.name=name;
       this.age=age;
   }
   sayHello():void{
       console.log(`name:${this.name},age:${this.age}`);
   }
}

//类实例
let  user:Person=new Person('rose',18);
user.sayHello();

继承extends

TypeScript 复制代码
class Teacher extends Person{
   sayHello():void{
      console.log( `Teacher,name:${this.name},age:${this.age}`);
  }
}
let  user2:Person=new Teacher('jack',18);
user2.sayHello();

其他

类型推断

不添加变量或常量数据类型。

复制代码
let num = 123; // 推断为 number 类型
console.log(num.toFixed(2)); // 输出:123.00

类型断言 as

将数据类型转换,常用any数据转换

复制代码
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
console.log(strLength); // 输出:16

总结

类型是TS中最重要的部分,因为TS的诞生主要就是解决JS弱类型的问题,增加了代码的可读性和可维护性。

引用

博文源代码https://github.com/chi8708/TypeScriptDemo/blob/main/Basic2/01Type.ts

相关推荐
HackTwoHub5 分钟前
AI赋能Chrome MCP × JS逆向Skill自动化JS逆向挖洞
javascript·人工智能·chrome·安全·web安全·网络安全·自动化
mengqudoh20 分钟前
elementui el-table 表头固定功能
javascript·vue.js·elementui
YiWait23 分钟前
基于 Vue 3 的网络收音机,编译为桌面应用软件
前端·javascript·vue.js
大连好光景44 分钟前
登录凭证 | Session+Cookie | Redis Token | JWT
前端·javascript
英俊潇洒美少年1 小时前
Vue 生产环境打包:SourceMap、压缩、混淆、Gzip、多环境配置 企业级最佳实践
前端·javascript·vue.js
MXN_小南学前端1 小时前
Vue 后台管理系统:封装通用el-table导出方法(附完整源码)
javascript·vue.js
xwjalyf2 小时前
javascript数组 forEach,filter,some,every,map,find,reduce的用法与区别
开发语言·javascript·json·ecmascript
海兰2 小时前
【小程序】 贪吃蛇(Next.js+WebSocket+SQLite + Prisma ORM)
javascript·websocket·小程序
JiaWen技术圈2 小时前
next.js 开发中的水合(Hydration)问题
javascript
和blue一起变得更好3 小时前
周三:Vue3高级组件特性
前端·javascript·vue.js