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

news/2024/7/23 23:55:01 标签: 前端, typescript, javascript

(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)一些关于类型的特性

详见代码注释

//首先要说一句 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)
//自由度是真的高啊。。。。


http://www.niftyadmin.cn/n/5065246.html

相关文章

JS中的 typeof 针对各种类型的返回值 以及typeof历史遗留问题

JS中的 typeof 针对各种类型的返回值 typeof 运算符返回一个字符串&#xff0c;表示操作数的类型。 下表总结了 typeof 可能的返回值 类型结果Undefined"undefined"Null"object"&#xff08;原因&#xff09;Boolean"boolean"Number"numbe…

VD6283TX环境光传感器驱动开发(3)----测试闪烁频率代码

VD6283TX环境光传感器驱动开发----3.测试闪烁频率代码 概述视频教学样品申请源码下载参考代码开发板设置测试结果 概述 ST提供了6283A1_AnalogFlicker代码在X-NUCLEO-6283A1获取闪烁频率&#xff0c;同时移植到VD6283TX-SATEL。 闪烁频率提取主要用于检测光源的闪烁频率&#…

前端系列-1 HTML+JS+CSS基础

背景&#xff1a; 前端系列会收集碎片化的前端知识点&#xff0c;作为自己工作和学习时的字典&#xff0c;欢迎读者收藏和使用。 笔者是后端开发&#x1f636;前端涉猎不深&#xff0c;因此文章重在广度和实用&#xff0c;对原理和性能不会过多深究。 1.html 1.1 html5网页结…

【列表渲染+收集表单数据+过滤器+内置指令+自定义指令】

列表渲染收集表单数据过滤器内置指令自定义指令 1 列表渲染1.1 基本列表1.2 key的作用与原理1.3 列表过滤1.4 列表排序1.5 Vue监测数据改变的原理 2 收集表单数据3 过滤器4 内置指令4.1 v-text指令4.2 v-html指令4.3 v-cloak指令4.4 v-once指令4.5 v-pre指令 5 自定义指令 1 列…

封装api的理解

1.基地址(baseUrl) (1).测试环境 用于测试环境的运行 (2).正式环境 用于正式环境的运行 2.拦截器 1.请求拦截器 (1)成功的回调 做的事情:例如在请求头header里面加入toekn。 (2)失败的回调 直接返回失败的结果: return promise.reject(error) 2.响应拦截器 (1)成功的回…

AUTOSAR从入门到精通-基于 CAN 总线的汽车发电机智能调节器(下)

目录 4.4.3 CAN 通信软件实现 汽车发电机智能调节器试验与结果分析 5.1 试验方案设计

区间dp--石子合并

题目表示 有N堆石子排成一排,每堆石子有一定的数量。现要将N堆石子并成为一堆。合并的过程只能每次将相邻的两堆石子堆成一堆,每次合并花费的代价为这两堆石子的和,经过N-1次合并后成为一堆。求出总的代价最小值。 举例1: 2,4,5 总代价最小值为17 举例2: 4,1,1,4 总代…

BGP高级特性——4字节AS号

目录 4字节AS号 相关概念 两种过渡属性 4字节AS号的格式 4字节AS号建立邻居 4字节AS号路由传递 配置命令 4字节AS号 相比于2字节AS号&#xff0c;范围更大。由1~65535扩展到1~4294967295 支持4字节AS号的BGP设备兼容仅支持2字节AS号的BGP设备 相关概念 Speaker&#…