浏览器中间接运行typescript，并实现实时刷新（vscode）

Posted 2023-04-08

参考技术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！(: