[译] TypeScript入门指南(JavaScript的超集)

   2023-02-09 学习力0
核心提示:你是否听过 TypeScript?TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口。TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的。 为什么会有 TypeScript?JavaScript 只是一个脚本语言,并非真正设计用于开发

[译] TypeScript入门指南(JavaScript的超集)

你是否听过 TypeScript?

TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分析,显式接口。TypeScript是微软的开源项目,它是由C#之父Anders Hejlsberg发起的。

 

为什么会有 TypeScript?

JavaScript 只是一个脚本语言,并非真正设计用于开发大型 Web 应用,JavaScript 没有提供类和模块等概念,对于一个真正的应用开发,TypeScript 扩展JavaScript 并实现了这些特性。TypeScript 主要特点包括:

  • TypeScript 是微软推出的开源语言,使用 Apache 授权协议
  • TypeScript 是 JavaScript 的超集. 
  • TypeScript 增加了可选类型、类和模块
  • TypeScript 可以编译成可读的、标准的 JavaScript
  • TypeScript 支持开发大规模 JavaScript 应用,支持所有浏览器,主机和操作系统
  • TypeScript 设计用于开发大型应用,并保证编译后的 JavaScript 代码兼容性
  • TypeScript 扩展了 JavaScript 的语法,因此已有的 JavaScript 代码可直接与 TypeScript 一起运行无需更改
  • TypeScript 文件扩展名是 ts,而 TypeScript 编译器会编译成 js 文件
  • TypeScript 语法与 JScript .NET 相同
  • TypeScript 非常易学和易于理解

