TypeScript基础学习

目录

一、安装

1、下载国内镜像

2、安装

3、查看安装情况

4、使用例子

二、变量声明

1、规则

2、声明的四种方式

3、注意

4、类型断言

5、类型推断

6、变量作用域

三、基础类型(共11种)

1、Any 类型

2、Null 和 Undefined

3、never 类型

四、every循环

五、函数

1、函数返回值

2、带参函数

3、可选参数和默认参数

4、剩余参数

 5、构造函数

6、递归函数

7、函数重载


一、安装

1、下载国内镜像

npm config set registry https://registry.npmmirror.com

2、安装

npm install -g typescript

3、查看安装情况

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

tsc -v

4、使用例子

(1)新建try1.ts文件

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

(2)将 TypeScript 转换为 JavaScript 代码,在终端输入

tsc try1.ts

当前目录下(与 try1.ts 同一目录)就会生成一个 try1.js 文件

(3)使用 node 命令来执行 try1.js 文件

node try1.js


二、变量声明

1、规则

(1)变量名称可以包含数字和字母

(2)除了下划线 _ 和美元 $ 符号外,不能包含其他特殊字符,包括空格

(3)变量名不能以数字开头

2、声明的四种方式

(1)声明变量的类型初始值        var [变量名] : [类型] = 值;

var uname:string = "Runoob";

(2)声明变量的类型,但没有初始值,变量值会设置为 undefined        var [变量名] : [类型];

var uname:string;

(3)声明变量的初始值,但不设置类型,该变量可以是任意类型        var [变量名] = 值;

var uname = "Runoob";

(4)声明变量没有设置类型和初始值,类型可以是任意类型,默认初始值为 undefined        var [变量名];

var uname;

3、注意

(1)变量不要使用 name 否则会与 DOM 中的全局 window 对象下的 name 属性出现了重名

(2)TypeScript 遵循强类型,如果将不同的类型赋值给变量会编译错误

4、类型断言

(1)介绍

①手动指定一个值的类型,即允许变量从一种类型更改为另一种类型

②格式:<类型>值  或  值 as 类型

(2)实例

lean-ts.ts

var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型
console.log(str2)

 终端ts转换生成的js文件

var str = '1';
var str2 = str;  //str、str2 是 string 类型
console.log(str2);

(3)类型断言不是类型转换,意味着断言只是纯粹一个编译时的语法,为编译器提供分析代码的方法

5、类型推断

(1)当类型没有给出时,TypeScript 编译器利用类型推断来推断类型

(2)缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型

var num = 2;// 类型推断为 number
console.log("num 变量的值为" + num);
num = '12';// 编译错误
console.log(num);

6、变量作用域

变量作用域指定了变量定义的位置,TypeScript 有以下几种作用域:

(1)全局作用域:定义在程序结构的外部,可以在代码的任何位置使用

(2)类作用域:这个变量也可以称为 字段,类变量声明在一个类里头,但在类的方法外面。 该变量可以通过类的对象来访问。类变量也可以是静态的,静态的变量可以通过类名直接访问。

(3)局部作用域:局部变量只能在声明它的一个代码块(方法)中使用

lean-ts.ts文件

var global_num = 12          // 全局变量
class Numbers {num_val = 13;             // 实例变量static sval = 10;         // 静态变量storeNum(): void {var local_num = 14;    // 局部变量}
}
console.log("全局变量为: " + global_num)
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val)

终端tsc转换成lean-ts.js

var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {function Numbers() {this.num_val = 13; // 实例变量}Numbers.prototype.storeNum = function () {var local_num = 14; // 局部变量};Numbers.sval = 10; // 静态变量return Numbers;
}());
console.log("全局变量为: " + global_num);
console.log(Numbers.sval); // 静态变量
var obj = new Numbers();
console.log("实例变量: " + obj.num_val);


三、基础类型(共11种)

数据类型关键字描述
任意类型any声明为 any 的变量可以赋予任意类型的值
数字类型number

