这些TypeScript的基础三

最新推荐文章于 2023-03-08 09:23:41 发布
最新推荐文章于 2023-03-08 09:23:41 发布
阅读量176 收藏
点赞数 3
分类专栏： TypeScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZ___jh/article/details/118389701
版权

webpack

通常情况下，实际开发中我们都需要使用构建工具对代码进行打包，TS同样也可以结合构建工具一起使用，下边以webpack为例介绍一下如何结合构建工具使用TS.

步骤:

  1. 初始化项目

    进入项目根目录,执行命令npm init -y — 创建package.json文件

  2. 下载构建工具

    npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin clean-webpack-plugin

    共安装了7个包:

    • webpack — 构建工具webpack
    • webpack-cli — webpack的命令行工具
    • webpack-dev-server — webpack的开发服务器
    • typescript — ts编译器
    • ts-loader — ts加载器，用于在webpack中编译ts文件
    • html-webpack-plugin — webpack中html插件，用来自动创建html文件
    • clean-webpack-plugin — webpack中的清除插件，每次构建都会先清除目录

  3. 根目录下创建webpack的配置文件webpack.config.js

    const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    optimization:{
        minimize: false // 关闭代码压缩，可选
    },

    entry: "./src/index.ts",
    
    devtool: "inline-source-map",
    
    devServer: {
        contentBase: './dist'
    },

    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },

    resolve: {
        extensions: [".ts", ".js"]
    },
    
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                   loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'TS测试'
        }),
    ]
}

  4. 根目录下创建tsconfig.json，配置可以根据自己需要

    {
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict": true
    }
}

  5. 修改package.json添加如下配置

    {
  ...,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open chrome.exe"
  },
  ...
}

  6. 在src下创建ts文件，并在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器

类 class

要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象.不同的类可以用来创建不同的对象

定义类

class 类名{
    属性名:类型;
    
    constructor(参数:类型){
        this.属性名 = 参数;
    }
    
    方法名(){ }
}

示例:

class Person{
  name:string;
  age:number;

  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
    // 大家好,我是Jackson,今年20岁
  }
}
// 使用类
const p = new Person('Jackson',20);
p.sayHello();

面向对象的特点

封装

  • 对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装

  • 默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置

  • 只读属性（readonly）：

    如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改

  • TS中属性具有三种修饰符：

    • public（默认值），可以在类、子类和对象中修改
    • protected ，可以在类、子类中修改
    • private ，可以在类中修改
// public(默认值) --- 可以在类,子类和对象中修改
class Person{
  public name:string; //写或者什么都不写都是public
  public age:number;

  constructor(name:string,age:number){
    this.name = name; //可以在类中修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中可以修改
  }
}

const p = new Person('Jackson',20);
p.name = 'yyqx'; //可以通过对象修改
p.sayHello();

// protected --- 可以在类,子类中修改
class Person{
  protected name:string;
  protected age:number;

  constructor(name:string,age:number){
    this.name = name; //可以修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中也可以你修改
  }
}

const p = new Person('Jackson',20);
// p.name = 'yyqx'; //不能修改
p.sayHello();

// private --- 可以在类中修改
class Person{
  private name:string;
  private age:number;

  constructor(name:string,age:number){
    this.name = name; //可以修改
    this.age = age;
  }

  sayHello(){
    console.log(`大家好,我是${this.name},今年${this.age}岁`);
  }

}

class aa extends Person{
  constructor(name:string,age:number){
    super(name,age);
    this.name = name; //子类中不能修改
  }
}

const p = new Person('Jackson',20);
p.name = 'yyqx';
p.sayHello();

  • 属性存取器

    对于一些不希望被任意修改的属性可以将其设置为private;

    直接将其设置为private将导致无法再通过对象修改其中的属性;

    可以在类中定义一组读取,设置属性的方法,这种对属性读取或设置的属性被称为属性的存取器;

    读取属性的方法叫做setter方法,设置属性的方法叫做getter方法;

    class Person{
  private name:string;

  constructor(name:string,age:number){
    this.name = name;
  }

  sayHello(){
    return this.name;
  }

}

const p = new Person('Jackson',20);
console.log(p.name); //Jackson 通过getter读取name属性
p.name = 'yyqx'; //

  • 静态属性

    静态属性(方法),也称为类属性. 使用静态属性无需创建实例,通过类即可直接使用;

    静态属性(方法)使用static开头;

    class Person{
  static PI=3.1415926;
  static sum( num1:number, num2:number){
    return num1 + num2;
  }
}
console.log(Person.PI);
console.log(Person.sum(12,45)); //57

  • this : 在类中,使用this表示当前对象

继承

  • 通过继承可以将其他类中的属性和方法引入到当前类中

  • class Person{
  name:string;
  age:number;

  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }
}

class aa extends Person{
  bark(){
    console.log(`${this.name}在这里`); //旺财在这里
  }
}

const p = new aa('旺财',4);
p.bark();

  • 通过继承可以在不修改类的情况下完成对类的扩展

  • 重写 – 发生继承时,如果子类中的方法会替换掉父类中的同名方法就称为方法的重写. 在子类中可以使用supper来完成对父类的引用

    class Person{
  name:string;
  age:number;

  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }

  run(){
    console.log('父类中的run方法');
  }
}

class aa extends Person{
  bark(){
    console.log(`${this.name}在这里`); //旺财在这里
  }

  run(){
    console.log('子类中的run方法,会重写父类中的run方法');
  }
}

