ts简介和基本类型

简介: ts简介和基本类型

1.TypeScript是什么?
是以javascript语言为基础,是javascript的超集,

扩展了js,并添加了类型

可以在任何支持javascript的平台运行。

TS不能被JS解析器直接执行

所以TS需要进行转换,编译为JS代码,最后执行的还是js代码

  1. TS增加了什么
    类型
    支持ES的新特性
    添加了ES不具备的特性
    丰富的配置选项
    强大的开发工具
  2. TS开发环境的搭建
    安装nodejs

安装 typescript

npm i typescript -g
创建一个ts文件 xxx.ts

使用tsc对ts文件进行编译

进入命令行
进入ts文件所在目录
tsc xxx.ts

  1. 类型
    类型声明

类型声明是TS非常重要的一个特点

通过类型声明可以指定ts中变量(参数、形参)的类型

指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错。

简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值。

语法:

//声明一个变量
let 变量:类型=值

let 变量:类型;
变量=值
//如果变量声明和赋值是同时进行的,TS解析器会自动检测变量的类型,会确定为值的类型,如果后面赋值为其他类型,则会提示错误。
let 变量=值

function(参数:类型,参数:类型):返回值类型{

}
类型
类型 例子 描述
number 1,33,2.5 任意数字
string "hi" 任意字符串
boolean true,false 布尔值true或false
字面量 其本身 限制变量的值就是该字面量的值
any 任意类型
unknown
类型安全的any
void 空值(undefined) 没有值或undefined
never 没有值 不能是任何值
object {name:"孙悟空"} 任意的JS对象
array [1,2,3] 任意js数组
tuple [4,5] 元素,TS新增类型,固定长度数组
enum enum(A,B) 枚举,TS中新增类型
// 可以使用字面量进行类型声明
let aa:10;
aa=10;

// 可以使用 | 来连接多个类型(联合类型)
let bb: "male" | "female";

let cc : boolean | string;
cc=true;
cc="hello"

// any表示任意类型,一个变量设置any之后相当于对该变量关闭了TS的类型检测
//
使用TS时,不建议使用any类型
// let dd:any;
// dd=false;
// dd=123;

//* 声明变量时如果不指定类型,则TS解析器会自动判断变量的类型为any (隐式的any)
let dd;
dd=20;
dd="123"

//* 如果一个变量的类型是any,它可以赋值给任意变量
// let e:string;
// e=dd;

// 如果一个变量的类型是unknown,它不能赋值给有类型的变量
//
它实际上是一个类型安全的any。
let e:string;
let eu:unknown;
e="hello ts"
eu="wjy";
if(typeof eu =="string"){
e=eu;
}

// 类型断言 可以用来告诉解析器变量的实际类型,以下两个作用是一样的
/*

  • 语法:
  • 变量 as 类型
  • <类型> 变量
    */
    e=eu as string
    e= eu;
    // e=eu;

// void 如果不设置函数的返回值,默认是void【没有或为空】
//
函数的返回值会自动类型检测,如果在分支判断中返回不同的值,则会返回值的类型就是 联合类型

function sum1(num){
if(num>0){
return true;
}else{
return 123
}
}
// void 用来表示空,以函数为例,就表示没有返回值
//
void:空 | undefined | null
function fn():void{
// return undefined;
// return null;
return ;
}

// never不能是任何值
//
表示永远不会返回结果
function fn2():never{
throw new Error("报错了!")
}

// 联合值 f的只能为 10 20 30
let f: 10 | 20 | 30;
//
联合类型 ff的类型可以为 number string boolean
let ff: number | string | boolean;

  1. object【对象】
    // 方式一:
    let obj:object;
    // 或
    let obj:{};

// object 表示一个js对象
let a :object;

a={
name:"hyz",
age:22
};

// * 因为万物皆对象,所以实际用它是没有什么意义的
a=function(){}

// 方式二
let b:{};
b={
name:"wjy",
age:20
}
//可以指定一个变量的类型是对象,可以指定这个对象的属性有哪些,属性的类型是什么
let 变量名 :{
属性名:类型,
属性名:类型
}

let b: {
name:string
};

b={
name:"wjy",
age:20,// b会报错,因为指定的时候没有指定age属性
}

{}用来指定对象可以包含哪些属性和属性的类型

指定的属性的个数,多了一个属性也不行,少了一个属性也不行

1.1 如果想指定属性是可选的(可有可无)
可以在属性名后面 加 ?

let b:{
name:string,
age?:number
}

b={
name:"wjy"
}
1.2 规定对象指定属性是必须的,其他属性是可选的
let c:{[propName:string]:any}

let c:{name:string,[propName:string]:any};
c={
name:"wjy",
age:20,
isFlag:true
}

  1. 函数
    // * 指定d的类型是一个函数,它的参数个数为两个,两个参数的类型都是number,返回值类型也为number
    let d:(a:number,b:number)=>number;
    d=function(n1,n2):number{
    return n1+n2;
    }
  2. 数组
    语法

let 变量名:类型[];
let 变量名:Array<类型>
// * 在ts中,数组一般存储的是相同的类型的值
let e:string[];// e是一个字符串数组,只能存储字符串
e=['a','b','c'];
let f:number[];// f是一个数组,存储的是number类型
let g:Array;//g是一个数组,存储的是number类型
g=[1,2,3,4,5]

  1. 元组(js无)
    在js中是没有这个概念的,它表示固定长度的数组