语言特性

  • 接口
  • 模块
  • 类型注解
  • 编译时类型检查
  • Arrow 函数 (类似 C# 的 Lambda 表达式)

 

JavaScript 与 TypeScript 的区别

 

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码无需做任何修改便可与TypeScript一起使用,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

 

支持的编辑器

现如今,Visual Studio 2012 支持 TypeScript 模块/语法高亮,但需要安装 TypeScript 插件。而类似 Sublime Text, Vim and Emacs 编辑器支持语法高亮。

在 VS 2012 编辑器中,还提供了重构(Refactor)和 转到定义(Go To Definition)等功能。

[译] TypeScript入门指南(JavaScript的超集)

 

Note: TypeScipt不依赖任何 IDE,你可以在任何应用中将 TypeScript 编译成 JavaScript。

如何获取

你可以通过以下两个方法来安装 TypeScript:

Note: 请关闭其他应用程序来避免安装时的一些问题。

下面是通过 MSI 文件安装时的界面:

 

[译] TypeScript入门指南(JavaScript的超集)

如果你只是想先看看 TypeScript 而已,可 click here.  

如何编译 TypeScript   

要在应用中使用 TypeScript 必须先编译,编译的结果是生成 js 文件,你可通过 TypeScript 编译器 tsc 来完成这个过程。

如果你在 Visual Studio 2012 中使用 TypeScript,它会自动将 ts 文件编译成 js 文件。

TypeScript 编译器模板被安装在如下路径:

C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0  

C:\Program Files\Microsoft SDKs\TypeScript\0.8.0.0 

要编译 TypeScript 文件,可使用如下命令:

tsc filename.ts

一旦编译成功,就会在相同目录下生成一个同名 js 文件,你也可以通过命令参数来修改默认的输出名称。

如果你希望 TypeScript 被自动编译,你可以了解下 Sholo.TypeScript.Build , Web Essentials 2012.  

TypeScript 项目/文件 模板

如果你在 Visual Studio 2012 上安装了插件,你会看到如下模板:

[译] TypeScript入门指南(JavaScript的超集)

MVC – TypeScript Internet Application

[译] TypeScript入门指南(JavaScript的超集)

TypeScript File

[译] TypeScript入门指南(JavaScript的超集)

 

 

我的第一个用 TypeScript 编写的 HTML 应用

现在我开始用 TypeScript 创建一个简单的 HTML 应用。

首先通过 File -> New-Project 新建项目:

[译] TypeScript入门指南(JavaScript的超集)

点击 Ok 按钮,创建后项目模板如下:

[译] TypeScript入门指南(JavaScript的超集)

 

我们将看到 app.js 依赖于 app.ts,默认的 app.ts 文件包含类和构造函数等等,如下图:

[译] TypeScript入门指南(JavaScript的超集)

 

TypeScript 文件将会被编译为 JavaScript (app.js),下面是编译后的 JavaScript 代码:

[译] TypeScript入门指南(JavaScript的超集)

然后我们可以在页面中引用 JavaScript

[译] TypeScript入门指南(JavaScript的超集)

当你构建或者重新构建项目时,你将看到提示是否重新编译 TypeScript 的信息:

[译] TypeScript入门指南(JavaScript的超集)

如果在 .??proj 文件中有如下内容将会被自动编译:

[译] TypeScript入门指南(JavaScript的超集)

当你运行此应用时会在页面上显示当前的日期和时间

[译] TypeScript入门指南(JavaScript的超集)

你也可以在线Try一下:Playground 

[译] TypeScript入门指南(JavaScript的超集)

 

更多阅读资料    

 

 

总结  

这篇文章中我们简单的介绍了如何使用 TypeScript,希望你能喜欢或者觉得对你有帮助。

英文原文

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 项目中使用TypeScript的TodoList实例详解
    项目中使用TypeScript的TodoList实例详解
    目录为什么用todolisttodolist的ts化数据到视图实现handleTodoItemreadonly分类交叉类型新增功能联合类型可选属性数据转视图总结为什么用todolist现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、遍历、条件
    03-16
  • React之 hook / class 结合typescript笔记
    React之 hook / class 结合typescript笔记
    使用 create-react-app 开启 TypeScriptCreate React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行 npx create-react-app my-app
    03-08
  • Angular基础(三) TypeScript
    Angular基础(三) TypeScript
       一、模仿Reddita) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为:界面可以看到了:b) 对于界面输入的数据,获取的方式有点特别,使用了#newlink这样的语法,newlink是一个对象,现在代表就是所在的inp
    03-08
  • electron教程(番外篇二): 使用TypeScript版本的
    electron教程(一): electron的安装和项目的创建electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLintelectron
    03-08
  • 使用 ESModule 和 TypeScript 构建 Node.js 环境
    使用 ESModule 和 TypeScript 构建 Node.js 环
    介绍由于我经常使用 React,所以我在前端接触过 Node.js,但我从未接触过后端。正常搭建环境的时候,不能使用import语句,变成了require语句,很不方便。我认为有各种各样的错误,所以如果你能指出它们,我将不胜感激。执行环境macOS 蒙特雷 ver12.5.1MacBook
    03-08
  • [个人发展] 我做了一个可以永远谈论任何事情的女士对话AI(TypeScript,Python)
    [个人发展] 我做了一个可以永远谈论任何事情的
    在个人发展中对话式人工智能服务 Eveki我做了虚构角色1这是一项以人工智能为特色的服务,可以再现并享受自然对话。这一次,作为第一个艾小姐发表了。请先尝试实物。服务概览与人工智能对话基本上只需输入您的信息是。对话是用女士的语言进行的,就像人类一样
    03-08
  • 使用 Node.js (TypeScript) 和 Azure Functions 创建无服务器 REST API,并获得 CosmosDB 更改源作为奖励。
    使用 Node.js (TypeScript) 和 Azure Functions
    介绍在本文中,我们将使用 azure 函数和 ComsmosDB 创建一个无服务器 REST API 应用程序。使用的语言是 Node.js/TypeScript。此外,由于我们使用 CosmosDB 作为数据库,因此我们将使用 Azure 函数触发器接收 Change Feed 事件作为奖励。创建资源创建资源组az
    03-08
  • 安装 TypeScript 并编译成JS
    安装 TypeScript 并编译成JS
    官网: https://github.com/microsoft/TypeScriptTypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。TypeScript是一种应用级JavaScript语言。TypeScript为JavaScript添加了可选类型,支持针对任何浏
    03-08
  • 使用TypeScript,AngularJs和Web API构建基本的C
    原文地址:using typescript with angularjs and web api 版权归其作者所有.在这篇文章中我将向大家展示如何使用TypeScript,Angular Js 和Asp.net Web API 来构建一个基本的实现CRUD功能的Web应用程序. Typescript提供了一系列的功能来方便程序员构造和组织更
    02-10
  • Typescript 中类的继承
    Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读。用Typescript写较大项目时是非常有优势的。/** * BaseClass */class BaseClass {constructor(name:string,age:number) {this.name=name;this.age=age;}name:s
    02-09
点击排行