浏览器中间接运行typescript,并实现实时刷新(vscode)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浏览器中间接运行typescript,并实现实时刷新(vscode)相关的知识,希望对你有一定的参考价值。

参考技术A

live server
vscode插件,实现html文件的实时刷新,只要我们保存了文件,live server就会刷新页面
扩展>搜索>安装即可
在html文件中右键,点击“open with live server”

typescript
大家都知道,不论是node还是浏览器都是无法运行ts文件的,需要手动的将ts文件转换成js文件,这就需要一个转换的包了:typerscript,建议全局安装

编译ts文件
右键侧边栏的ts文件,点击打开终端

然后终端就会进入ts的检测模式了

现在再修改ts文件,一保存,就会自动重新编译,ts文件发生变化,生成的js文件相应发生变化,live server发现了变化,浏览器也会随之变化,这样形成了实时刷新
结束终端的命令是:CTRL+ c,光标要先点一下控台,不然没用,一次ctrl+c不行,就多摁几遍
你, 学废了吗

Typescript学习记录

Typescript学习记录

typescript是什么?

  1. javascript的超集。
  2. 遵循ES6语法,已经实现了大部分的ES6语法。
  3. 实现了基于面向对象的特性
  4. typescript的运行需要编译器,编译成js语法才能运行在浏览器
  5. 可以使用在线的compiler进行实时编译,在实际使用中需要使用tsc编译器

一些ES6常用语法和typescript语法

  1. 对字符串操作
  • es5-字符串拼接-使用+的形式进行拼接
var string = "hello"+
"markdown"
  • es6-字符串拼接-使用``即可完成,并且可以在字符串中添加表达式即字符串模板
 var string = `hello
 markdown`
var str = ",very good"
var fun = function(){return "javascript"}
var string = `hello
 markdown ${str},${fun()}`
  • es6的字符串拆分-根据传入的变量分割字符串
function test(template,arg1,arg2){
console.log("template")
console.log("arg1");
console.log("arg2");
}
var age1 = "a1"
var age1 = "a2"
test`hello,I like it${age1},dislike ${age2}`

答应出来的结果会是一个数组和2字符串,数组是被拆分的“hello,I like it”,“dislike“。

typescript是一种强类型的语言所以可以定义变量的类型

  • ts有一种类型推断机制可以根据上一次使用的情况推断出类型
 var name: string = "zheng dong";
 var age = 13;
age = true;

上面的age=true会报错,因为age根据第一次使用的情况推断出了它是属于number型的。

  • 函数中也可以使用类型
function test() : void{
    return "I love cl";
}
test()

上面的函数会报错,因为他的返回值定义的类型是void

  • 自定义类型
 class Person{
    name:string;
    age:number;
}
var zhengdong: Person = new Person();
zhengdong.name = "zhengdong";
  • 参数默认值和可选参数
function test(a: stirng,b?: string,c: string = "zhengdong"){    
}
test("xxx")

上面代码中第二个参数使用了?的方式实现了参数可选传不传入

  • 传入任意数量的参数-使用...的方式
    function test(...arg){
        arg.forEach(function(arg){
            console.log(arg);
        })   
    }
    test(1,2,3,4,5,6,7,8,9,10)
  • 析构函数-方便的快速初始化值
    function getStock(){
        return {
            code:"IBM",
            price:{
                price1: 200,
                price2: 400
            }
        }
    }
    var { code: codex,price:{price1,price2} } = getStock();
    console.log(codex);console.log(price1);
  • 箭头表达式
    var sum  = (arg1,age2)=>arg1+arg2

其实箭头表达式就是一个匿名的回调函数。如果参数只有一个可以省略括号**(),如果函数体多行就要加上花括号{}**并且加上return

var sum  = arg1=>{
return arg1+arg2;
}

其中箭头表达式更重要是地方是修复了ES5中this指正指向的问题

    function getStock(name:string){
        this.name = name;
        setInterval(function(){
            console.log(this.name);
        },1000)
    }

上面的打印是undefind的。因ES5中的this指针是指向调用者,所以当前this指向了setInterval,下面使用ES6的箭头函数可以修复这个问题

    function getStock(name:string){
        this.name = name;
        setInterval(=>{
            console.log(this.name);
        },1000)
    }
  • es6新增加的for of循环 对比一下forEach
    var test = [1,2,3,4,5];
    test.no = "l love cl";
    test.forEach(v=>console.log(v))

上面会输出数组的内容省去了属性,并且在循环当中break不了循环

在来看看for in循环

var test = [1,2,3,4,5];
for(var i in test){
    console.log(i);
}

上面循环出来的是数组的key并不是他的值,并且会把属性也打印出来并且能使用break。

来看看es6的循环for of

var test = “l love cl”;
test.no = "no"
for(var v of test){
    console.log(v);
}

上面的例子中会将test的字符串打印出来并且是逐个的遍历。使用for of可以break并且循环的就是数组的值并不是key,也不会循环test的属性

  • typescirpt作为一个javascript的超集并且是强类型面向对象的,当然有类的概念。下面来写一个person类吧
    var Person{
        construtor(public name:string){
            
        }
        eat(){
            console.log(this.name);
        }
    }
    var p1 = new Person("zhengdong");
    p1.eat();
    var p2 = new Person("dongzheng");
    p2.eat();

上面实现了一个类并且在类的外面实例化了2个对象。

来实现ts中的继承

    var Person{
        construtor(public name:string){
          
        }
        eat(){
            console.log(this.name);
        }
    }

 class Employee extend Person{
    construtor(public name:string,code:string){
          super(name);
        }
    work(){
        super.eat();
    }
}

上面的Employee继承了Person类,在构造函数里面使用了super,这个方法是调用父类的构造函数这是ts中必须规定的,然后在work方法中调用父类的eat方法也是使用super.ea()的方式

  • 泛型,一般拿来限制集合的内容
var workers: Arrar<Person>= [];
workers[0] = new Person(“zhengdong”);
workers[1] = 2;

workers[1]会报错因为我们在类型规定的时候就写了类型Array数组里面的内容是Person的。

  • 接口interface
    interface Animal{
        eat();
    }
class Sheep implements Animal{
    eat(){
        console.log("i eat");
    }
}

使用interface定义一个接口,使用implements继承一个接口,接口也可以用来定义一个参数或者属性可以使用var v:Animal的方式实现可以不写implements

  • 如何在ts中使用原有js文件,例如Jquery 这里我们使用到一个ts的**类型定义文件(*.d.ts)**它其实就是一个模块

大家可以到这个仓库里面寻找现有的d.ts文件https://github.com/DefinitelyTyped/DefinitelyTyped

如果觉得找的很麻烦可以使用它的管理工具https://github.com/typings/typings这个仓库有使用说明

Thank you for your watch!(:

以上是关于浏览器中间接运行typescript,并实现实时刷新(vscode)的主要内容,如果未能解决你的问题,请参考以下文章

Typescript学习记录

如何在命令行中直接运行 node / babel 脚本?

TypeScript 封装并发布一个库

C# 在EF中直接运行SQL命令

全局变量与局部变量解释,以下代码可直接复制到编译器中直接运行。

在eclipse中直接运行servlet 如何配置tomcat