TypeScrtpt学习

2023-09-16 23:37:29

TypeScript 开发环境搭建

安装TS

下载TS的编译器,它能够把TS文件转为JS文件。

npm install -g typescript

编译TS

手动编译:使用tsc命令将一个TS文件转为JS文件。

tsc index.ts   
//如果报错ts-node : 无法将“ts-node”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。
//可以试试 npx tsc index.ts   这种运行成功后如果需要使用Code Runner插件的话,需要将插件运行命令更换为npx开头,往下看有更换的步骤

自动编译:编译文件时,使用 -w 指令后,TS编译器会自动监视文件的变化,并在文件发生变化时对文件进行重新编译。

tsc index.ts -w  
//如果不行的话可以试试 npx tsc index.ts -w

vsCode中运行TS

在 vsCode中运行TS文件,也可以直接运行JS文件

  • VSCode安装Code Runner插件

  • 全局安装ts-node模块:npm i ts-node -g

  • 采用右键Run Code 或者 快捷键alt+ctrl+n可以运行TS文件(这里要记得项目路径中不能含有中文字符,否则找不到路径,或者直接报错)

(如果输出代码有中文乱码的话,可以去Code Runner插件设置搜索Run in Terminal 将其选中)

(如果路径不含中文还是报错的话,在插件设置随便找个在setting.json中编辑点进去找到code-runner.executorMap选项里面找到typescript值更换为npx ts-node 保存,这样右键运行时就会按照指定命令运行)

以下所有的笔记参考都来自于此网站,点击就能进入,特别适合学习tyscript

类型声明

Ts代码

let num:number = 10
num=11 //num只能为number类型


function abc(a:string){
  console.log('a',a);
}
abc("123") //只能传入string类型的值

// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值

编译后的JS代码

var num = 10;
num = 11; //num只能为number类型
function abc(a) {
    console.log('a', a);
}
abc("123"); //只能传入string类型的值
// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值

基础数据类型

Ts代码

// boolean类型
let flag:boolean = true
flag = false  //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错

// number类型(支持每个进制)
let a:number = 123 //十进制
let a1:number = 0b1010 //二进制
let a2:number =0o12 //八进制
let a3:number =0xa //十六进制
a=11 
// a="11" 报错,不能给string类型

// string类型
let str:string = "123"
// str = 123 报错
str = ''

// undefined和null类型(作为了解,不经常用)
let u:undefined = undefined
let n:null = null
// u=123 // 报错

// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
let b:number = undefined
let str1:string = null
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用

编译后的JS代码

// boolean类型
var flag = true;
flag = false; //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错
// number类型(支持每个进制)
var a = 123; //十进制
var a1 = 10; //二进制
var a2 = 10; //八进制
var a3 = 0xa; //十六进制
a = 11;
// a="11" 报错,不能给string类型
// string类型
var str = "123";
// str = 123 报错
str = '';
// undefined和null类型(作为了解,不经常用)
var u = undefined;
var n = null;
// u=123 // 报错
// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
var b = undefined;
var str1 = null;
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用

数组和对象类型

Ts代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
let arr1: number[] = [1, 2, 3]
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12]
// 第二种方式 泛型
let arr2: Array<number> = [10, 20, 30]
arr2 = [40, 50, 60, 70, 80]

// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
let obj:object = {}
// obj=123 报错
// obj="123" 报错
obj=null
obj=undefined
obj=[]
obj=new String() //实例对象
obj =String //类也是属于object

编译后的JS代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
var arr1 = [1, 2, 3];
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12];
// 第二种方式 泛型
var arr2 = [10, 20, 30];
arr2 = [40, 50, 60, 70, 80];
// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
var obj = {};
// obj=123 报错
// obj="123" 报错
obj = null;
obj = undefined;
obj = [];
obj = new String(); //实例对象
obj = String; //类也是属于object

any和void两种类型

Ts代码

// any 任何类型
let h:any=123
h="123"
h=true
h=null
h=undefined
h=[]
h={}

// 数组可以存any任意类型数据
let newArr:any[]=[1,"123",true,{}]
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 

// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1():void{
  console.log('123',123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错

// 下面代码代表没有任何类型
let v:void=undefined

编译后的JS代码

// any 任何类型
var h = 123;
h = "123";
h = true;
h = null;
h = undefined;
h = [];
h = {};
// 数组可以存any任意类型数据
var newArr = [1, "123", true, {}];
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 
// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1() {
    console.log('123', 123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错
// 下面代码代表没有任何类型
var v = undefined;

类型推断

Ts代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型

// 两中情况下进行类型推断
// 1.定义函数时候
let t = 123
// t="123" //报错,ts在t=123时候将t的类型定义为了number

// 2.不赋值情况下定义为any类型
let g;
g=123
g="123"
g=true
g=undefined
g=null
g=[]
g={}

编译后的JS代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型
// 两中情况下进行类型推断
// 1.定义函数时候
var t = 123;
// t="123" //报错,ts在t=123时候将t的类型定义为了number
// 2.不赋值情况下定义为any类型
var g;
g = 123;
g = "123";
g = true;
g = undefined;
g = null;
g = [];
g = {};

联合类型

Ts代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
let f: boolean | number | string = true
f = 123
f="123"
// f=[] //报错,没有进行联合声明

// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法

编译后的JS代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
var f = true;
f = 123;
f = "123";
// f=[] //报错,没有进行联合声明
// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法

接口

对象类型

Ts代码

// 接口是对行为的抽象,用于对「对象的形状(Shape)」进行描述。理解为一种约束
// 接口一般首字母大写
// 首字母一般为I
interface Person {
  name: string
  age: number
}

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
let tom: Person = {
  name: 'Tom',
  age: 25,
}

// 可选属性
// 有时我们希望不要完全匹配一个形状,那么可以用可选属性:
interface Person2 {
  name: string
  age?: number
}
// 属性?:值   就是可选属性的语法
let tom1: Person2 = {
  name: 'Tom',
}

// 任意属性
// 需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集:
// 有时候我们希望一个接口允许有任意的属性,可以使用如下方式:
interface Person3 {
  name: string
  age?: number
  [propName: string]: any //如果有确定的类型,可以用确定的类型,但是一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集,还是建议使用any类型
  // [propName: string]: string | boolean | number
}

let tom2: Person3 = {
  name: 'Tom',
  gender: 'male',
}

// 只读属性
// 有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:
interface Person4 {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

let tom3: Person4 = {
  id: 89757,
  name: 'Tom',
  gender: 'male'
};

// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。

编译后的JS代码

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
var tom = {
    name: 'Tom',
    age: 25,
}
// 属性?:值   就是可选属性的语法
var tom1 = {
    name: 'Tom',
}
var tom2 = {
    name: 'Tom',
    gender: 'male',
}
var tom3 = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
}
// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。

数组类型

Ts代码

// 不常用
interface NumberArray {
  [index: number]: number //任意属性,index表示数组中的下标,数组内数据为number类型
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5]

编译后的JS代码

var fibonacci = [1, 1, 2, 3, 5];

函数类型

Ts代码

interface SearchFunc {
  // (参数:类型,....):返回值类型
  (a: string, b: string): boolean 
}
const mySearch = function (a: string, b: string):boolean {
  return a.search(b) !== -1
}

console.log('mySearch()',mySearch("1","2"));

编译后的JS代码

var mySearch = function (a, b) {
    return a.search(b) !== -1;
};
console.log('mySearch()', mySearch("1", "2"));

函数

定义函数的方式

Ts代码

// h函数声明,命名函数
function add(a: number, b: number): number {
  return a + b
}
// 函数表达式,匿名函数
let add2 = function (a: number, b: number): number {
  return a + b
}
console.log('add2(1,3)', add2(1, 3))

// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
let add3: (a: number, b: number) => number = function (
  a: number,
  b: number
): number {
  return a + b
}
console.log('add3(1,3)', add3(1, 3))

编译后的JS代码

// h函数声明,命名函数
function add(a, b) {
    return a + b;
}
// 函数表达式,匿名函数
var add2 = function (a, b) {
    return a + b;
};
console.log('add2(1,3)', add2(1, 3));
// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
var add3 = function (a, b) {
    return a + b;
};
console.log('add3(1,3)', add3(1, 3));

可选参数和默认参数

Ts代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
let getName = function (x: string, y?: string): string {
  return x + y
}
console.log(getName('zhang'))

// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
let getName2 = function (x: string = 'zhang', y?: string): string {
  return x + y
}
console.log(getName2())

编译后的JS代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
var getName = function (x, y) {
    return x + y;
};
console.log(getName('zhang'));
// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
var getName2 = function (x, y) {
    if (x === void 0) { x = 'zhang'; }
    return x + y;
};
console.log(getName2());

剩余参数和函数重载

Ts代码

// 剩余参数
function fn(x: string, y: string, ...args: number[]) {
  console.log('x,y,args', x, y, args)
}
fn('', '', 1, 2, 3, 4, 5)


// 函数重载:函数名相同,形参不同的多个函数
// 实现数字 相加 字符串 拼接
// 将最下面代码简化函数重载声明(因为联合类型的都有多个类型,类型不确定,这里适合使用函数重载)
// 使用重载定义多个函数类型
function newAdd(x: string, y: string): string
function newAdd(x: number, y: number): number
function newAdd(x: string | number, y: string | number): string | number {
  if (typeof x == 'string' && typeof y == 'string') {
    return x + y //字符串拼接
  } else if (typeof x == 'number' && typeof y == 'number') {
    return x + y //数字相加
  } else {
    return 0
  }
}
newAdd(1, 2)
newAdd('zhang', 'san')

编译后的JS代码

// 剩余参数
function fn(x, y) {
    var args = [];
    for (var _i = 2; _i < arguments.length; _i++) {
        args[_i - 2] = arguments[_i];
    }
    console.log('x,y,args', x, y, args);
}
fn('', '', 1, 2, 3, 4, 5);
function newAdd(x, y) {
    if (typeof x == 'string' && typeof y == 'string') {
        return x + y; //字符串拼接
    }
    else if (typeof x == 'number' && typeof y == 'number') {
        return x + y; //数字相加
    }
    else {
        return 0;
    }
}
newAdd(1, 2);
newAdd('zhang', 'san');

类型断言

Ts代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
function getLength(x:string|number):number{
  if((x as string).length){
    return (<string>x).length
  }else{
    return x.toString().length
  }
}

console.log(getLength(123));
console.log(getLength("123"));

// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any。
(window as any).a = 10

// 将any断言为一个具体的类型
function abc(x:any,y:any):any {
  return x+y
}
let a = abc(1,2) as number //数值类型
let b = abc(1,2) as string //字符串类型

编译后的JS代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
// 将联合类型断言为其中一个类型
function getLength(x) {
    if (x.length) {
        return x.length;
    }
    else {
        return x.toString().length;
    }
}
console.log(getLength(123));
console.log(getLength("123"));
// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any。
window.a = 10;
// 将any断言为一个具体的类型
function abc(x, y) {
    return x + y;
}
var a = abc(1, 2); //数值类型
var b = abc(1, 2); //字符串类型

后面的有空再更新

类型别名和字符串字面量类型

Ts代码


编译后的JS代码


元组Tuple

Ts代码


编译后的JS代码


枚举Enum(一)

Ts代码


编译后的JS代码


枚举Enum(二)

Ts代码


编译后的JS代码


属性和方法

Ts代码


编译后的JS代码


类的继承

Ts代码


编译后的JS代码


存取器

Ts代码


编译后的JS代码


静态成员

Ts代码


编译后的JS代码


public、private、protected修饰符

Ts代码


编译后的JS代码


readonly以及参数属性

Ts代码


编译后的JS代码


抽象类和类的类型

Ts代码


编译后的JS代码


类实现接口以及接口继承接口

Ts代码


编译后的JS代码


接口继承类

Ts代码


编译后的JS代码


声明合并

Ts代码


编译后的JS代码


泛型的基本使用

Ts代码


编译后的JS代码


多个泛型参数

Ts代码


编译后的JS代码


泛型约束

Ts代码


编译后的JS代码


泛型接口和泛型类

Ts代码


编译后的JS代码


更多推荐

SELinux

简介SELinux:SecurityEnhancedLinux,安全强化Linux自主访问控制DAC这是传统文件权限与账号关系,依据进程的拥有者与文件资源的rwx权限来决定有无存取的能力。缺点:root具有最高权限如果不小心某个进程被有心人取得,且该进程属于root权限,那么这支进程就可以在系统上进行任何资源的存取。使

基于Java酒店预约及管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻精彩专栏推荐订阅👇🏻不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题

Linux网络编程:使用UDP和TCP协议实现网络通信

目录一.端口号的概念二.对于UDP和TCP协议的认识三.网络字节序3.1字节序的概念3.2网络通信中的字节序3.3本地地址格式和网络地址格式四.socket编程的常用函数4.1sockaddr结构体4.2socket编程常见函数的功能和使用方法五.UDP协议实现网络通信5.1UDP协议服务端的封装5.2UDP协议客户端

Rust结构体和枚举

结构体struct,或者structure,是一个自定义数据类型,允许你包装和命名多个相关的值,从而形成一个有意义的组合。声明定义结构体,需要使用struct关键字并为整个结构体提供一个名字。结构体的名字需要描述它所组合的数据的意义。接着,在大括号中,定义每一部分数据的名字和类型,我们称为字段(field)。struc

网安之PHP基础作业(5)

目录目录前言系列文章列表IJ中PHP环境的搭建和使用教程思维导图1,简答题1.1.题目部分1.2,题目分析2,页面一实现2.1,题解2.2,页面效果展示3,页面二的实现3.1,题解3.2,题目结果展示3.2.1,结果13.2.2,结果23.2.3,结果34,总结前言本博文,主要是对自己在学校PHP基础第5节课后,对作业

[maven] maven 创建 web 项目并嵌套项目

[maven]maven创建web项目并嵌套项目这里主要就创建另外一个web项目,并且创建一个parent项目比较方便的管理一下两个子项目。mavenweb项目web创建和quickstart的过程是差不多的,只不过这里换乘webapp,配置方便的话可以搞的东西挺多的……这里就搞servlet,上古版本的东西了。cre

如何利用Requestly提升前端开发与测试的效率

【软件测试行业现状】2023年了你还敢学软件测试?未来已寄..测试人该何去何从?【自动化测试、测试开发、性能测试】前端测试在进行前端页面开发或者测试的时候,我们会遇到这一类场景:在开发阶段,前端想通过调用真实的接口返回响应在开发或者生产阶段需要验证前端页面的一些异常场景或者临界值时在测试阶段,想直接通过修改接口响应来验

14:00面试,14:06就出来了,问的问题有点变态。。。

从小厂出来,没想到在另一家公司又寄了。到这家公司开始上班,加班是每天必不可少的,看在钱给的比较多的份上,就不太计较了。没想到5月一纸通知,所有人不准加班,加班费不仅没有了,薪资还要降40%,这下搞的饭都吃不起了。还在有个朋友内推我去了一家互联网公司,兴冲冲见面试官,没想到一道题把我给问死了:如果模块请求http改为了h

RabbitMQ

1.初识MQ1.1.同步和异步通讯微服务间通讯有同步和异步两种方式:同步通讯:就像打电话,需要实时响应。异步通讯:就像发邮件,不需要马上回复。两种方式各有优劣,打电话可以立即得到响应,但是你却不能跟多个人同时通话。发送邮件可以同时与多个人收发邮件,但是往往响应会有延迟。1.1.1.同步通讯我们之前学习的Feign调用就

安卓埋点策略+Retrofit上传埋点数据

安卓埋点在企业级安卓项目中,埋点是一项重要的技术,用于收集用户行为数据以进行分析和改进产品。以下是一个常见的安卓企业级项目开发中使用的埋点方案:定义埋点事件:首先,确定需要埋点的关键事件,如页面访问、按钮点击、数据提交等。为每个事件定义唯一的标识符或名称。埋点代码插入:在关键事件的代码位置插入埋点代码,以便在事件发生时

Windows【工具 04】WinSW官网使用说明及实例分享(将exe和jar注册成服务)实现服务器重启后的服务自动重启

官方Github;官方下载地址。没有Git加速的话很难下载,分享一下发布日期为2023.01.29的当前最新稳定版v2.12.0网盘连接。包含文件:WinSW-x64.exesample-minimal.xmlsample-allOptions.xml链接:https://pan.baidu.com/s/1sN3hL5

热文推荐