• TypeScript入门一:配置TS工作环境


    • 配置手动编译TS文件工作环境
    • 配置webpack自动化打包编译工作环境(后面补充)

     一、TypeScript入门学习引言

    进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记,可能不会太深入的解读一些原理方面的东西。但尽可能的把基础的入门使用解析清楚,毕竟使用TypeScript来实现的项目一般是比较复杂的项目,不仅仅只是简单的语法使用,而是它带来的特性所解决的问题才更值得我们关注,所以在这个系列之后还会有更深入的工程应用方面的博客,也希望大家能给我提供一些意见和思路。

    引用阮大佬博客中这样一段描述:JavaScript 是一种弱类型(或称动态类型)语言,即变量的类型是不确定的。TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行。 它的最大特点就是支持强类型和 ES6 Class

    支持强类型,这可能会颠覆你对JavaScript这门语言的认知,但这也是JavaScript在面对日益复杂的项目的机遇,至于为什么这么说请等到后期的工程应用方面的博客吧。TypeScript不一定成为每一个项目中的必需品,但是当你需要它的时候你就会知道它的价值。

    阮大佬的相关博客:强类型 JavaScript 的解决方案

    官网相关重要资料(中文官网首页有直接下载文档的连接):TypeScript语言规范(github连接)

     二、配置手动编译TS文件工作环境

    第一步:安装nodejs环境;

    第二部:安装TypeScript插件: npm install -g typescript 

    创建一个工作区间:

    TS_App//文件夹
        index.html
        index.ts

    然后将下面这段TS代码拷贝到index.ts中:

     1 class Greeter {
     2     greeting: string;
     3     constructor(message: string) {
     4         this.greeting = message;
     5     }
     6     greet() {
     7         return "Hello, " + this.greeting;
     8     }
     9 }
    10 
    11 let greeter = new Greeter("world");
    12 
    13 let button = document.createElement('button');
    14 button.textContent = "Say Hello";
    15 button.onclick = function() {
    16     alert(greeter.greet());
    17 }
    18 
    19 document.body.appendChild(button);

    然后在控制台使用tsc命令将index.ts换行成一个js文件

    tsc index.ts

    编译完成后会在当前区间生成一个index.js文件,这时候你可以使用index.html引入这个生成的index.js查看效果。

    这里介绍使用一个VS Code编辑器插件:live server

    安装这个插件以后可以直接右键html文件界面点击右键(选择):Open with Live Server,这时候可以使用一个自动服务在浏览器打开这个html页面,并且可以动态监听这个页面最新的状态,当页面或者js文件发生改变时会自动刷新页面,这样就不需要每次通过tsc编译完js还要手动刷新页面。

    第三步:编译全部ts文件

    tsc --init //生成tsconfig.json文件
    tsc         //tsc直接可以将全部ts文件转换成js文件了

    在VS Code中使用TypeScript Auto Compiler插件自动编译ts文件,生成js文件。这个插件需要tsconfig.json文件的配合,通过tsc --init命令将当前目录下的ts文件相关编译描述设定,只要其中一个ts文件发生更改就可以实现被tsconfig.json监控的文件全部编译刷新。

    在tsconfig.json文件中可以通过target字段,设置编译的js文件代码符合ES5、ES2015、ES2016...等版本的语法;还可以通过module字段,设置不同的模块化规范,比如commonjs、none、amd、system、umd、es2015、ESNext;还有strict字段可以设置js代码是否为严格模式;esModuleInterop则控制是否允许es2015模块与commonjs某块相互导入的互操作。

  • 相关阅读:
    CSU-ACM集训-模板-主席树
    Codeforces- Educational Codeforces Round 69
    Codeforces-Round#574 Div2
    CF-1183C Computer Game
    CSU-ACM2019暑假训练(2)
    CSU-ACM2019暑假集训(1)
    2019牛客网第二场-F题
    洛谷P1111 修复公路
    求强连通分量-korasaju算法
    并查集-路径优化+秩优化
  • 原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/11753541.html
Copyright © 2020-2023  润新知