[前端基础]typescript安装以及类型拓展

(0)写在前面:

作者之前都是在写js,所以这里介绍ts肯定是不能从头开始介绍了,主要在js的基础上介绍ts关于类型的几个特性,以及ts的安装还有配置问题

(1)ts和js是什么关系

通俗点来讲,ts是js的扩展,或者说js可以理解为ts的一部分。在实际应用上来说,ts是对js在编写层面上作出的一种规范。甚至运行的时候,都要通过ts编辑器将ts代码文件转化为js代码才能顺利执行。

(2)ts的安装,启动以及环境配置

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处理这类安装的时候,一般是自动帮你集成好了环境变量。

(3)一些关于类型的特性

详见代码注释

TypeScript 复制代码
//首先要说一句 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) {
    // ...
}

//定义组合类型:
type myType=1|2|3|4
// const b:myType=0这样子就会报错
// 有点类似枚举的感觉
//应用:
function testType(obj:string|string []){
    //这参数可以接收字符串或者字符串数组,内部可以使用typeof等等方法做尝试
}

//泛型,用法和其他语言差不多,用来指明本语言中缺失的部分
class Student<type>{
    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)
//自由度是真的高啊。。。。
相关推荐
小羊没烦恼!15 分钟前
T-SQL查询高级—SQL Server索引中的碎片和填充因子
开发语言·前端·javascript·数据库·后端·python·web安全
定栓43 分钟前
Webpack迁到Vite第一节:模块系统迁移:require → import
运维·前端·webpack
小熊在忙fpga1 小时前
N32G430芯片的flash表示
前端·javascript·html
Data analyse4561 小时前
App埋点版本兼容的字段迁移校验
大数据·运维·服务器·前端·数据库·数据分析
NC 王炸1 小时前
AI 做的便签,换个浏览器就没了?加一个导出按钮,把数据带走
javascript·ai编程·数据备份·localstorage·txt导出
todoitbo1 小时前
本来只想给内网开个口子,Natapp 却多给了一道防护
前端·javascript·vue.js·内网穿透·网络防护·natapp
会灭火的程序员1 小时前
SuperMap AgentX Server智能体接入WEB应用技术文档
前端·supermap·agentx·agentx server
CRMEB1 小时前
商品 SKU 设计,从简单规格到多规格踩过什么
java·前端·数据库·开源
Chloe.Zz1 小时前
一篇入门Agent
开发语言·前端·javascript
java1234_小锋1 小时前
【技术专题】HTML5 网页技术 - HTML5 表格标签
前端·html·html5