文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScriptTypescript基础使用教程

2022-12-08 20:54

关注

简介

typescript是微软公司开发的开源编程语言,Type+Javascript(type是类型,在js的基础上添加了类型支持)

简称:ts,是Javascript的超集

安装

node.js或者我们的浏览器,他只认识js代码,不认识ts代码,所以我们需要把我们的ts转换为我们的js代码,然后进行运行操作

安装命令

npm i -g typescript

yarn global add typescript

ts包就是用来编译TS代码的包,提供了tsc的命令,实现ts->js

检验是否安装成功:

tsc -v

注意:Mac 电脑安装全局包时,需要添加 sudo 获取权限:sudo npm i -g typescript yarn 全局安装:sudo yarn global add typescript

使用原因

类型推演与类型匹配

开发编译时报错

极大程度的避免了低级错误

支持JavaScript最新特性(包含ES6/7/8)

Hello TypeScript

hello.ts文件

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));

执行命令

tsc hello.ts

这时候会自动给我们生成一个helio.js文件

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

从上面我们可以看出,我们使用:指定的变量的类型,在自动生成的js文件中却消失了

这是因为TyperScript只会在编译时对类型进行静态检查,如果发现有错误,编译的时候就会进行报错,而在运行时,与普通的Javascript文件一样,不会对类型进行检查

TypeScript类型概述

我们可以细分为两类

JS原有的类型

原始类型,简单类型(number/string/boolean/null/undefined)

特点:简单,这些类型,是完全按照JS中的类型的名称来书写

复杂数据类型(数组,对象,函数等)

TS新增的类型

联合类型:联合类型使用|分割每个类型,取值可以为多种类型的一种

自定义类型(类型别名)

接口:是一个非常灵活的概念,接口一般首字母大写,有的编程语言中会建议接口加上I前缀

元组:元组类型是另一种类型的数组,它确切地知道包含多少个元素,以及特定索引对应的类型,number有个缺点,就是不严谨,该类型中的数组可以出现任意多个数字

字面量类型:字符串字面量类型用来约束取值只能是某几个字符串中的一个

枚举:枚举(Enum)类型用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等

任意类型:any表示允许赋值为任意类型

void:函数的返回值类型是void

类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

使用type创建类型别名

泛型

泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性

// 基本泛型
let list1: Array<number> = [1, 2, 3]
// 动态泛型
let makeTuple = <T, Y>(x: T, y: Y) => [x, y];
const v1 = makeTuple(1, 'one')
const v2 = makeTuple(true, 1)

到此这篇关于JavaScript Typescript基础使用教程的文章就介绍到这了,更多相关JS Typescript内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