Typescript 基础易理解-------冲冲冲

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/124324542

什么是Typescript?

JavaScript和TypeScript的区别？

什么是Typescript?

TypeScript是一个强类型的JavaScript超集，可编译为纯JavaScript。它是一种用于应用级JavaScript开发的语言。（c#、Java就是强类型语言)

TypeScript可以在任何浏览器、主机和操作系统上执行。TypeScript不是直接在浏览器上运行的。它需要一个编译器来编译和生成JavaScript文件。TypeScript是带有一些附加特性的ES6 JavaScript版本。

JavaScript和TypeScript的区别？

编号	JavaScript	TypeScript
1	它是由网景公司在1995年开发的。	它是2012年由安德斯·海尔斯伯格(Anders Hejlsberg)开发的。
2	JavaScript源文件在”.js”扩展。	TypeScript源文件是”.ts”扩展名。
3	它不支持强类型或静态类型。	它支持强类型或静态类型特性。
4	它只是一种脚本语言。	它支持面向对象的编程概念，如类、接口、继承、泛型等。
5	JavaScript没有可选的参数特性。	TypeScript有可选的参数特性。
6	它是解释语言，这就是为什么它在运行时突出显示错误。	它编译代码并在开发期间突出显示错误。
7	JavaScript不支持模块。	TypeScript支持模块。
8	在这里，number和string是对象。	在这里，number和string是接口。
9	JavaScript不支持泛型。	TypeScript支持泛型。

TS的安装使用

安装命令：npm install -g typescript

demo👇 ：

终端输入命令：tsc ts文件名回车编译成js

终端再输入命令：node js文件名就可以编译运行啦

自定义接口方式定义XianNv类型，再定义一个变量(XY)是XianNv这个类型。

命令：npm install -g ts-node 可替代tsc 和node两步骤

TS内置数据类型（原始数据类型）

类的使用

interface Stu {
  name: string;
  age: number;
  isGradute: boolean;
  sex?: string; //?: 意思是可选值
  say(): string;
}

class DaYe implements Stu {
  name = "凤凰火";
  age = 999;
  isGradute = true;
  say() {
    return "我是凤凰火";
  }
}
const ddd = new DaYe();
console.log(ddd.say());

const stu = {
  name: "XY",
  age: 22,
  isGradute: true,
  boolean: true,
  say() {
    return "希望我们都能平安健康！";
  },
};

const getGradute = (stu: Stu) => {
  stu.age <= 24 && stu.isGradute == true && console.log(stu.name + "顺利毕业");
  stu.age > 24 &&
    stu.isGradute == true &&
    console.log(stu.name + "还是顺利毕业");
  console.log(stu.say());
};
getGradute(stu);

class Person {
  content = "我是个人";
  sayHello() {
    return this.content;
  }
}
const baby = new Person();
console.log(baby.sayHello());

class Gost extends Person {
  sayHello() {
    // 继承父类里的方法，super
    return super.sayHello() + "哈哈哈哈";
  }
  sayAh() {
    return "我是鬼~";
  }
}
const aaa = new Gost();
console.log(aaa.sayAh());
console.log(aaa.sayHello());

终端输入命令：tsc -init 可生成ts配置文件tsconfig.json

enum枚举

泛型

//在函数中使用泛型
function join<XY>(first: XY, second: XY) {
  return `${first}${second}`;
}
console.log(join<string>("XY", "帅！"));

//泛型中数组的使用
function myArray<ANY>(params: Array<ANY>) {
  return params;
}
console.log(myArray<String>(["666", "999"]));

//工作中泛型很多是用<T>来表示
function myWork<T>(params: Array<T>) {
  return params;
}
console.log(myArray<String>(["123", "456"]));

//多个泛型一起使用
function many<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
console.log(many<string, number>("XY", 666));