TS代码在Vscode上执行不了

qq_51811922

已于 2023-12-03 17:59:00 修改

阅读量411

点赞数

文章标签：前端

于 2023-12-03 17:57:26 首次发布

原文链接：https://blog.csdn.net/weixin_70245286/article/details/131649398

版权

一.简单介绍ts.

    ts全称TypeScript,他是一门跨平台的编程语言,官网说ts是js的超集合，我觉得就是js的一个加强版，他融合了js的一些优点并加了自己特有的东西，比如接口、泛型等。

        ts是不能直接被浏览器编译的,它会转化成js去编译，所以我们不用担心以前封装的js方法不能使用，依然是可以的，换句话说ts是写给自己看的，

        js是写给浏览器看的。ts在编译完成后终端就会报错，js只有浏览器控制台能看到错误，这也是一个特点吧。ts也是支持node.js环境的。

二.安装ts.

打开cmd小黑框输入npm install -g typescript或者cnpm install -g typescript

输入tsc -V 是否安装成功

三.练习ts，通过代码总结ts和js的区别

ts文件

(()=>{
    // 规定str形参是一个string类型
    function sayHi(str:string) {
        return str + '你好呀！';
    };
    let text = "张杰小朋友";
    console.log(sayHi(text));
})()

html文件

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <script src="./day01.ts"></script>
</body>
 
</html>

打开浏览器运行：报错Refused to execute script fromits MIME type (‘video/vnd.dlna.mpeg-tts’) is not executable.

意思就是浏览器不能直接运行ts类型的脚本

打开vscode终端执行tsc ./day01.ts 对ts进行编译

编译完成后生成一个js文件

然后浏览器运行就正常了

js文件

(function () {
    // 规定str形参是一个string类型
    function sayHi(str) {
        return str + '你好呀！';
    }
    ;
    var text = "张杰小朋友";
    console.log(sayHi(text));
})();

总结：首先浏览器不能直接运行ts文件，只能编译成js才能运行，我们在ts中规定了形参str的类型为string,编译成js后没有类型，还有在ts中我们用let声明变量，编译成js后变成了var。

四.vscode自动编译ts=>js

1.首先通过 tsc --init生成tsconfig.json文件其次配置两个配置项

“outDir”: “./js”, /* 将ts编译成js放到js文件中 /
“strict”: false, / 不使用严格模式 */

2.然后打开对应文件vscode上面：终端=>运行任务=>显示所有任务=>监听tsc

3.在对应文件下新建一个ts文件他会自动生成一个js文件（编译生成的），然后创建一个html直接引入咱们的js文件就可以运行了。

五.ts的类型注解.
类型注解是指我们在使用类型时可以放置在任何位置的注解。在TypeScript中，使用类型注解并非强制性要求。它有助于编译器检查变量的类型，并避免处理数据类型时出现错误。

1.列子

ts文件

(()=>{
    // 规定str形参是一个string类型
    function sayHi(str:string) {
        return str + '你好呀！';
    };
    // let text = "张杰小朋友";
    let text =[10,20];
    console.log(sayHi(text));
})()

编译时报错：Argument of type ‘number[]’ is not assignable to parameter of type ‘string’.意思就是这个number[]不能作为函数的实参

js文件

(() => {
    // 规定str形参是一个string类型
    function sayHi(str) {
        return str + '你好呀！';
    }
    ;
    // let text = "张杰小朋友";
    let text = [10, 20];
    console.log(sayHi(text));
})();

为什么还能正常编译成js呢，因为js是弱类型语言，js=ts:any.

浏览器还能正常输出，但是在真正开发中它还是个bug , 这也形成了ts比js更严谨，开发过程中可以在控制在直接看到错误，一般ts类型错了直接会提示。

六.ts的接口

接口简单的可以理解为类型注解的集合，他可以同时定义几个变量的类型

代码演示

(() => {
    // 定义一个接口
    interface Iperson{
        firstname : String,
        lastname : String,
        age:Number
    }
    function show(person:Iperson){
        return  person.firstname+""+person.lastname+""+person.age;
    }
    // 定义一个对象
    const person ={
        firstname:"zhang",
        lastname:"jie",
        age:18
    }
    console.log(show(person));
    
})();

七.ts的类

ts的类其实和js基本完全一样，看一下代码就懂了

ts文件

(() => {
    // 定义一个接口
    interface IPerson{
        firstname : String,
        lastname : String,
    }
    // 定义一个类型
    class Person {
        // 定义公共的字段(属性)
        firstname: String
        lastname:String
        fullname:String
        // 定义一个构造器函数
        constructor(firstname:String,lastname:String){
            this.firstname = firstname;
            this.lastname = lastname;
            this.fullname = this.firstname + "" + this.lastname;
        }
    }
    // 定义一个函数
    function show(person:IPerson){
        return person.firstname + "" +person.lastname
    }
    // 实例化对象
    const person = new Person('诸葛',"村妇");
    console.log(show(person));
})();

编译后的js文件

(() => {
    // 定义一个类型
    class Person {
        // 定义一个构造器函数
        constructor(firstname, lastname) {
            this.firstname = firstname;
            this.lastname = lastname;
            this.fullname = this.firstname + "" + this.lastname;
        }
    }
    // 定义一个函数
    function show(person) {
        return person.firstname + "" + person.lastname;
    }
    // 实例化对象
    const person = new Person('诸葛', "村妇");
    console.log(show(person));
})();