文档章节

开始使用 TypeScript

施立
 施立
发布于 2017/11/02 15:49
字数 745
阅读 463
收藏 8

简介

TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发。
TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性。
TypeScript 支持为已存在的 JavaScript 库添加类型信息的头文件,扩展了它对于流行的库如 jQuery,MongoDB,Node.js 和 D3.js 的好处。

安装TypeScript的支持

1.首先安装 npm 工具 

参见另外一篇博文 https://my.oschina.net/u/659068/blog/1559410

2.  使用命令行 npm install -g typescript 进行安装

3. tsc -v 来验证是否安装成功 

使用开发工具

使用开发工具,可以大大的提高开发速度. 这里推荐的开发工具是微软的  visual studio code

当然你也可以使用 Atom 或者 WebStrom 如果你高兴 Eclipse 也可以

Visual Studio Code (简称 VS Code / VSC) 是一款免费开源的现代化轻量级代码编辑器,支持几乎所有主流的开发语言的语法高亮、智能代码补全、自定义热键、括号匹配、代码片段、代码对比 Diff、GIT 等特性,支持插件扩展,并针对网页开发和云端应用开发做了优化。软件跨平台支持 Win、Mac 以及 Linux,运行流畅,可谓是微软的良心之作……

访问 https://code.visualstudio.com/ 官方网站进行下载即可

新建工程

可以在VSC中 直接打开一个文件夹, 也可以使用CMD命令行建立一个文件夹

在这里我新建了一个ts-project的文件夹并使用VSC打开它

然后建立 在工程根目录 建立 build 和 app 文件夹

 

在命令行 或者终端中输入 tsc --init 就会自动生成一个tsconfig.json 文件

然后修改代码如下

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
    "module": "system",                     /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    "sourceMap": true,                     /* Generates corresponding '.map' file. */
    "outFile": "./build/js/hello.js"
  }
}

在app文件夹下新建 func.ts 代码如下

namespace com.avicsafety.webapp{
    export class TestFunction{
        createHelloDiv(name: string):HTMLDivElement {
            let div:HTMLDivElement = document.createElement('div');
            div.textContent = name + " = Hello TypeScript";
            return div;
        }
    }
}

在app文件夹下新建 hello.ts 代码如下

/// <reference path="func.ts" />
let div = new com.avicsafety.webapp.TestFunction().createHelloDiv("shili === ")
document.querySelector("#app").appendChild(div);

在bulid文件夹中建立 index.html

<html lang="zh-cn"> 
    <head> 
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 
        <title>Hello world</title> 
    </head> 
    <body> 
        <div id="app"></div> 
        <script src="js/hello.js"></script> 
    </body> 
</html>

最后在命令行终端 输入 tsc 回车  编译器会自动根据 tsconfig.json 的内容进行编译 

最终完整的的目录结构如下

最后我们打开 index.html 看到如下 表示成功了!

 

完成

© 著作权归作者所有

共有 人打赏支持
施立
粉丝 13
博文 22
码字总数 7480
作品 0
沈阳
架构师
私信 提问
加载中

评论(3)

vikon
vikon
文字太小
l
lzhui

引用来自“OSC_qbBaio”的评论

什么鬼
用面向对象的方式,来写代码,然后编译成js
OSC_qbBaio
OSC_qbBaio
什么鬼
TypeScript系列1-简介及版本新特性

简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学...

一配
2015/08/15
0
0
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进 步的地方 包括:加入注释...

彭博
2012/11/27
948
0
TypeScript 入门指南

你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括:加入注释,...

红薯
2012/10/07
64.6K
35
TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript

Anders Hejlsberg: Introducing TypeScript https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript TypeScript 是 JavaScript 的超集,TypeScript结合了类型检查和静态分......

程序员诗人
2017/11/16
0
0
此生无悔入 TypeScript

↑ 编者按:本文由phodal公众号授权奇舞周刊转载。 想来,我已经用 TypeScript 已经有一段时间了,它可以算得上是前端领域的一门 “平淡生活” 的语言。 平淡生活,我的意思是:生活可以从此...

奇舞周刊
04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

开源软件会被云杀死吗 ?

本文转载云头条,原作者:Michael Stiefel是Reliable Software公司的负责人,是一名软件架构和开发顾问。 文章要点 虽然开源开发不会消失,但商业开源厂商的未来不是很有希望。随着全面管理的...

linuxCool
36分钟前
2
0
OSChina 周三乱弹 —— 谈什么对象?睡什么觉?

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @胖达panda :最肯忘却古人诗,最不屑一顾是相思。分享童丽的单曲《红豆生南国》: 《红豆生南国》- 童丽 手机党少年们想听歌,请使劲儿戳(这...

小小编辑
40分钟前
185
5
stylus

stylus基础教程,stylus实例教程,stylus语法总结

miaojiangmin
今天
5
0
PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部