TypeScript

置顶向远方~

已于 2023-02-02 08:58:55 修改

阅读量347

点赞数

文章标签： typescript 前端

于 2022-12-17 10:12:46 首次发布

本文链接：https://blog.csdn.net/weixin_60311760/article/details/128350418

版权

本文是TypeScript的全面讲解，从安装TypeScript开始，逐步介绍如何构建和运行你的第一个TypeScript文件，然后深入到Web应用的开发。接着，文章详细阐述了接口的概念，包括接口的继承，以及单继承和多继承。此外，还讨论了类的使用和继承，并探讨了TS中的泛型，解释了其作用和用法，包括在函数、接口和类中如何使用泛型。

摘要由CSDN通过智能技术生成

TypeScript全面讲解

安装TypeScript

npm install -g typescript

构建你的第一个TypeScript文件

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

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.innerHTML = greeter(user);

编译代码
在命令行上，运行TypeScript编译器：

tsc app.ts

输出结果为一个app.js文件，它包含了和输入文件中相同的JavsScript代码。一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！

运行TypeScript Web应用

创建app.html文件，在app.html里输入如下内容：

<!DOCTYPE html>
<html>
    <head><title>运行TypeScript Web应用</title></head>
    <body>
        <script src="app.js"></script>
    </body>
</html>

接口

接下来，我们通过一个接口来扩展以上实例，创建一个 interface.ts 文件

interface Shape {
    name: string;
}
function area(shape : Shape) {
    return shape.name;
}

console.log( area( {name: "rectangle"} ) );

接口继承

单继承

interface Shape {
   names: string;
}
interface Circle extends Shape {
   radiu: number;
}
// 继承了 Shape 的属性
Circle.names = "name";
Circle.radiu = 5;

多继承

interface Color {
   colors: string;
}

interface Shape {
   names: string;
}

interface Circle extends Color, Shape {
   radiu: number;
}

const c: Circle = {
   colors: 'blue',
   names: 'name',
   radiu: 5
};

类

让我们创建一个Student类，它带有一个构造函数和一些公共字段。注意类和接口可以一起共作，程序员可以自行决定抽象的级别。

class Student {
    fullName: string;
    constructor(public firstName, public lastName) {
        this.fullName = firstName + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "User");

类的继承

我们可以继承一个已存在的类并创建一个派生类，继承使用关键字 extends。


class Phone{
	owner : string;    //定义了一个属性，用于描述电话的所有者
	makeCall(phoneNumber : string) : void    //定义了一个方法，用于完成电话的功能，即：打电话
    {
		console.log(this.owner, "make call to ", phoneNumber);
	}
	constructor(owner : string)    //定义了构造函数，new类实例时调用
}


class IPhone extends Phone{//IPhone继承于Phone
	
	makeCall(phoneNumber : string) : void    //重写了基类方法
    {
		console.log(this.owner, "make call to ", phoneNumber, " by IPhone");
	}


let xiaoMingPhone = new IPhone("XiaoMing");    //构造继承类的实例对象
xiaoMingPhone.makeCall("12345");               //输出：XiaoMing make call to  12345  by IPhone

TS中的泛型

泛型是什么？有什么作用

使用any
使用any定义时存在的问题：虽然 以 知道传入值的类型但是无法获取函数返回值的类型；另外也失去了ts类型保护的优势

使用泛型
泛型指的是在定义函数/接口/类型时，不预先指定具体的类型，而是在使用的时候在指定类型限制的一种特性。

泛型用法

在函数中使用泛型

function hou <T> (a):T{
  console.log(a);
  return a;
}
test<number>(123);// 返回值是number类型的 123
test<string | boolean>('庆')//返回值是string类型的 庆

使用方式类似于函数传参，传什么数据类型，T就表示什么数据类型，使用表示，T也可以换成任意字符串。

在接口中使用泛型

interface Select {
  <T,Y>(id:T,name:Y):T
}

let func:Select  = function <T, Y>(id: T, name:Y):T {
  console.log(id, name)
  return id;
}
func(123,"庆");/

在类中使用泛型

class Admin<T> {
 names:T;
 constructor(names: T){
  this.names = names;
 }
 select<T>(sex:T) {
   console.log(sex)
 }
}
let user = new Admin('用户');
user.select('男')