JavaScript Typescript基础使用教程

2024-10-03 12:15:12

简介

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解JavaScript私有类字段和TypeScript私有修饰符

JavaScript私有类字段和隐私需求在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子这是一个带有私有字段的 JavaScr
JavaScript/TypeScript 实现并发请求控制的示例代码

场景假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制模拟利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa
JavaScript 与 TypeScript之间的联系

目录 1.什么是 JavaScript? 2.JavaScript 有什么用? 3.什么是 TypeScript? 4.TypeScript 有哪些特点? 5.TypeScript 相对于 JavaScript 的用途是什么? 6.我们应该开始使用 TypeScript 吗? 1.什么是 JavaScript? JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言.这是一个高级别的.通常是即时编译的.多范式的. Vanilla JavaScript 是一个名称,用
JavaScript和TypeScript中的void的具体使用

如果你来自传统的强类型语言,可能会很熟悉 void 的概念:一种类型,告诉你函数和方法在调用时不返回任何内容. void 作为运算符存在于 JavaScript 中,而作为基本类型存在于 TypeScript 中.在这两个世界中,void 的工作机制与大多数人习惯的有点不同. JavaScript 中的 void JavaScript 中的 void 是一个运算符,用于计算它旁边的表达式.无论评估哪个表达式,void总是返回undefined. let i = void 2; // i ===
JavaScript TypeScript实现贪吃蛇游戏完整详细流程

目录项目背景及简介多模块需求分析场景模块需求食物类模块需求记分牌模块需求蛇类模块需求控制模块需求项目搭建 ts转译为js代码 package.json包配置文件 webpack.config.js打包工具配置项目结构搭建 html文件 css文件(这里使用的是less) 项目页面多模块搭建完成Food(食物)类完成ScorePanel(记分牌)类完成Snake(蛇)类完成GameControl(控制)类完成index类(启动项目) 项目启动总结项目背景及简介 t
JS TypeScript的Map对象及联合类型实战

目录一.TypeScript的Map对象 1.1迭代 Map 二.TypeScript 联合类型 2.1扩展知识 2.2总结一.TypeScript的Map对象类型脚本映射对象. map对象保存键值对,可以记住键的原始插入顺序.任何值(对象或原始值)都可以用作键或值.Map是ES6中引入的新数据结构. Typescript使用地图类型和new关键字创建Map: let myMap = new Map(); 初始化映射,可以以数组的形式传入键值对: let myMap = new Map([
解读TypeScript与JavaScript的区别

目录 TypeScript与JavaScript区别 TypeScript与javascript优劣势 TypeScript 的优势 JavaScript 的优势如何抉择总结 TypeScript与JavaScript区别 TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript 是一种非常受欢迎的 JavaScript 语言扩展.它在现有的 JavaScrip
JavaScript Typescript基础使用教程

目录简介安装安装命令使用原因 TypeScript类型概述 JS原有的类型 TS新增的类型类型别名泛型简介 typescript是微软公司开发的开源编程语言,Type+Javascript(type是类型,在js的基础上添加了类型支持) 简称:ts,是Javascript的超集安装 node.js或者我们的浏览器,他只认识js代码,不认识ts代码,所以我们需要把我们的ts转换为我们的js代码,然后进行运行操作安装命令 npm i -g typescript yarn globa
javascript数据类型基础示例教程

js中的输入输出语句方法说明归属 alert(msg) 浏览器弹出警示框浏览器 console.log(msg) 浏览器控制台打印输出信息浏览器 prompt(info) 浏览器弹出输入框,用户可以输入浏览器注:prompt(info)获取的输入都是字符串类型,跟python中的input()类似. <script> prompt("请输入:"); alert('你好呀!小可爱!'); console.log('阿牛最帅啦!'); </script>
TypeScript基础入门教程之三重斜线指令详解

前言 TypeScript是Javascript的超集,实现以面向对象编程的方式使用Javascript.当然最后代码还是编译为Javascript. 三斜杠指令是包含单个XML标记的单行注释. 注释的内容用作编译器指令. 三斜杠指令仅在其包含文件的顶部有效. 三重斜杠指令只能在单行或多行注释之前,包括其他三重斜杠指令. 如果在声明或声明之后遇到它们,则将它们视为常规单行注释,并且没有特殊含义. /// <reference path ="..."/> /// <re
TypeScript基础class类教程示例

目录 class类示例构造函数继承 class 类类是面向对象语言的程序设计中的概念,是面向对象编程的基础. 类是创建对象的模板,是对现实生活中一类具有共同特征的事物的抽象类的内部封装了属性和方法,用于操作自身的成员示例将每条狗看做一个对象,那他的属性就有品种.颜色,方法(行为)舔.叫.吃. class Dog { breed: string; color: string; lick(): void { console.log(` 我仍认为我们作为一个舔狗的真正目的是为了拥有一份
TypeScript 基础数据结构哈希表 HashTable教程

目录前言 1. 哈希表介绍和特性 2. 哈希表的一些概念 3. 地址冲突解决方案 3.1 方案一:链地址法 3.2 方案二:开放地址法 4. 哈希函数代码实现 5. 哈希表封装 5.1 整体框架 v1 版 5.2 添加 put 方法 v2 版 5.3 添加 get 方法 v3 版 5.4 添加 delete 方法 v4 版 6. 哈希表的自动扩容前言哈希表是一种非常重要的数据结构,几乎所有的编程语言都有直接或者间接的应用这种数据结构. 很多学习编程的人一直搞不懂哈希表到底是如何实现的
Bootstrap零基础入门教程(三)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 写到这里,这篇从零开始学Bootstrap(3)我想写以下几个内容: 1. 基于我对Bootstrap的理解,做一个小小的总结.
Bootstrap零基础入门教程(二)

什么是 Bootstrap? Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的.Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品. 本文重点给大家介绍Bootstrap零基础入门教程(二),具体详情如下所示: 过程中会频繁查阅资料的网站: http://www.
Go基础Slice教程详解

Go 语言切片(Slice) Go 语言切片是对数组的抽象. Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组相比切片的长度是不固定的,可以追加元素,在追加时可能使切片的容量增大. 声明Slice 带有 T 类型元素的切片由 []T 表示,其中T代表slice中元素的类型.切片在内部可由一个结构体类型表示,形式如下: type slice struct { Length int Capacity int Z
一看就懂的ReactJs基础入门教程-精华版

一.ReactJS简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月开源了.由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单.所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具. ReactJS官网地址:http://facebook.github.io/re
vue项目中使用ts（typescript）入门教程

目录 1.引入Typescript 2.配置文件webpack配置 3.让项目识别.ts 4.vue组件的编写 data()中定义数据 props传值完整代码案例最近项目需要将原vue项目结合ts的使用进行改造,这个后面应该是中大型项目的发展趋势,看到一篇不错的入门教程,结合它并进行了一点拓展记录之.本文从安装到vue组件编写进行了说明,适合入门. 1.引入Typescript npm install vue-class-component vue-property-decorator --