双精度 64 位浮点值。它可以用来表示整数和分数。

let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744;    // 八进制
let decLiteral: number = 6;    // 十进制
let hexLiteral: number = 0xf00d;    // 十六进制
字符串类型string

一个字符系列,使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式。

let name: string = "Runoob";
let years: number = 5;
let words: string = `您好,今年是 ${ name } 发布 ${ years + 1} 周年`;
布尔类型boolean

表示逻辑值:true 和 false。

let flag: boolean = true;
数组类型

声明变量为数组。

// 在元素类型后面加上[]
let arr: number[] = [1, 2];// 或者使用数组泛型
let arr: Array<number> = [1, 2];
元组

元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。

let x: [string, number];
x = ['Runoob', 1];    // 运行正常
x = [1, 'Runoob'];    // 报错
console.log(x[0]);    // 输出 Runoob
枚举enum

枚举类型用于定义数值集合。

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2
voidvoid

用于标识方法返回值的类型,表示该方法没有返回值。

function hello(): void {alert("Hello Runoob");
}
nullnull

表示对象值缺失。

undefinedundefined

用于初始化变量为一个未定义的值

nevernever

never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。

注意:TypeScript 和 JavaScript 没有整数类型。


1、Any 类型

(1)变量值会动态改变时,可以让这些变量跳过编译阶段的类型检查

let x: any = 1;    // 数字类型
console.log(x);
x = 'I am who I am';    // 字符串类型
console.log(x);
x = false;    // 布尔类型
console.log(x);

(2)定义存储各种类型数据的数组

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;
console.log(arrayList[1]);

2、Null 和 Undefined

(1)null:表示 "什么都没有",一个空对象引用,只有一个值的特殊类型

(2)undefined:一个没有设置值的变量,typeof 一个没有值的变量会返回 undefined

(3)Null 和 Undefined 是其他任何类型(包括 void)的子类型,可以赋值给其它类型,如数字类型,此时,赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验(--strictNullChecks)特性,就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型,示例代码如下:

①启用 --strictNullChecks,错误写法

// 启用 --strictNullChecks
let x: number;
x = 1; // 编译正确
x = undefined;    // 编译错误
x = null;    // 编译错误

②启用 --strictNullChecks,正确写法

// 启用 --strictNullChecks
let x: number | null | undefined;
x = 1; // 编译正确
x = undefined;    // 编译正确
x = null;    // 编译正确

3、never 类型

(1)never 是其它类型(包括 null 和 undefined)的子类型,代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值,在函数中它通常表现为抛出异常或无法执行到终止点(例如无限循环),示例代码如下

①数字类型不能转为 never 类型

let x: never;
// 编译错误,数字类型不能转为 never 类型
x = 123;

②never 类型可以赋值给 never、数字类型

let x: never;
let y: number;// 运行正确,never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();// 运行正确,never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {throw new Error(message);
}// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {while (true) {}
}


四、every循环

let list = [1,2,3]
list.every((val,idx,array)=>{// val:当前值  idx:当前index  array:Arrayconsole.log(val,idx,array);return true;
})


五、函数

1、函数返回值

在使用 return 语句时,函数会停止执行,并返回指定的值

(1)格式模板

function function_name():return_type { // 语句return value; 
}
  • function_name 函数名称

  • return_type 返回值的类型

  • return 关键词后跟着要返回的结果

  • 一般情况下,一个函数只有一个 return 语句

  • 返回值的类型需要与函数定义的返回类型(return_type)一致

(2)实例1

function test():number{return 3
}
console.log(test());

(3)实例2

// 函数定义
function greet():string { // 返回一个字符串return "Hello World" 
} function caller() { var msg = greet() // 调用 greet() 函数 console.log(msg) 
} // 调用函数
caller()

2、带参函数

(1)格式模板

function func_name( param1 [:datatype], param2 [:datatype]) {   
}
  • param1、param2 为参数名

  • datatype 为参数类型

