【TS篇一】TypeScript介绍、使用场景、环境搭建、类和接口

文章目录

    • 一、TypeScript 介绍
      • 1. TypeScript 是什么
      • 1.2 静态类型和动态类型
      • 1.3 Why TypeScript
      • 1.4 TypeScript 使用场景
      • 1.5 TypeScript 不仅仅用于开发 Angular 应用
      • 1.6 前置知识
    • 二、如何学习 TypeScript
      • 2.1 相关链接
    • 三、起步
      • 3.1 搭建 TypeScript 开发环境
      • 3.2 编辑器的选择
      • 3.3 Hello World
    • 四、类和接口
      • 4.1 接口(Interface)
      • 4.2 类(Class)

一、TypeScript 介绍

在这里插入图片描述

1. TypeScript 是什么

在这里插入图片描述

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展,如 class / interface / module 等。这样会大大提升代码的可阅读性。

和 JavaScript 若类型不同,TypeScript 这种强类型语言最大的优势在于静态类型检查,可以在代码开发阶段就预知一些低级错误的发生。

  • 一种类似于 JavaScript 的语言,在 JavaScript 的基础之上增加了类型,同时增强了 JavaScript 部分语法功能
  • 遵循 EcmaScript 6 标准规范
  • 由微软开发
  • Angular 2 框架采用 TypeScript 编写
  • 背后有微软和谷歌两大公司的支持
  • TypeScript 可以编译成 JavaScript 从而在支持 JavaScript 的环境中运行
  • TypeScript 和 JavaScript 的关系就好比 less 和 css 的关系

1.2 静态类型和动态类型

在这里插入图片描述

静态(static):无需运行,根据程序代码就能确定结果。

动态(dynamic):只有运行才能确定结果。

类型:对某个数据所具有的性质进行的描述。如它的结构是怎样的,能进行什么操作。

静态类型:数据拥有类型,且仅有数据拥有类型。

动态类型:数据拥有类型,存放数据的变量、表达式也拥有类型,且类型在编译时是固定的。

下图是静态语言和动态语言的比较:

在这里插入图片描述

从表中可见,动态语言和静态语言各有优劣,而TypeScript提供了静态语言强类型支持,同时兼容动态语言弱类型的语法,使用者根据项目需求自由选择。

这种动静结合的特性,目前还没在其他语言见过。

1.3 Why TypeScript

  • 从 Angular 2 之后,官方推荐使用 TypeScript 作为开发 Angular 应用的首选语言

  • 遵循 EcmaScript 6

  • 强大的 IDE 支持

    • 类型检查
    • 严谨的语法提示
  • 代码重构

  • 可读性良好

1.4 TypeScript 使用场景

  • 大型团队开发

  • Angular 官推语言

  • 其它…

    这里引用知乎上一位开发者对使用推广 TypeScript 的看法:

    typescript绝对是好东西,不过推广是有难度的:1、TS是微软制造,最好的开发工具是VS,想想有些人就激动了(什么vi流,sublime流,macbook流,虽然也能写ts,但你无法跟他们说用vs写有多么好);2、即使你告诉他们TS有多好,但是几十人的团队里总有一半以上的人不想学新的东西(当然我没有权利说不学新东西的人应该全部滚动,因为互联网打工的是大爷,想跳槽随便找工作);3、JSer很多没有学习OOP开发经验(特别是从设计/页面重构转过来的);4、很多人接触TS前根本没学过JS,经常有人问“使用TS如何写元素拖拽”这样的问题(那是DOM API好伐,不过你跟初学者很难解释明白);

1.5 TypeScript 不仅仅用于开发 Angular 应用

https://www.typescriptlang.org/samples/index.html

  • React
  • Angular
  • Node.js
  • Vue.js
  • WeChat

凡是可以写 JavaScript 的都可以使用 TypeScript。

1.6 前置知识

  • EcmaScript 6
  • TypeScript 概念及关系
  • 具有一定的 JavaScript 开发经验
  • 有 Java、C#、C++、C 等静态类型语言使用经验更佳

二、如何学习 TypeScript

  • 官方文档为准
  • 阅读别人的代码
  • 由于 TypeScript 是兼容 EcmaScript 6 的,所以在开发的时候不需要完全学会 TypeScript 再使用
  • 一个建议是有空就学,会了就用
  • 虽然兼容 EcmaScript 6,但建议既然使用了 TypeScript 就让你的 TypeScript 代码更加 TypeScript,这样才能发挥出 TypeScript 的威力。

