前端之TS类型声明

TS类型声明

一、安装并测试自动编译
- 1.自动编译测试
二、ts类型注解
三、ts接口
四、类

写TS比写JS多了一步就是编译。
在ts中声明变量时可以指定变量的类型

一、安装并测试自动编译

1.命令行安装自动编译命令

tsc --init
1

2.修改配置中的输出js存储位置和关闭严格模式

"outDir": "./js",                                   /* 将ts自动编译成的js的输出目录改为当前文件夹下的js文件夹 */
"outDir": "./js",                                   /* 将ts自动编译成的js的输出目录改为当前文件夹下的js文件夹 */
1
2

3.启动监视，自动编译ts为js

启动监视任务:
终端 -> 运行任务 -> 监视tsconfig.json
在这里插入图片描述

1.自动编译测试

1.html：

<!--
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-06-27 13:51:04
 * @LastEditTime: 2022-06-27 13:51:29
 * @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自动编译成果</title>
  </head>
  <body>
    <script src="./js/index.js"></script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.ts：

/*
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-06-27 13:51:33
 * @LastEditTime: 2022-06-27 13:52:42
 * @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.ts
 */
(() => {
  function sayHello(name) {
    return name + ',你好啊!'
  }
  let name = "通天教主"
  console.log(sayHello(name))
})();
1
2
3
4
5
6
7
8
9
10
11
12
13

3.自动编译的js

/*
 * @LastEditors: 一只爱吃萝卜的小兔子
 * @Date: 2022-06-27 13:51:33
 * @LastEditTime: 2022-06-27 13:52:42
 * @FilePath: \TypeScript-learn\02_ts在vscode中自动编译\index.ts
 */
(() => {
    function sayHello(name) {
        return name + ',你好啊!';
    }
    let name = "通天教主";
    console.log(sayHello(name));
})();
1
2
3
4
5
6
7
8
9
10
11
12
13

结果：
在这里插入图片描述

二、ts类型注解

约束函数和变量，
在对应变量加上限制：

变量：变量类型

ts：

(() => {
  function sayHello(name: string) {
    return name + ',你好啊!'
  }
  let name = "通天教主";
  // let name = [1, 2, 3]; //Argument of type 'number[]' is not assignable to parameter of type 'string'.
  console.log(sayHello(name))
})();
1
2
3
4
5
6
7
8

三、ts接口

接口其实就是告诉我们一个类实现了哪些方法。

接口描述了类的公共部分,在 TS 里接口一般指这个变量拥有什么东西

(() => {
  // I代表接口,Person指定类
  interface IPerson {
    firstName: string
    lastName: string
  }

  function showFullName(person: IPerson) {
    return "在下" + person.lastName + '_' + person.firstName + '.';
  }

  // let user = {
  let user: IPerson = {
    lastName: '东方',
    firstName: '不败'
  }
  console.log(showFullName(user))

})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在这里插入图片描述

四、类

(() => {
  interface IPerson {
    firstName: string//名
    lastName: string//姓
  }

  // 定义类
  class Person {
    firstName: string
    lastName: string
    fullName: string

    // 构造器 更新数据
    constructor(lastName, firstName) {
      this.firstName = firstName
      this.lastName = lastName
      this.fullName = this.lastName + '·' + this.firstName
    }
  }

  // 函数 展示姓名
  function showFullName(person: IPerson) {
    return person.lastName + '·' + person.firstName
  }
  // 定义对象
  // let person = {
  //   firstName: '不败',
  //   lastName: "东方"
  // }

  // 实例化对象
  let person = new Person("东方", '不败')
  console.log(showFullName(person))
})()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关阅读:
ubuntu 20 安装 CUDA
vscode使用记录
代码随想录二刷day60
CompletableFuture 异步调用，获取返回值
读A Fast Single Image Haze Removal Algorithm Using Color Attenuation Prior
GPU架构与计算入门指南
谈谈对OceanBase单机分布式一体化的思考
企业防盗版，如何保障上网安全
Docker 安装zookeeper
微服务项目：尚融宝（31）（前端搭建：会员列表搭建（2））

原文地址：https://blog.csdn.net/weixin_46372074/article/details/125205338