(2)实例1

function add(x: number, y: number): number {return x + y;
}
console.log(add(1,2))

(3)实例2

function test(x:number,y:string):boolean{if(typeof(x) == 'number'){return true}else{return false}
}
console.log(test(1,'2'));

3、可选参数和默认参数

(1)可选参数

①参数不可缺失,不可过多

function test(x:string,y:string){return x + '' + y
}
let result1 = test("Bob");                  // 错误,缺少参数
let result2 = test("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = test("Bob", "Adams");         // 正确

②参数可确实,不可过多

function test(x:string,y?:string){if(y)return x + '' + yelsereturn x
}
let result1 = test("Bob");  // 正确
let result2 = test("Bob", "Adams", "Sr.");  // 错误,参数太多了
let result3 = test("Bob", "Adams");  // 正确

注意:可选参数必须跟在必需参数后面

如果上例想让 firstName 是可选的,lastName 必选,那么就要调整它们的位置,把 firstName 放在后面,如果都是可选参数就没关系

(2)默认参数

①作用:可以设置参数的默认值,这样在调用函数的时候,如果不传入该参数的值,则使用默认参数

②模板

function function_name(param1[:type],param2[:type] = default_value) { 
}

③注意:参数不能同时设置为可选和默认 

④实例

function calculate_discount(price:number,rate:number = 0.50){var discount = price * rateconsole.log("价格为:",discount);
}
calculate_discount(1000)
calculate_discount(1000,0.3)

4、剩余参数

①作用:当不知道要向函数传入多少个参数,可以使用剩余参数来定义,允许我们将一个不确定数量的参数作为一个数组传入

②实例1

function test(x:string,...y:string[]){return x + '' + y.join("")
}
let testValue = test("Zhangsan"," and ","Lisi"," and ","Wangwu"," and ","Zhaoliu")
console.log(testValue);

函数的最后一个命名参数 y 以 ... 为前缀,将成为一个由剩余参数组成的数组,索引值从0(包括)到 y.length(不包括)

②实例2

function addNumbers(...nums:number[]){var i;var sum:number = 0;nums.forEach((item)=>{sum = sum + item})console.log("和为:",sum);
}
addNumbers(1,2,3)
addNumbers(10,10,10,10,10)

 5、构造函数

(1)模板

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)
  • arg1, arg2, ... argN:参数列表
  • functionBody:一个含有包括函数定义的 JavaScript 语句的字符串

(2)实例

var test = new Function("x","y","return x * y")
var testValue = test(3,4)
console.log(testValue);

 

6、递归函数

实例:

