Ts学习日记（一）

最新推荐文章于 2024-06-07 08:21:52 发布

回首＆逝去～

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量1.1k

点赞数

分类专栏： Typescript 文章标签： typescript html 前端

本文链接：https://blog.csdn.net/qq_43957263/article/details/121928919

版权

Typescript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

摘要

由于前段时间了解到现在大厂开发的技术基本上都开始使用vue3+Ts的技术来进行前端的开发了。所以现在开始学习Ts+vue3；第一天主要学习了：

1、安装和初体验Ts

2、Ts的数据类型

3、Ts函数定义的方法

一、Ts的安装和初体验

1.1、Ts的安装

使用npm来直接安装：

npm install -g typescript

1.2、Ts的初体验

由于浏览器没办法直接引入Ts代码，所以我们要先创建好Ts的环境，然后编译成js代码再使用。

1、在终端使用tsc --init来初始化ts环境

2、在tsconfig.json中打开"outDir": "./",的注释并改为"outDir": "./js",来使编译后的js文件在一个文件夹中

3、在VScode中终端》运行任务》typescript》tsc：监视-你所要监视的那个tsconfig.json

4、创建.ts文件并编写

目录结构：

ts代码：

const str:string = "hello ts";
console.log(str);

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>Document</title>
</head>
<body>
    <script src="./js/01_hello.js"></script>
</body>
</html>

结果：

二、Ts的数据类型

ts有十大数据类型，分别为：

* 1、布尔类型 boolean

* 2、数字类型 number

* 3、字符串类型 string

* 4、数组类型 array

* 5、元组类型 tuple

元组类型本质上是数组的一种，不过每个数据固定类型也固定

* 6、枚举类型 enum

主要用来保存状态，防止使用1，-1,0的时候不知其状态量。
 enum flg1{
     success = 1,
     error = -1
 }
* 7、任意类型 any

和js中的变量一样。

* 8、null 和 undefined

* 9、void类型

函数无返回值的类型，和Java中的void类似

* 10、never类型

表示从来不会出现的值；

三、Ts的函数定义

ts中定义函数的方法和js相比其实就是多了一个返回值类型；唯一不同的一点在于ts支持函数重载。

ts的函数声明

//函数声明法
function aa():String{
    return "123";
}
// 匿名函数法
const aa1 = function():String{
    return "123";
}

ts中的函数重载

//ts中的函数重载(es中没有函数重载这个概念，同名后就会覆盖掉前面的同名函数。但是ts的函数重载和Java的函数重载还不一样)
// 写法
function aa(a:number):number;
function aa(b:string):string;
function aa(b:string,c?:string):string;
function aa(s:any,s1?:any):any{
    if(s1){
        return "ccc"
    }
    if(typeof s == "number"){
        return s;
    }else{
        return s;
    }
}
console.log(aa(1));
console.log(aa("zhangsan"));
console.log(aa("zhangsan","aa"));