开始使用 TypeScript

时间 2019-11-10

标签开始使用 typescript 繁體版

原文原文链接

简介

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

安装TypeScript的支持

1.首先安装 npm 工具 web

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

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

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

使用开发工具

使用开发工具,能够大大的提升开发速度. 这里推荐的开发工具是微软的 visual studio codejson

固然你也能够使用 Atom 或者 WebStrom 若是你高兴 Eclipse 也能够架构

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

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

新建工程

能够在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 看到以下表示成功了!

完成

1. 翻译 | 开始使用 TypeScript 和 React
2. 【译】2019年开始使用Typescript
3. 开始使用 mxGraph
4. typescript-开始动手敲
5. 开始使用 VSCode 调试
6. 使用TypeScript开发程序
7. 使用 typescript 开发 Vue
8. 【译】使用 React，TypeScript 和 Webpack 开始一个项目
9. 开始使用GraphQL
10. 开始使用Filebeat
更多相关文章...
• TortoiseSVN 使用教程 - SVN 教程
• Docker 容器使用 - Docker教程
• Composer 安装与使用
• PHP开发工具