2.1 相关链接

  • 维基百科 - TypeScript

  • 如何评价 TypeScript?

  • flow.js/typescript 这类定义参数类型的意义何在?

  • TypeScript Github

  • TypeScript 官网

  • TypeScript 中文网

三、起步

3.1 搭建 TypeScript 开发环境

  • 什么是 compiler?

  • less 编译器:less

  • EcmaScript 6 编译器:babel

  • TypeScript 编译器:typescript

  • 一句话:把 TypeScript 转换为 JavaScript ,浏览器就具有运行了

  • 在线测试编译环境 compiler

    • https://www.typescriptlang.org/play/index.html
  • 本地开发编译环境

    npm i -g typescript# 查看版本号
    tsc --version# 查看使用帮助
    tsc --help
    

3.2 编辑器的选择

  • Visual Studio Code
  • Sublime
  • Webstorm

3.3 Hello World

新建 greeter.ts 并写入以下内容:

function greeter(person) {return "Hello, " + person;
}let user = "Jane User";document.body.innerHTML = greeter(user);

安装编译器:

npm i -g typescript

编译:

tsc greeter.ts

修改 greeter.ts 文件中的代码,为 greeter 函数的参数 person 加上类型声明 :string

function greeter(person: string) {return "Hello, " + person;
}let user = "Jane User";document.body.innerHTML = greeter(user);

重新编译执行。

让我们继续修改:

function greeter(person: string) {return "Hello, " + person;
}let user = [0, 1, 2];document.body.innerHTML = greeter(user);

重新编译,你将看到如下错误:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

四、类和接口

4.1 接口(Interface)

interface Person {firstName: string;lastName: string;
}function greeter(person: Person) {return "Hello, " + person.firstName + " " + person.lastName;
}let user = { firstName: "Jane", lastName: "User" };document.body.innerHTML = greeter(user);

4.2 类(Class)

class Student {fullName: string;constructor(public firstName: string, public middleInitial: string, public lastName: string) {this.fullName = firstName + " " + middleInitial + " " + lastName;}
}interface Person {firstName: string;lastName: string;
}function greeter(person : Person) {return "Hello, " + person.firstName + " " + person.lastName;
}let user = new Student("Jane", "M.", "User");document.body.innerHTML = greeter(user);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

音频修复增强软件iZotope RX 10 mac中文特点

iZotope RX 10 mac是一款音频修复和增强软件。 iZotope RX 10 mac主要特点 声音修复:iZotope RX 10可以去除不良噪音、杂音、吱吱声等,使音频变得更加清晰干净。 音频增强:iZotope RX 10支持对音频进行音量调节、均衡器、压缩器、限制器等处…

[概述] 点云滤波器

拓扑结构 点云是一种三维数据,有几种方法可以描述其空间结构,以利于展开搜索 https://blog.csdn.net/weixin_45824067/article/details/131317939 KD树 头文件:pcl/kdtree/kdtree_flann.h 函数:pcl::KdTreeFLANN 作用&#xff1a…

一个 不用氪金 也能让你变强的 VSCode 插件 Ai

哈喽,大家好 我是 彩色之外👨🏻‍💻。今天给大家推荐一款不用充钱也能让你变强的 vscode 插件 通义灵码(TONGYI Lingma),可以称之为 Copilot 的替代甜品 💪 👀 前期回顾 NPM- 滚动进…

贷款行业极难获客,怎么获取实时客户数据?

我们能想象当客户有贷款需求时会发生什么吗? 客户可能会打开手机搜索“如何借款”、“哪笔贷款利息低”、“最多能借多少钱”、“贷款需要什么条件”等关键词,然后,客户点击进入第一个链接,然后填写他们的姓名和电话号码来测试他…

OpenAI最新官方GPT最佳实践指南,一文讲清ChatGPT的Prompt玩法

原文:Sina Visitor System OpenAI的官网发表万字GPT最佳实践指南,讲清Prompt提示词的原则和策略,这里是总结和全文翻译 原创图像,AI辅助生成 OpenAI的官网上刚刚发表一篇万字的GPT最佳实践指南,这份指南把写好Promp…

大语言模型对齐技术 最新论文及源码合集(外部对齐、内部对齐、可解释性)

大语言模型对齐(Large Language Model Alignment)是利用大规模预训练语言模型来理解它们内部的语义表示和计算过程的研究领域。主要目的是避免大语言模型可见的或可预见的风险,比如固有存在的幻觉问题、生成不符合人类期望的文本、容易被用来执行恶意行为等。 从必…

