【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
};




相关文章
|
4月前
|
JavaScript 安全
TypeScript使用真的很麻烦吗?
TypeScript使用真的很麻烦吗?
47 3
|
9月前
|
存储 JavaScript
TypeScript三
在 TypeScript 中,数组可以通过类型定义,如 `number[]` 或 `string[]`。示例展示了数字和字符串数组的声明与访问。数组解构允许将数组元素赋值给多个变量。通过 `for...in` 循环可遍历数组。多维数组如 `number[][]` 存储嵌套数组。数组方法包括:`concat()` 连接数组,`every()` 检查所有元素是否满足条件,`filter()` 过滤符合条件的元素,`forEach()` 对每个元素执行回调,`indexOf()` 查找元素位置,`join()` 将数组转为字符串,`map()` 应用函数于每个元素并返回新数组
|
8月前
|
自然语言处理 JavaScript
typescript let
typescript let
|
JavaScript 前端开发 编译器
30分钟速成TypeScript
30分钟速成TypeScript
108 0
|
JavaScript 前端开发 编译器
TypeScript使用技巧
TypeScript使用技巧
73 0
|
JavaScript
TypeScript(一)
TypeScript(一)
|
JavaScript 前端开发 安全
快速了解 TypeScript
快速了解 TypeScript
|
JavaScript 前端开发 数据库
TypeScript 期中考试现在开始
相信这段时间来,对 TypeScript 感兴趣的小伙伴们已经把这个神器给系统的学习了一遍了吧。如果计划开始学习但是还没有开始,或者没有找到资料的同学,可以看下我在之前文章中 前端进阶指南[1] 找一下 TypeScript 部分的教程,自行学习。
|
JavaScript
初识 TypeScript 一。
初识 TypeScript 一。
初识 TypeScript 一。