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:Array
    console.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 + '' + y
    else
        return 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 * rate
    console.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.mfbz.cn/a/55034.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Thread类的常用方法

文章目录 二. Thread类及常见方法2.1 常见构造方法2.2 Thread 的几个常见属性2.3 启动一个线程 start()2.4 终止一个线程2.5 等待一个线程 join()2.6 获取当前线程的引用2.7 休眠当前线程 二. Thread类及常见方法 2.1 常见构造方法 方法说明Thread()创建线程对象Thread(Runna…

C语言每日一题:11.《数据结构》链表分割。

题目一&#xff1a; 题目链接&#xff1a; 思路一&#xff1a;使用带头链表 1.构建两个新的带头链表&#xff0c;头节点不存储数据。 2.循环遍历原来的链表。 3.小于x的尾插到第一个链表。 4.大于等于x尾插到第二个链表。 5.进行链表合并&#xff0c;注意第二个链表的尾的下一…

RISC-V 指令集介绍

1. 背景介绍 指令集从本质上可以分为复杂指令集&#xff08;Complex Instruction Set Computer&#xff0c;CISC&#xff09;和精简指令集&#xff08;Reduced Instruction Set Computer&#xff0c;RISC&#xff09;两种。复杂指令集的特点是能够在一条指令内完成很多事情。 指…

【外卖系统】分类管理业务

公共字段自动填充 需求分析 对于之前的开发中&#xff0c;有创建时间、创建人、修改时间、修改人等字段&#xff0c;在其他功能中也会有出现&#xff0c;属于公共字段&#xff0c;对于这些公共字段最好是在某个地方统一处理以简化开发&#xff0c;使用Mybatis Plus提供的公共…

iPhone 7透明屏的显示效果怎么样?

iPhone 7是苹果公司于2016年推出的一款智能手机&#xff0c;它采用了4.7英寸的Retina HD显示屏&#xff0c;分辨率为1334x750像素。 虽然iPhone 7的屏幕并不是透明的&#xff0c;但是苹果公司在设计上采用了一些技术&#xff0c;使得用户在使用iPhone 7时可以有一种透明的感觉…

28.利用fminsearch、fminunc 求解最大利润问题(matlab程序)

1.简述 1.无约束&#xff08;无条件&#xff09;的最优化 fminunc函数 : - 可用于任意函数求最小值 - 统一求最小值问题 - 如求最大值问题&#xff1a; >对函数取相反数而变成求最小值问题&#xff0c;最后把函数值取反即为函数的最大值。 使用格式如下 1.必须预先把函数存…

【Golang 接口自动化08】使用标准库httptest完成HTTP请求的Mock测试

目录 前言 http包的HandleFunc函数 http.Request/http.ResponseWriter httptest 定义被测接口 测试代码 测试执行 总结 资料获取方法 前言 Mock是一个做自动化测试永远绕不过去的话题。本文主要介绍使用标准库net/http/httptest完成HTTP请求的Mock的测试方法。 可能有…

113、单例Bean是单例模式吗?

单例Bean是单例模式吗? 通常来说,单例模式是指在一个JVM中,一个类只能构造出来一个对象,有很多方法来实现单例模式,比如懒汉模式,但是我们通常讲的单例模式有一个前提条件就是规定在一个JVM中,那如果要在两个JVM中保证单例呢?那可能就要用分布式锁这些技术,这里的重点…

性能测试基础知识(三)性能指标

性能测试基础知识&#xff08;三&#xff09;性能指标 前言一、时间特性1、响应时间2、并发数3、吞吐量&#xff08;TPS&#xff09; 二、资源特性1、CPU利用率2、内存利用率3、I/O利用率4、网络带宽使用率5、网络传输速率&#xff08;MB/s&#xff09; 三、实例场景 前言 性能…

面试总结(三)

1.进程和线程的区别 根本区别&#xff1a;进程是操作系统分配资源的最小单位&#xff1b;线程是CPU调度的最小单位所属关系&#xff1a;一个进程包含了多个线程&#xff0c;至少拥有一个主线程&#xff1b;线程所属于进程开销不同&#xff1a;进程的创建&#xff0c;销毁&…

LViT:语言与视觉Transformer在医学图像分割

论文链接&#xff1a;https://arxiv.org/abs/2206.14718 代码链接&#xff1a;GitHub - HUANGLIZI/LViT: This repo is the official implementation of "LViT: Language meets Vision Transformer in Medical Image Segmentation" (IEEE Transactions on Medical I…

华为数通HCIP-IGMP(网络组管理协议)

IGMP&#xff08;网络组管理协议&#xff09; 作用&#xff1a;维护、管理最后一跳路由器以及组播接收者之间的关系&#xff1b; 应用&#xff1a;最后一跳路由器以及组播接收者之间&#xff1b; 原理&#xff1a;当组播接收者需要接收某个组别的流量时&#xff0c;会向最后…

SpringCloud Gateway 在微服务架构下的最佳实践

作者&#xff1a;徐靖峰&#xff08;岛风&#xff09; 前言 本文整理自云原生技术实践营广州站 Meetup 的分享&#xff0c;其中的经验来自于我们团队开发的阿里云 CSB 2.0 这款产品&#xff0c;其基于开源 SpringCloud Gateway 开发&#xff0c;在完全兼容开源用法的前提下&a…

数据结构-链表

&#x1f5e1;CSDN主页&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;代码云仓库&#xff1a;d1ff1cult.&#x1f5e1; &#x1f5e1;文章栏目&#xff1a;数据结构专栏&#x1f5e1; 目录 目录 代码总览&#xff1a; 接口slist.h&#xff1a; slist.c: 1.什么是链表 1.1链…

消息触达平台 - 基础理论

目录 消息触达平台 背景 业务流程 触达配置 服务处理 表现展示 效果统计 触达信息结构 对象 内容 渠道 场景 机制 消息触达平台 背景 在产品生命周期的不同阶段&#xff0c;用户触达体系可以用来对不同用户群体进行定制化运营。结合咱们的日常场景&#xff0c;公司的运营同学或…

【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置 一、实现手动跳转路由 利用 useNavigate 封装一个 withRouter&#xff08;hoc/with_router.js&#xff09; import { useNavigate } from "react-router-dom"; // 封装一个高阶组件 function withRou…

vue + element UI Table 表格 利用插槽是 最后一行 操作 的边框线 不显示

在屏幕比例100%时 el-table添加border属性 使用作用域插槽 会不显示某侧的边框线&#xff0c;屏幕比例缩小或放大都展示 // 修复列的 边框线消失的bug thead th:not(.is-hidden):last-child {right:-1px;// 或者//border-left: 1px solid #ebeef5; } .el-table__row{td:not(.i…

常用的CSS渐变样式

边框渐变 方案1&#xff1a; 边框渐变( 支持圆角) width: 726px;height: 144px;border-radius: 24px;border: 5px solid transparent;background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #f…

RabbitMQ 教程 | 第4章 RabbitMQ 进阶

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…
最新文章