【TypeScript理解】

简介: 【TypeScript理解】

安装

npm install -g typescript

创建app.ts文件,并把以下代码写入文件

function bigbox (username) {
    return "Hello, " + username;
}
let user = "ZLX";
document.body.innerHTML = bigbox(user);

运行时,命令行上写

tsc bigbox.ts

创建app.html文件,在app.html里输入如下内容:

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

泛型

函数中使用泛型

注意:sum中传递什么样的类型,他就是什么类型,有自己指定类型

c652403909684b5faa7daf7a8dd8679f.png

在类中使用泛型

df00925e175c437abfc95928d740d56a.png

注:同样下面传递的类型可以指定,例如是:

8a35dbde920848b5a065bf6fd27dd551.png

接口中使用泛型 泛型约束

a5c709abe8544988bd49210cb96fcfc3.png

接口

单继承

interface Person {
   names: string;
}
interface Man extends Shape {
   age: number;
}
// 继承了 Person 的属性
Man.names = "zlx";
Man.age = 5;

多继承

interface Color {
   colors: string;
}
interface Person {
   names: string;
}
interface Man extends Color, Person {
   age: number;
}
const a: Man = {
   colors: 'yellow',
   names: 'zlx',
   age: 18
};




相关文章
|
2月前
|
JavaScript 安全
TypeScript使用真的很麻烦吗?
TypeScript使用真的很麻烦吗?
30 3
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
|
JavaScript 前端开发
初识 TypeScript 二。
初识 TypeScript 二。
初识 TypeScript 二。
|
JavaScript
初识 TypeScript 一。
初识 TypeScript 一。
初识 TypeScript 一。
|
JavaScript 前端开发 编译器
【TypeScript】一文带你了解什么是TypeScript
【TypeScript】一文带你了解什么是TypeScript
【TypeScript】一文带你了解什么是TypeScript
typescript91-添加任务基本实现
typescript91-添加任务基本实现
90 0
typescript91-添加任务基本实现
typescript1-typescript是什么
typescript1-typescript是什么
64 0
typescript1-typescript是什么