Vue3-03 快速认识TypeScript

问题1：什么是TypeScript

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集。TypeScript添加了静态类型检查功能，并且可以编译为纯JavaScript代码，使得开发者可以利用JavaScript的生态系统和工具。TypeScript的主要目标是增强JavaScript的可读性和可维护性，特别是在大型应用程序的开发过程中。

主要特点包括：

1. 静态类型：TypeScript引入了静态类型系统，开发者可以为变量、函数参数、返回值等添加类型注解，编译器可以检查这些类型的正确性。

2. ECMAScript标准支持：TypeScript支持最新的ECMAScript标准（例如ES6、ES7等），并且提供了额外的功能和语法糖。

3. 工具支持：TypeScript集成了强大的开发工具支持，如代码补全、静态错误检查、重构等，这些功能使得大型项目的开发更加高效和安全。

4. 跨平台：TypeScript可以编译为任何浏览器、操作系统和设备上运行的JavaScript，因此非常灵活。

总之，TypeScript通过引入静态类型检查和其他语言特性，提供了更强大、更可维护的JavaScript开发体验，尤其适用于大型和复杂的应用程序开发。

个人理解：Web万物皆三样东西HTML、CSS、JS，TS是JS的基础上利用Node，编译成JS，规范开发者语法规则使用

问题2：如何安装TypeScript

步骤1：使用npm安装typescript

npm安装方法一个项目学习Vue3---NVM和NPM安装-CSDN博客

npm install -g typescript

步骤2：创建第一个ts项目HelloTs.ts

在编辑器，将下面的代码输入到HelloTs.ts文件里：

function helloTs(text) {
    return "Hello, " + text;
}
​
let text = "TS";
​
document.body.innerHTML = helloTs(text);

步骤3：编译代码

tsc HelloTs.ts

同目录下面输出了一个JS文件，里面的内容和HelloTs.ts文件里面一毛一样，为什么呢？因为上面那个HelloTs.ts文件中的代码我是完全按照JS风格写的

js里面的内容

问题3：TS的类型是个啥

js中var可以定义一个全局变量 let可以定义一个局部变量，而TS在此基础上引入了基本数据类型，例如string、number等，下面是基本数据类型的定义

//布尔型
//表示逻辑值，可以是 true 或 false。
let isDone: boolean = false;
//数字类型
//表示整数或浮点数，与JavaScript中的 number 类型类似
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
//字符串型
//表示文本数据，可以使用单引号或双引号。
let color: string = "blue";
let fullName: string = `Bob Bobbington`;
//数组类型
//表示一个存储元素的数组，元素类型可以是任何类型。
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // 使用数组泛型定义
//元组类型
//表示元素数量和类型的固定数组，各元素的类型不必相同。
let x: [string, number];
x = ["hello", 10]; // 合法
x = [10, "hello"]; // 错误，顺序必须匹配
//枚举类型
//表示一组命名的常数，默认情况下从0开始递增编号。
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
//任意类型
//表示任意类型的值，可以绕过编译时类型检查，类似于普通的JavaScript变量。
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;
//空类型
//表示没有任何类型，通常用于函数没有返回值的情况。
function warnUser(): void {
    console.log("This is a warning message");
}
//Null 和 Undefined:
//TypeScript里，null 和 undefined 分别有自己的类型，可以赋值给其他类型（但是，--strictNullChecks 标记可以让 null 和 undefined 只能赋值给 void 和它们各自）。
let u: undefined = undefined;
let n: null = null;
//Never类型
//表示那些永不存在的值的类型。例如，抛出异常或无限循环的函数表达式的返回类型，或者总是会抛出异常的箭头函数表达式的返回类型。
function error(message: string): never {
    throw new Error(message);
}
​
function infiniteLoop(): never {
    while (true) {
    }
}
​

此时若你输入以下编码进行编译，则会报错Argument of type 'number[]' is not assignable to parameter of type 'string'.

function helloTs(text : string) {
    return "Hello, " + text;
}
​
let text = [1,3,4,5];
​
document.body.innerHTML = helloTs(text);

问题4：TS的接口是个啥

TS中的接口和JAVA后端代码中的接口类似，是一种规范

interface User {
    firstName: string;
    lastName: string;
    //:string 表示返回值为string类型
    say(name: string) :string;
}
let user:User = {
    firstName:"张三",
    lastName:"李四",
    say(name: string) :string{
        return `Hello, ${name}!`;        
    }
}
function greeter(user: User) :string{
    return user.say(user.firstName)
}
​
document.body.innerHTML = greeter(user);

编译后的代码为：

var user = {
    firstName: "张三",
    lastName: "李四",
    say: function (name) {
        return "Hello, ".concat(name, "!");
    }
};
function greeter(user) {
    return user.say(user.firstName);
}
document.body.innerHTML = greeter(user);

TS中使用:来表示继承的User实体，但是你也可以不用非得和java一样写implements去继承原来的接口

interface User {
    firstName: string;
    lastName: string;
    say(name: string) :string;
}
//此处User不写效果是一样的
let user = {
    firstName:"张三",
    lastName:"李四",
    say(name: string) :string{
        return `Hello, ${name}!`;        
    }
}
function greeter(user: User) :string{
    return user.say(user.firstName)
}
​
document.body.innerHTML = greeter(user);

问题5：TS的类是个啥

TS中的类和JS中的类大体是一直的，他并没有明显的区别，不过好多只用JS的小伙伴再不写Vue等项目时，基本用不到这玩意

class Animal {
    name: string;
    //构造器
    constructor(name: string) {
        this.name = name;
    }
​
    move(distance: number) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}
​
let animal = new Animal("老虎");

问题6：看了这么多就是不会写TS咋办

没关系，你可以熟练的使用你熟悉的js写，反正ts是js的超集，一样运行，废话连篇。。。

关注公众号：资小库，问题快速答疑解惑