function factorial(number){if(number <= 0){//停止执行return 1;}else{return (number * factorial(number - 1))//调用自身}
}
console.log(factorial(6));

7、函数重载

(1)介绍:重载是方法名字相同,而参数不同,返回类型可以相同也可以不同。每个重载的方法(或者构造函数)都必须有一个独一无二的参数类型列表

①参数类型不同:

function disp(string):void; 
function disp(number):void;

如果参数类型不同,则参数类型应设置为 any

②参数数量不同:

function disp(n1:number):void; 
function disp(x:number,y:number):void;

参数数量不同可以将不同的参数设置为可选 

③参数类型顺序不同:

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

(2)实例1

function disp(s1:string):void;
function disp(n1:number,s1:string):void;function disp(x:any,y?:any):void{console.log(x);console.log(y);
}
disp("abc")
disp(1,"xyz")

(3)实例2

①定义函数重载需要定义重载签名和一个实现签名

②重载签名定义函数的形参返回类型,没有函数体

③一个函数可以有多个重载签名(不可调用)

let suits = ["hearts","spades","clubs","diamonds"]
// 定义重载签名
function greet(person:string):string;
function greet(persons:string[]):string[];
// 定义实现签名
function greet(person:unknown):unknown{if(typeof person === 'string'){return `Hello,${person}!`;}else if(Array.isArray(person)){return person.map(name => `Hello,${name}!`);}throw new Error('Unable to greet');
}
console.log(greet(suits[0]));
console.log(greet(suits));

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/18043.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【备战csp-j】 csp常考题型详解(2)

二.计算机网络。 1. TCP/IP 协议共有( )层协议 。 A.3 B.4 C.5 D.6 答案&#xff1a;B 解析&#xff1a; 2.Ipv4 地址是由( ) 位二进制数码表示的。 A.16 B.32 C.24 D.8 答案&#xff1a;B 解析&#xff1a;IP地址是IP协议提供的一种统一的地址格式。在目前使用的IPv…

Linux - 进程控制(进程替换)

0.引入 创建子进程的目的是什么&#xff1f; 就是为了让子进程帮我执行特定的任务 让子进程执行父进程的一部分代码 如果子进程想执行一个全新的程序代码呢&#xff1f; 那么就要使用 进程的程序替换 为什么要有程序替换&#xff1f; 也就是说子进程想执行一个全新的程序代码&a…

HCIP OSPF+BGP综合实验

题目 1、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3、整张拓扑均使用私网地址进行配置。 4、整张网络中&#xff0c;运行OSPF协议或者BGP协议…

python森林生物量(蓄积量)数据处理到随机森林估算全流程

python森林生物量&#xff08;蓄积量&#xff09;估算全流程 一.哨兵2号获取/处理/提取数据1.1 影像处理与下载采用云概率影像去云采用6S模型对1C级产品进行大气校正geemap下载数据到本地NDVI 1.2 各种参数计算&#xff08;生物物理变量、植被指数等&#xff09;LAI&#xff1a…

抖音引流推广的几个方法,抖音全自动引流脚本软件详细使用教学

大家好我是你们的小编一辞脚本&#xff0c;今天给大家分享新的知识&#xff0c;很开心可以在CSDN平台分享知识给大家,很多伙伴看不到代码我先录制一下视频 在给大家做代码&#xff0c;给大家分享一下抖音引流脚本的知识和视频演示 不懂的小伙伴可以认真看一下&#xff0c;我们…

【C++】总结9

文章目录 C从源代码到可执行程序经过什么步骤静态链接和动态链接类的对象存储空间C的内存分区内存池在成员函数中调用delete this会出现什么问题&#xff1f;如果在类的析构函数中调用delete this&#xff0c;会发生什么&#xff1f; C从源代码到可执行程序经过什么步骤 预处理…

java学习路程之篇六、进阶知识、常用API、Arrays工具类、冒泡排序、选择排序、二分查找、正则表达式

文章目录 1、Arrays工具类2、冒泡排序3、选择排序4、二分查找5、正则表达式 1、Arrays工具类 2、冒泡排序 3、选择排序 4、二分查找 5、正则表达式

【Maven】Nexus3上传maven依赖jar

后端依赖 上次说到前端的批量tgz文件上传私服&#xff0c;其实服务端也有类似情况&#xff0c;我们有个私服也需要进行上传到私服&#xff0c;这里做个记录。因为上次有个小细节没注意白白传错了一遍&#xff0c;这里重新记录总结一下。 # 查看一下结构 $ tree -L 2 . |-- re…

【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接

前言&#xff1a;最近项目上需要使用富文本编辑器&#xff0c;觉得tinymce很不错就用了&#xff0c;具体怎么在项目中使用参考 【vue】 vue2 中使用 Tinymce 富文本编辑器 【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面&#xff0c;显示空白bug不能编辑 这两天又遇到了…

Windows下RocketMQ的启动

下载地址&#xff1a;下载 | RocketMQ 解压后 一、修改runbroker.cmd 修改 bin目录下的runbroker.cmd set "JAVA_OPT%JAVA_OPT% -server -Xms2g -Xmx2g" set "JAVA_OPT%JAVA_OPT% -XX:MaxDirectMemorySize15g" set "JAVA_OPT%JAVA_OPT% -cp %CLASSP…

八大排序算法--希尔排序(动图理解)

目录 希尔排序 概念 算法思路 动画演示 代码如下 复杂度分析 时间复杂度测试 运行结果 完整代码 创作不易&#xff0c;如果本篇博客对您有一定的帮助&#xff0c;大家记得留言点赞哦。 希尔排序 概念 希尔排序是插入排序的一种&#xff0c;是对直接插入排序的优化。其…

ChinaJoy 2023微星雷鸟17游戏本震撼发布:搭载AMD锐龙9 7945HX首发8499元

ChinaJoy 2023展会中微星笔记本再次给大家带来惊喜&#xff0c;发布了搭载AMD移动端16大核的旗舰游戏本&#xff1a;雷鸟17&#xff0c;更重要的这样一款旗舰性能的游戏本&#xff0c;首发价8499元堪称当今游戏本市场中的“性价比爆款”&#xff01; 本着和玩家一同制霸游戏战场…

k8s概念-StatefulSet

StatefulSet 是用来管理有状态应用的控制器 StatefulSet 用来管理某Pod集合的部署和扩缩&#xff0c; 并为这些 Pod 提供持久存储和持久标识符StatefulSet | KubernetesStatefulSet 运行一组 Pod&#xff0c;并为每个 Pod 保留一个稳定的标识。 这可用于管理需要持久化存储或稳…

【设计模式——学习笔记】23种设计模式——代理模式Proxy(原理讲解+应用场景介绍+案例介绍+Java代码实现)

介绍 基础介绍 代理模式为一个对象提供一个代理对象&#xff0c;以控制对这个对象的访问。即通过代理对象访问目标对象&#xff0c;这样做的好处是&#xff1a;可以在不修改目标对象代码的基础上&#xff0c;增强额外的功能操作&#xff0c;即扩展目标对象的功能被代理的对象…

牛客网Verilog刷题——VL52

牛客网Verilog刷题——VL52 题目答案 题目 请编写一个十进制计数器模块&#xff0c;当mode信号为1&#xff0c;计数器输出信号递增&#xff0c;当mode信号为0&#xff0c;计数器输出信号递减。每次到达0&#xff0c;给出指示信号zero。模块的接口信号图如下&#xff1a; 模块的…

Flask学习笔记_异步论坛(四)

Flask学习笔记_异步论坛&#xff08;四&#xff09; 1.配置和数据库链接1.exts.py里面实例化sqlalchemy数据库2.config.py配置app和数据库信息3.app.py导入exts和config并初始化到app上 2.创建用户模型并映射到数据库1.models/auth.py创建用户模型2.app.py导入模型并用flask-mi…

教师工作量管理系统Springmvc+Spring+Mybatis课程工作量教室java源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 教师工作量管理系统SpringmvcSpringMybatis 系统有1权…

快速开发人脸识别系统Java版本

简介&#xff1a; 先说下什么是人脸识别系统&#xff1a;举个例子&#xff0c;公司门口有个人脸识别系统&#xff0c;员工站到门口&#xff0c;看着摄像头&#xff0c;大屏幕上会抓拍到你的人脸&#xff0c;然后和公司的员工照片库里的照片比对&#xff0c;比对成功就提示&…

ThreadLocal原理

ThreadLocal原理 ThreadLocal对象new出来存放到堆中&#xff0c;ThreadLocal引用是存放在栈里 Thread 类有个 ThreadLocalMap 成员变量&#xff0c;Map的key是Threadlocal 对象&#xff0c;value是你要存放的线程局部变量。 public void set(T value) {//获取当前线程Thread&…

python爬虫(四)_urllib2库的基本使用

本篇我们将开始学习如何进行网页抓取&#xff0c;更多内容请参考:python学习指南 urllib2库的基本使用 所谓网页抓取&#xff0c;就是把URL地址中指定的网络资源从网络流中读取出来&#xff0c;保存到本地。在Python中有很多库可以用来抓取网页&#xff0c;我们先学习urllib2。…