语法:

let 变量名:[类型,类型,...]
let h:[string,string];
h=["hello","world"];//不会报错
h=["hello"];//报错
h=["hello","world","wjy"]//报错
赋值的时候不能多于指定的个数,也不能小于指定的个数

  1. 枚举(js无)
    将所有可能的数据列出来

/**

  • 枚举 enum:将所有可能的数据列出来
    */
    enum Gender{
    Male=1,
    Female=0,
    }
    let i:{name:string,gender:Gender};
    i={
    name:"孙悟空",
    gender:Gender.Male
    }

console.log(i.gender===Gender.Male);
console.log(Gender.Male);

  1. &表示同时【语法】
    &表示同时,表示都要满足,

// 表示j既是string类型,又是number类型,这个写法其实一点意义都没有
//
因为一个变量不可以同时满足两个类型的要求
let j:string & number;
// 表示j是一个对象,对象里面的属性既要有name属性,又要有age属性
let j:{name:string} & {age:number};
j={
name:"wjy",
age:20,
}

  1. | 表示或【语法】
    |表示或,表示只要满足一个就可以了。

  2. 类型的别名
    可以使用type定义一个类型,可以是基本类型,也可以是由字面量组成的类型。

// 定义了一个类型
type myType= 1|2|3|4|5;

let k: myType ;
let l :myType;
k=1;

相关文章
|
Web App开发 缓存 前端开发
前端性能优化:从入门到精通
【2月更文挑战第3天】
281 1
|
6月前
|
传感器 缓存 安全
《分布式软总线:网络丢包下的数据吞吐奇迹》
网络丢包是数据传输中的常见问题,由网络拥堵、物理链路故障或设备缺陷引起,导致视频卡顿、游戏延迟等问题。分布式软总线技术通过极简协议提升传输效率,采用快速丢包恢复策略、智能感知网络变化、多通道并发传输及分布式缓存等创新手段,在丢包情况下仍能保障高吞吐率。其优势在工业自动化和智能交通等领域得以体现,为复杂网络环境下的高效数据传输提供了可靠解决方案,推动未来网络通信发展。
189 10
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
Ubuntu Linux iOS开发
SVN、TortoiseSvn下载及安装
SVN、TortoiseSvn下载及安装
1582 0
|
11月前
|
API
查手机号归属地免费API接口教程
此API用于查询指定手机号码的归属地信息,包括号段、省份、城市、运营商等。支持POST和GET请求方式,需提供用户ID、KEY及手机号作为参数。返回结果包含状态码、信息提示及详细归属地信息。示例请求地址:https://cn.apihz.cn/api/ip/shouji.php?id=88888888&key=88888888&phone=13219931963。
1771 5
|
JavaScript API 索引
js中的reduce()方法 讲解 和实现
`reduce()` 方法对数组元素依次应用一个回调函数,将结果累计并最终返回单一值。语法为 `reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)`。参数包括累计器(初次为初始值或首元素)、当前元素值、索引及数组自身。此方法需返回值供下一轮迭代使用。常见应用场景包括计算数组总和与平均值、统计元素频率、过滤与转换数组内容及去除重复项等。例如,可通过 `reduce()` 快速计算 `[1, 2, 3, 4, 5]` 的总和或对对象属性值求和。此外,还可自定义实现 `reduce()` 方法
4171 1
|
Linux 数据安全/隐私保护
劲爆!超全的常用 Linux 指令大全!
这篇博文详细介绍了常用的 Linux 指令,涵盖了文件和目录操作、文本处理、系统信息和进程管理、网络操作、权限管理、以及压缩和解压等方面。文章列举了各个指令的具体用法,包括创建和删除文件/目录、复制、移动和重命名、查看和编辑文本文件、文本搜索和替换、查看系统信息、查看和管理进程、网络信息查看、文件下载、更改文件权限、压缩和解压等内容。这份指南为 Linux 用户提供了实用而全面的工具,有助于在日常管理和开发工作中更高效地操作系统。无论是初学者还是有经验的用户,阅读本文都能获得有关 Linux 操作的重要知识。
306 1
|
Linux 开发者
Linux的诞生:Linus Torvalds的“惊天一敲”与Linux内核的“首秀”
在科技界璀璨星辰中,Linus Torvalds以一次“惊天一敲”悄然点燃了革命之火——Linux就此诞生。1991年,不满现状的Linus决定创造更好的操作系统,这一敲不仅开启了个人传奇,更奏响了技术革新的序章。他将Linux内核低调发布网络,随即吸引了全球开发者的目光与贡献,使之迅速成长为开源世界的巨星。Linus的故事告诉我们:伟大创举常源于微小想法,也许下一个改变世界的“一敲”就出自你手。
500 1
|
JavaScript 测试技术 持续交付
Git提交规范详解
Git提交规范详解
1416 0
|
小程序 前端开发 Java
微信小程序|Springboot+Node+Vue实现学科竞赛管理系统(一)
微信小程序|Springboot+Node+Vue实现学科竞赛管理系统
232 0
微信小程序|Springboot+Node+Vue实现学科竞赛管理系统(一)