const p = new aa('旺财',4);
p.bark();
p.run(); //子类中的run方法,会重写父类中的run方法

  • 抽象类(abstract class) – 它是专门用来被其他类所继承的类,它只能被其他类所继承不能用来创建实例.

    // 使用abstract开头的方法叫做抽象方法，抽象方法没有方法体只能定义在抽象类中，继承抽象类时抽象方法必须要实现
abstract class Person{
  abstract run():void;
  break(){
    console.log('break方法');
  }
}

class aa extends Person{
  run(){
    console.log('run方法');
  }
}

总结

  1. webpack打包时要初始化项目,下载构建工具,然后配置修改才可以启动
  2. 定义类class
  3. TS属性的三种修饰符:
    • public（默认值），可以在类、子类和对象中修改
    • protected ，可以在类、子类中修改
    • private ，可以在类中修改
  4. 静态属性 static
ZZZ --- jh
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
TypeScript基础入门教程之三重斜线指令详解
10-17
主要给大家介绍了关于TypeScript基础入门教程之三重斜线指令的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
fm-typescript3-fondamentals:Frontendmasters Typescript 3基础课程
04-03
Frontendmasters课程存储库的副本-打字稿3-基础知识 我添加了自己的分支机构来解决本课程中提出的挑战，以提醒自己 所有权利均属于Mike.Works（请参阅下文） 依存关系 确保您的系统设置有 Node.js-使用可使安装变得...
关于webpack webpack-cli webpack-dev-server版本问题
zsmxhn的博客
06-07 646
当运行npm webpack-dev-server 时出现以下错误 楼主版本为： 只需要在package.json中 配置 “start”: “webpack serve --open Chrome.exe”（默认打开谷歌），然后以 npm run start命令运行即可
typescript 学习第二周
xixi_csdn的博客
02-13 146
学习目标： 一周计划： 接口、类、函数，将其基本概念看完。 记录出来与javascript不一样的地方 学习内容： 1、 接口 2、 类 3、 函数 文章目录学习目标：学习内容：前言一.接口1.二.类1.三.函数1. 前言 上周学完了基础类型和类型声明，东西还是蛮多的，也许对有后端经验的人比较友好，但是我觉得还是有些吃力的，需要多写多练，去巩固，毕竟难的只是他的写法。 一.接口 1. 二.类 1. 三.函数 1. ...
TypeScript基础
weixin_44169027的博客
03-08 1405
ypeScript是JavaScript的一个超集，任何合法的JavaScript代码都能在TypeScript中运行，它给原生的JavaScript带来了强类型的定义
typescript 基础
qq_24832277的博客
11-16 586
TypeScript简介 1、TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript，是由微软开发的开源、跨平台的编程语言。 2、TypeScript是为大型应用的开发而设计，并且可以编译为JavaScript。 3、TypeScript 是 JavaScript 的一个超集，TypeScript扩展了JavaScript的语法，任何现有的Java
TypeScript基础教程
IT飞牛
09-25 4042
JS已有类型和TS新增类型。原始类型：string、number、boolean、null、undefined、symbol对象类型：object（数组、对象、函数等对象）TS新增类型联合类型、自定义类型（类型别名）、接口、元组、字面量类型、枚举、any等。
TypeScript基础类型
吴佩佩佩佩的博客
07-01 1881
TypeScript的基础类型主要有布尔值、数字、字符串、数组、元组、枚举、Any、Void、Null 、Undefined、Never、Object等。 布尔值 用boolean表示，值只有true和false。 let a: boolean = true; 数字 同JavaScript，都是浮点数，用number表示数字类型。 TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。 let a: number = 1; let a: number = 0xf00d;
TypeScript基础知识
lyh0902的博客
01-13 790
ts基础知识以及常见面试题
Typescript基础
m0_58626552的博客
03-08 604
初识 TypeScript TypeScript 的介绍 TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集，最终会被编译为JavaScript代码。 2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript TypeScript的作者是安德斯·海尔斯伯格，C#的首席架构师。它是开源和跨平台的编程语言。 TypeScript扩展了JavaScript的语法，所以任何现有的Ja
TypeScript基础结合Vue3应用
weixin_43323097的博客
08-17 863
TypeScript基础结合Vue3应用
TypeScript基础入门
w1404273025的博客
07-25 290
TypeScript基础入门
TypeScript介绍与基础认识（36）
01-08
3、TypeScript是JavaScript的超集，遵循最新的ES6、ES5规范。TypeScript扩展了JavaScript的语法。 4、谷歌也在大力支持TypeScript的推广，谷歌的angular2.x+就是基于TypeScript语法。 5、最新的Vue、Reac
TypeScript手册
12-14
适合人群：具备一定编程基础，想学习TypeScript或者需要经常查询TypeScript知识的开发者。 能学到什么：1️⃣了解TypeScript的来源及现状、与其他技术融合的情况；2️⃣TypeScript的语法和详细用法；3️⃣书写生命...
vue3+typescript创建的简单项目
11-24
1.vue3+typescript创建的简单项目； 2.使用vue-cli创建项目； 3.使用了vue-router； 4.实现了登录、商品管理、用户管理、角色管理、权限修改等简单、基础通用功能； 5.通过此项目可以学会typescript的简单应用方式；...
node-v4.8.6-win-x64.zip
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
基础运维技能（下）md格式笔记
最新发布
05-07
基础运维技能（下）md格式笔记
node-v8.1.2-linux-armv7l.tar.xz
05-07
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
黑马程序员 C语言学习笔记
05-07
持续更新
TypeScript基础语法
07-08
下面是 TypeScript 的一些基础语法： 1. 变量声明和类型注解: ```typescript let num: number = 10; let name: string = "John"; let isTrue: boolean = true; ``` 2. 函数定义和类型注解: ```typescript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值