C++笔记之实现多态的所有方法

C笔记之实现多态的所有方法 文章目录 C笔记之实现多态的所有方法1.C中多态是是什么?请用简洁准确的话描述2.虚函数实现多态2.1.虚函数(Virtual Functions)2.2.纯虚函数(Pure Virtual Functions)2.3.虚析构函数&#xf…

vue学习part01

02_Vue简介_哔哩哔哩_bilibili Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org) 1.简介 2.常用用法 新项目一般vue3,老项目vue2 3.vue两种风格:选项式api(vue2)和组合式api(vue3) 两种方式实现累…

Scala集合操作

1 集合简介 Scala 中拥有多种集合类型,主要分为可变的和不可变的集合两大类: 可变集合: 可以被修改。即可以更改,添加,删除集合中的元素; 不可变集合类:不能被修改。对集合执行更改,…

基于单片机控制的GSM短信模块家庭防盗报警系统

博主主页:单片机辅导设计 博主简介:专注单片机技术领域和毕业设计项目。 主要内容:毕业设计、简历模板、学习资料、技术咨询。 文章目录 主要介绍一、内容1 设计任务和要求1 主要内容 二、系统总体方案2.1 系统整体设计思路2.2 系统方案设计 …

【入门Flink】- 03Flink部署

集群角色 Flik提交作业和执行任务,需要几个关键组件: 客户端(Client):代码由客户端获取并做转换,之后提交给JobManger JobManager:就是Fink集群里的“管事人”,对作业进行中央调度管理;而它获…

【ES专题】ElasticSearch 高级查询语法Query DSL实战

目录 前言阅读对象阅读导航前置知识数据准备笔记正文一、ES高级查询Query DSL1.1 基本介绍1.2 简单查询之——match-all(匹配所有)1.2.1 返回源数据_source1.2.2 返回指定条数size1.2.3 分页查询from&size1.2.4 指定字段排序sort 1.3 简单查询之——…

服务上千家企业,矩阵通2.0重磅上线,全链路管理新媒体矩阵

自上线以来 矩阵通已服务了上千家企业级客户 覆盖汽车、家居、媒体、金融、教育等多个行业 矩阵通1.0时代 我们以“数据”为基座打造出10功能 帮助企业轻松管理新媒体矩阵 实现账号管理、数据分析、竞对监测、 人员考核、风险监管等需求 而现在 矩阵通2.0重磅上线 新增…

0基础学习PyFlink——个数滑动窗口(Sliding Count Windows)

大纲 滑动(Sliding)和滚动(Tumbling)的区别样例窗口为2,滑动距离为1窗口为3,滑动距离为1窗口为3,滑动距离为2窗口为3,滑动距离为3 完整代码参考资料 在 《0基础学习PyFlink——个数…

使用vscode实现远程开发,并通过内网穿透在公网环境下远程连接

文章目录 前言1、安装OpenSSH2、vscode配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…

学习笔记三十四:Ingress和 Ingress Controller概述

Ingress和 Ingress Controller概述 回顾service四层负载在k8s中为什么要做负载均衡Service不足之处四层负载和七层负载的区别OSI七层模型: Ingress介绍Ingress Controller介绍Ingress-controller 作用Ingress和Ingress Controller总结使用Ingress Controller代理k8s…

设备接入服务组件->微服务and容器化改造说明文档

SVN路径 https://192.0.0.241/USTA-dac/branches/dev/V1.10.500/dac 目录结构 das为设备接入服务,负责驱动管理,资源同步,订阅下发。下面有两个文件夹分别对应了openssl1.0的版本和后面更换接口后openssl1.1的版本。das_proxy为设备信令下发…

家用NAS上的Linux虚拟机上安装Domino

大家好,才是真的好。 此篇不是广告,毕竟没有任何人给广告费。 就是我个人入手了一台NAS设备,一开始用途比较淳朴,仅仅存储和家庭有关的各种照片和视频,但用着用着,就发现了NAS设备的拓展性之强&#xff0…

kubernetes集群编排——k8s存储

configmap 字面值创建 kubectl create configmap my-config --from-literalkey1config1 --from-literalkey2config2kubectl get cmkubectl describe cm my-config 通过文件创建 kubectl create configmap my-config-2 --from-file/etc/resolv.confkubectl describe cm my-confi…