作者之前都是在写js,所以这里介绍ts肯定是不能从头开始介绍了,主要在js的基础上介绍ts关于类型的几个特性,以及ts的安装还有配置问题
通俗点来讲,ts是js的扩展,或者说js可以理解为ts的一部分。在实际应用上来说,ts是对js在编写层面上作出的一种规范。甚至运行的时候,都要通过ts编辑器将ts代码文件转化为js代码才能顺利执行。
ts的安装可以直接使用指令
npm install -g typescript
下载完成后,通过tsc指令编译你的ts文件
tsc ‘目标文件名称’
会生成同名的js文件,这个时候再使用node去执行js
node ‘同名的js文件’
这个其实就是底层的原理,因为node环境还有浏览器环境之恩那个识别js,所以我们要先把ts转化为js。第一眼看可能是多次一举,但是在编写ts的时候,无论是ide也好,ts编译器也好,都会对我们的一些错误进行修正,让生成的js代码更加和谐。
不过如果想要跳过这个中间产物,可以直接使用工具ts-node,可以直接去编译ts并且执行,不需要我们手动去执行一些东西了
npm install -g ts-node
接下来就可以通过这个第三方工具直接执行ts文件了
ts-node ‘ts文件’
一个可能需要注意一点的问题就是,有些时候安装完了这两个工具可能是会识别不出tsc和ts-node这两个东西是什么,原因在于window下我们一般要手动配置环境变量。
其实-g这个参数的意思就是全局安装,但是在window下,会有很多其奇怪挂的情况,所以这个全局安装多半会失败。
这个的解决方法就是,你需要从node-module模块中寻找到可能会需要到的应用程序,然后单独提取出来,再把环境变量指向这个东西。(具体可以询问身边的老手或者ai工具,这个东西应该是每个node程序员都要会的)
当然如果你是linux系统就不会有这个顾虑,因为linux处理这类安装的时候,一般是自动帮你集成好了环境变量。
详见代码注释
//首先要说一句 ts是js的超类,所以js的代码全部是ts代码的一部分
console.log('ddd')
//首先声明变量key可以加上类型,ts会做相关的检查
let a:string='dddd'
//对于对象,也可以使用接口的方式进行检查
interface User {
name:string;
age:number;
}
const user:User={name:'',age:0}
//方法也可以使用这种方式,对传入参数进行检查
//并且控制返回值的类型
//如图所示,返回一个字符串
function deleteUser(user: User):string {
// ...
}
//定义组合类型:
type myType=1|2|3|4
// const b:myType=0这样子就会报错
// 有点类似枚举的感觉
//应用:
function testType(obj:string|string []){
//这参数可以接收字符串或者字符串数组,内部可以使用typeof等等方法做尝试
}
//泛型,用法和其他语言差不多,用来指明本语言中缺失的部分
class Student{
name:type;
constructor(name:type){
this.name=name
}
}
//结构类型系统,一个ts中很有意思的点,如果有相同的属性部分,那么在使用的时候就会被视为是同一种类型
function testT(point:{x:string,y:number}){
//...里面是一些属性
}
//这时候可以传入
testT({x:'',y:1})
//也可以,以这样的方式传入,子集xy的部分会被视为point同类型的东西
const x={x:'',y:1,z:12}
testT(x)
//自由度是真的高啊。。。。
对于一些自定义类型,我们可以其别名
例如我们设置一个枚举类型,0-7
type num=0|1|2|3|4|5|6|7
这样num这个类型的对象,或者说变量,取值只能是0-7的其中一个数字
上面利用对象也是一样的
当然对于对象还有别的可用方式:接口
interface User {
name:string;
age:number;
}
const user:User={name:'',age:0}
这种方式就允许我们自定义一些特殊的类,此外接口和别名也有些不一样的地方,比如说接口允许我们通过继承来叠加东西
(不过js和ts本身也不是面向对象的语言。。。所以就这样)
字面类型有种语法糖的感觉,或者可以说是匿名类?
const name:'head'='head'
像是这段代码所展示的内容一样,name这变量的类型被固定在’head‘这个字符串上了
。。。感觉好像有点鸡肋,但是这种用法主要是用来搭配其他的东西
const num:'1'|'2'|'3'='3'
这样是不是就好理解一点
ts中的断言和其他语言中的assert不一样,ts的断言主要是一种声明,告知tsc不需在做一些检查了。
虽然这样的操作有时候会发生一些逻辑上的错误,造成一点问题。但是个别时候代码逻辑需要我们告诉编译器某种情况。
ts中的断言分为两种:as,!
as:类型断言(Type Assertion):使用 as
关键字或尖括号(<>
)语法,将一个值断言为特定的类型。这可以用于告诉编译器在某个上下文中使用特定类型,即使它的类型推断可能是其他类型。
const a='dududu' as string
const a='dududu'
!:非空断言(Non-null Assertion):使用感叹号 !
,表示告知编译器一个变量不会为 null
或 undefined
。这可以用于避免空值检查,并在访问变量的属性或方法时省略空值检查。
const a=bunn!.name
断言其实就是一种提前声明:告诉编译器“我已经确定这是什么类型了,不用检查了”