TS - 勉强入个门儿

最新推荐文章于 2024-07-10 17:44:06 发布
最新推荐文章于 2024-07-10 17:44:06 发布
阅读量265 收藏
点赞数 1
文章标签： js es6 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51198863/article/details/121514111
版权

TypeScript

入门

类型检测，相比javascript，在TS中允许你为变量指定类型，有更多语法提示。

类型注解：变量后跟 :number，string等数据类型，约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错

使用

安装：npm install -g typescript

编译：tsc xxx.ts

热编译：tsc -w xxx.ts

初始化：tsc --init

数据类型

基本数据类型

布尔值

let isDone：boolean = false；

数字

let sun：number = 1；

字符串

let str：string = “string”；
let sentence: string = `Hello, my name is ${ name }.

数组

let arr: Array<number> = [1,2];//允许数组内有数值
let a: [string] = ['1']; // 只允许数组内有1个字符串
let a1: string[] = ['1','2'];//只允许数组内有字符串
let b: any[] = [1,'2', {name:1}];//允许数组内有任意值

Null undefined

默认情况下null和undefined是所有类型的子类型

然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。



TS新增类型


元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，
各元素的类型不必相同。

let x: [string, number];  // 数组有两个元素，类型为字符串，数字

x = ['hello', 10]; // OK

x = [10, 'hello']; // Error

//超出元组定义的值，只有类型允许的才可接受
//我们称其为联合类型
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString

x[6] = true; // Error, 布尔不是(string | number)类型

枚举 enum

枚举类型可以为一组数值赋予友好的名字。

enum Color { red,green=2,blue=4};
let arr:Color=Color;
console.log(arr);
//元素标号（下标）默认从0开始
//{0: 'red', 2: 'green', 4: 'blue', red: 0, green: 2, blue: 4}

// 你可以根据下标获取元素，也可以反之用值获取其标示
console.log(arr[2]); // green
console.log(arr['green']);//2

任意值 any

any代表它可以是任意类型，在不清楚变量的类型时可以使用。

let Any: any = 123;
Any = '123';
Any = false;

// 包含任意类型的数组
let Arr: <any> = [1,'2',true];

空值 void
void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是void

function fn(e): void {
	console.log('没有返回值');
}

//只能为它赋予undefined和null
let v：void = null；

Never
never类型表示的是那些永不存在的值的类型（抛出错误）

never类型是任何类型的子类型，也可以赋值给任何类型；

然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

类型断言

相当于告诉编译器，
“相信我，我知道自己在干什么”
“你不要帮我检查了, 相信我，它就是这个类型”
（通过原本不被通过的类型赋值）

函数

function 函数名(参数列表): 返回值类型 {
    函数体 ...
    [return 返回值;]
}

//可选参数 ?: 代表参数可不传。可选参数必须配置到参数的最后面
function fn(str:string,arr?:number):string {
	return xxx;
}

TS class类

  1. 类的定义
class Person {
    name: string;//属性，前面省略了public关键词

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;//使用this关键字为当前类的name属性赋值
    }

    run(): void {//方法
        console.log(this.name+ "在跑步");
    }
}

var p = new Person("张三");
p.run();

  1. 类的继承

    类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。

class Person {
    name: string;//父类属性，前面省略了public关键词

    constructor(n: string) {//构造函数，实例化父类的时候触发的方法
        this.name = n;//使用this关键字为当前类的name属性赋值
    }

    run(): void {//父类方法
        console.log(this.name + "在跑步");
    }
}

//中国人这个类继承了人这个类
class Chinese extends Person {
    age: number;//子类属性

    constructor(n: string, a: number) {//构造函数，实例化子类的时候触发的方法
        super(n);//使用super关键字调用父类中的构造方法
        this.age = a;//使用this关键字为当前类的age属性赋值
    }

    speak(): void {//子类方法
        super.run();//使用super关键字调用父类中的方法
        console.log(this.name + "说中文");
    }
}

var c = new Chinese("张三", 28);
c.speak();
  1. 修饰符

TypeScript 在class类里面定义属性的时候给我们提供了 三种修饰符

public：公有类型，在当前类里面、子类、类外面都可以访问
protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问
private：私有类型，在当前类里面可以访问，子类、类外部都没法访问

      注意：如果属性不加修饰符，默认就是公有（public）。
  1. 静态属性

被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用。

class Person {
    name: string;//属性，前面省略了public关键词
    static sex: string = "男";//被静态修饰符static修饰的属性

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;
    }

    run(): void {//方法
        console.log(this.name+ "在跑步");
    }
}

console.log(Person.sex);
  1. 静态方法

静态方法：被静态修饰符修饰的方法就是静态方法，静态方法可以通过类名直接调用，但是在静态方法内部，不能直接调用当前类的非静态属性、非静态方法。

class Person {
    name: string;//属性，前面省略了public关键词
    static sex: string = "男";//被静态修饰符static修饰的属性

    constructor(n: string) {//构造函数，实例化类的时候触发的方法
        this.name = n;
    }

    run(): void {//方法
        console.log(this.name + "在跑步");
    }

    static print(): void {//被静态修饰符static修饰的方法
        // console.log('姓名：' + this.name);//错误
        console.log('性别：' + Person.sex);//正确
        // this.run();//错误
    }
}

Person.print();
  1. 抽象类

抽象类
TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。

我们常常使用抽象类和抽象方法用来定义标准。

//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现
    run() {
        console.log(this.name + "会跑")
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃骨头");
    }
}

var d: Dog = new Dog("小狼狗");
d.eat();

class Cat extends Animal {
    constructor(name: string) {
        super(name);
    }
    eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法
        console.log(this.name + "吃老鼠");
    }
}

var c: Cat = new Cat("小花猫");
c.eat();

接口 interface

接口的用途就是：
对行为和动作进行规范和约束，规定这批类里必须提供某些方法，变量需为何种类型；
但是，接口中不能有方法体，只允许有方法定义。

属性类接口

//对传入对象的属性约束，以下这个是一个属性接口
interface FullName {
    firstName: string;
    secondName: string;
}

function printName(name: FullName) {
    console.log(name.firstName + "--" + name.secondName);
}

//传入的参数必须包含firstName、secondName
var obj = {
    age: 20,
    firstName: '张',
    secondName: '三'
};
printName(obj);//正确
// printName("1213");//错误
函数类型接口
//加密的函数类型接口
interface encrypt {
//约束传参及返回值
    (key: string, value: string): string;
}

var md5: encrypt = function (key: string, value: string): string {
    //模拟操作
    return key + "----" + value;
}
console.log(md5("name", "zhangsan"));
类类型接口
interface Animal {
    name: string;
    eat(str: string): void;
}

//类接口需要 implements 关键字
class Dog implements Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + "吃大骨头");
    }
}

var d = new Dog("小狼狗");
d.eat();
接口的继承

接口可以继承接口，接口之间和抽象类之间的继承都是单向单继承，但是实现接口的子类可以实现多个接口。

简单来说，对于类、抽象类、接口继承只能单继承，但接口却可以多实现。


//人这个接口
interface Person {
    eat(): void;
}

//程序员接口
interface Programmer extends Person {
    code(): void;
}

//小程序接口
interface Web {
    app(): void;
}

//前端工程师
class WebProgrammer implements Person, Web {
    public name: string;
    constructor(name: string) {
        this.name = name;
    }
    eat() {
        console.log(this.name + "下班吃饭饭")
    }
    code() {
        console.log(this.name + "上班敲代码");
    }
    app() {
        console.log(this.name + "开发小程序");
    }
}

var w = new WebProgrammer("小李");
w.eat();
w.code();
w.app();
单调的王先森
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
TS 编译工具！从 ts-loader 到 Babel
iamxuqianqian的博客
04-23 7122
ts-loader 这是用于 webpack 的 TypeScript 加载器，将 TypeScript 编译成 JavaScript。 ts-loader 在内部是调用了 TypeScript 的官方编译器 – tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json。 安装 yarn add ts-loader --dev or npm install ts-loader --save-dev 如果还没有安装 TypeScript，你需要先安装一下： yarn add typ
使用ts-node直接运行ts脚本
qq_1015350043的博客
03-15 6331
应用场景在代码日常中，经常会需要写各种脚本，今天使用ts写了个脚本，运行的时候各种报错，还是决定写下来。运行ts脚本需要一个库ts-node，这个库不能全局安装，否则会报错。yarn ad...
使用ts-node去支持TS的Node运行环境
热门推荐
mrhaoxiaojun的博客
01-30 1万+
1、需求 写Typescript文件，node命令可以直接编运行，我们不想ts转换为js，再去执行 2、实现 ts-node官方文档 使用ts-node来支持，实现TS的Node运行环境，官网文档比较全面，查了博客朋友的方法都不是很好能解决自己的问题，后来还是仔细读了官方的英文文档，才完成了配置 安装 官方文档: 官网给的，按着官网来就可以 # Locally in your project. npm install -D typescript npm install -D ts-node # Or gl
TypeScript简化运行之ts-node
前端菜菜DayDayUp的博客
07-26 4081
TypeScript简化运行之ts-node
vue: 使用ts-loader引入ts文件
彭世瑜的博客
05-11 9582
安装 npm install typescript ts-loader --save-dev vue.config.js configureWebpack: { resolve: {extensions: [".ts", ".tsx", ".js", ".json"]}, module: { rules: [ { test: /\.ts$/, loader: "ts-loader" }, ] } } tsconfig.json { "compilerOptio
ts-node 直接运行ts文件
Jq的博客
09-19 1万+
ts-node可以直接运行ts代码 安装 ts-node 需要在全局去安装。这里要用 npm 去全局安装，yarn 全局安装好像用不了 ts-node。 npm install -g typescript npm install -g ts-node 运行 这时使用ts-node命令运行文件报错： 解决： 安装一个依赖包 npm install -D tslib @types/node 再次运行就可以了 ...
ts：使用ts-node执行ts文件
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
12-07 5622
背景 一般我们执行 js 文件，直接 node index.js，那么如何快速的执行 ts 呢？ esno npm i esno -g esno index.ts { "scripts": { "start": "esno index.ts" }, "dependencies": { "esno": "*" } } 参考文档 https://github.com/antfu/esno ...
tsc与ts-node工具区别
qq_32615575的博客
07-25 2716
1、tsc typescript 需要编译成js才能运行。 tsc就是一个编译器，能将ts文件编译成js文件 2、ts-node可以直接编译并在node运行js文件 ts-node xx.ts 安装 npm install -g typescript npm install -g ts-node
Do not use “// @ts-ignore“ because it alters compilation errors问题的处理
码飞_CC的博客
05-12 6309
使用TS编写代码时，有些情况下，比如第三方的库对象，我们想增加一些属性，并且确认是没问题的，但是TS检查时会报错导致不能正常编译运行， 我们通过添加// @ts-ignore来告诉TS该条语句不检查类型问题，此时是可以正常编译了，但是// @ts-ignore这条注释标红了很难受： 这个我们可以通过修改.eslintrc.js文件来消除该提示： module.exports = { ... rules: { ... "@typescript-eslint/ban-ts-comme
VSCode使用ts-node 调试TypeScript代码
仗剑天涯，从摘要开始
03-23 4379
TS-NODE 可以看出这些不足都来自于一个根本原因，运行之前需要编译。后来我就发现了一个很强大的工具ts-node，来看下ts-node的简介: TypeScript execution environment and REPL for node. 简单的说就是它提供了TypeScript的运行环境，让我们免去了麻烦的编译这一步骤。最简单的例子，在注册ts-node之后，我们就可...
TS-MTS工具箱.xmind
03-18
TS-MTS工具箱功能
ts-12p-2s、ts-16p-2s、ts-24p-2s使用说明 操作手册
09-06
ITC ts-12p-2s、ts-16p-2s、ts-24p-2s操作手册，本文档仅供参考学习使用，使用者请在24小时内删除此资源！严禁用于商业用途，违者后果自负
ts-mock-generator
04-16
ts-mock-generator English | :sparkles: 特征 :package: 开箱即用的模拟生成工具 :face_with_tongue: 通过接口定义返回值接口自动生成模拟数据 :page_facing_up: 支持生成模拟文件以进行二次编辑 :fire: 支持...
ts-audio:ts-audio是一个不可知的库，可轻松使用AudioContext并在浏览器中创建音频播放列表
05-07
ts-audio是一个不可知论且易于使用的库，可与AudioContext API配合使用并创建播放列表。 特征 简单的API，抽象了AudioContext API的复杂性 跨浏览器支持 轻松创建音频播放列表 与任何可编译为JavaScript的语言一起...
koa-ts-node：:rainbow:一个直接使用ts-node和typescript的纯服务器端koa框架
02-03
koa-ts-node 纯服务器端koa框架，直接使用ts-node和typescript。 使用pm2和ts-node 如果这样的话 :star: 星 :star: 在github上 欢迎发表。 产品特点 更灵活的自定义 直接使用打字稿而不编译为js文件。 面向对象...
ES6 Generator函数的语法 （七）
qq_35876316的博客
07-10 346
ES6 中的 Generator函数是一种特殊类型的函数，它允许你控制函数的执行流程，使其在执行过程中可以多次暂停和恢复。Generator 函数在定义时使用星号 *作为后缀。
ES6 Iterator 与 for...of 循环（五）
qq_35876316的博客
07-10 258
对于大型集合，for…of 循环可能不如传统的 for 循环高效，因为每次迭代都需要调用迭代器的 next() 方法。of 循环在现代浏览器和 Node.js 中得到支持，但一些旧的 JavaScript 环境可能不支持。
JS【详解】类 class （ ES6 新增语法 ）
最新发布
朝阳39的博客
07-10 338
本质上，类只是一种特殊的函数。
一个使用Go语言和现代Web技术构建跨平台桌面应用程序开源项目
yunmoon的博客
07-10 749
Wails作为一个桥梁，连接强大的Go后端逻辑与丰富的Web前端界面，允许开发者利用两者的最佳特性来开发应用。
TS-Concat解析
06-01
TS-Concat（Transport Stream Concatenation）是一种用于传输多节目流（MPTS）的技术，它允许将多个TS流串联在一起传输，从而实现多节目流的无缝切换。在接收端，需要对TS-Concat头部进行解析，以便正确地处理多节目...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值