【TypeScript 一点点教程】

文章目录

  • 一、开发环境搭建
  • 二、基本类型
    • 2.1 类型声明
    • 2.2 基本类型
  • 三、编译
    • 3.1 tsc命令
    • 3.2 tsconfig.json
      • 3.2.1 基本配置项
        • include
        • exclude
        • extends
        • files
      • 3.2.2 compilerOptions编译器的配置项
  • 四、面向对象
    • 4.1 类
    • 4.2 继承
    • 4.3 抽象类
    • 4.4 接口


一、开发环境搭建

  1. 下载Node.js《NodeJs(压缩包版本)安装与配置》
  2. npm 全局安装 TypeScript
npm i -g typescript

二、基本类型

2.1 类型声明

  • 类型声明是TS非常重要的一个特点
  • 通过类型声明可以指定TS中变量(参数,形参)的类型
  • 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错
  • 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值
  • 语法:
let 变量:类型;
let 变量:类型 = 值;
function fn(参数:类型, 参数: 类型):类型{}

Ts也可以自动类型判断。

2.2 基本类型

在这里插入图片描述

三、编译

3.1 tsc命令

使用tsc命令可以将ts文件编译成js文件

tsc [文件名].ts 

使用 tsc -w命令可以使ts文件监测到变化时,自动编译

tsc [文件名].ts -w

但是每个文件都这样做就会十分麻烦。
可以在项目目录下创建一个tsconfig.json,然后在该目录下运行tsc命令,会发现所有文件皆完成了编译。当然也可以在目录下使用tsc -w

3.2 tsconfig.json

关于tsconfig.json文件,不但可以自己创建,还可以使用在tsc -init 命令自动生成。
接下来来了解一下tsconfig.json中都有哪些配置项

3.2.1 基本配置项

include

该选项用于设置哪些目录下的文件需要编译。

exclude

该选项是编译时忽略哪些目录

extends

定义继承哪些文件。

"extends":"./configs/base"
files

指定哪些文件需要编译,一般只用于小项目。

3.2.2 compilerOptions编译器的配置项

"compilerOptions": {//target 用来指定ts被编译为的ES的版本"target": "es2015",// module 指定要使用的模块化的规范"module":"es2015",//lib用来指定项目中要使用的库"lib": ['dom','es6'],//outDir用来指定编译后文件所在的目录"outDir": "./dist",//将代码合并为一个文件"outFile": "./dist/app.js",//是否对js文件进行编译,默认是false"allowJs": true,//是否检查js代码是否符合规范"checkJs": true,//是否移除注释。"removeComments": true,//不生成编译后的文件(不怎么用)//"noEmit": false,//当有错误时不生成编译后的文件。"noEmitOnError": true,//设置编译后的文件是否使用严格模式,默认false"alwaysStrict":false//不允许隐式的any 类型,(隐式的any 类型即 function(a,b)中的a和b皆为隐式的any类型)"noImplicitAny":false//不允许不明确类型的this ()// function(){// 不明确类型的this		//  alert(this);//} 改为  function(this: Window)"noImplicitThis": true,//严格的检查空值"strictNullChecks": true,//所以严格检查的总开关。"strict":true,
}

四、面向对象

4.1 类

class Dog{private name:string;private age:number;//静态只读static readonly bark ='汪汪'//构造函数constructor(name: string,age: number){this.name = name;this.age = age;}getName(){return this.name;}setName(value: string){this.name = value;}
}

4.2 继承

(function(){class Animal{name:string;age:number;//构造函数constructor(name: string,age: number){this.name = name;this.age = age;  }sayHello(){console.log('动物叫')}}class Dog extends Animal{sayHello() {super.sayHello();}}class Cat extends Animal{}
})

4.3 抽象类

(function(){abstract class Animal{name:string;constructor(name: string){this.name = name;}//定义抽象方法abstract sayHello():void}class Dog extends Animal{sayHello(): void {throw new Error("Method not implemented.");}   }
})

4.4 接口

(function(){interface myInterface{name:stringage: numbersayHello():void;}class MyClass implements myInterface{name: string;age: number;sayHello(): void {console.log('大家好');}}
})

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【全国大学生电子设计竞赛】2023年B题

🥰🥰全国大学生电子设计大赛学习资料专栏已开启,限时免费,速速收藏~

IP数据报结构详解:从基础到进阶

目录 IP数据报的格式 IP数据报首部的固定部分 IP数据报首部的可变部分 实例分析:数据报的分片 生存时间(TTL)与协议 首部检验和 总结 在网络通信中,IP数据报是至关重要的基本单元。本文将带您深入了解IP数据报的格式及其各个…

Python酷库之旅-第三方库Pandas(041)

目录 一、用法精讲 136、pandas.Series.ne方法 136-1、语法 136-2、参数 136-3、功能 136-4、返回值 136-5、说明 136-6、用法 136-6-1、数据准备 136-6-2、代码示例 136-6-3、结果输出 137、pandas.Series.eq方法 137-1、语法 137-2、参数 137-3、功能 137-4、…

数据结构-C语言-排序(4)

代码位置: test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言: 1.1-排序定义: 排序就是将一组杂乱无章的数据按照一定的规律(升序或降序)组织起来。(注:我们这里的排序采用的都为升序) 1.2-排…

如何借助生成式人工智能引领未来的科技狂潮

如何借助生成式人工智能引领未来的科技狂潮 1. 生成式AI的现状1.1 技术基础1.1.1 深度学习1.1.2 生成对抗网络(GANs)1.1.3 变分自编码器(VAEs) 1.2 主要应用1.2.1 语言模型1.2.2 图像生成1.2.3 音频与视频生成 2. 未来的发展趋势2…

Windows下帆软BI(finebi)单机部署移植(Tomcat)攻略

一、基础环境 操作系统:Windows 10 64bit 帆软BI 版本:V9.0/V10.0 HTTP工具:Tomcat 外置数据库:Oracle 11g 实验内容:将已经部署好的帆软BI从一台电脑移植到另一台电脑 二、前期准备 1、做好外置数据库移植&…

<数据集>苹果腐烂识别数据集<目标检测>

数据集格式:VOCYOLO格式 图片数量:978张 标注数量(xml文件个数):978 标注数量(txt文件个数):978 标注类别数:2 标注类别名称:[fresh_apple, rotten_apple] 序号类别名称图片数框数1fresh_apple520922…

2022 年中高职组“网络安全”赛项-海南省省竞赛任务书-1-B模块-B-4Web渗透测试

前言 本章节我将尝试操作B-4模块的渗透测试,搭建环境很难,还望大家点点赞多多支持! 任务概览 最后4、5、6有一定的难度。 环境要求 kali Linux192.168.41.2Web服务器(假设为PYsystem 2020 模拟平台)192.168.41.7交换…

日常开发记录分享——C#控件ToolTip实现分栏显示内容

文章目录 需求来源实现思路实施请看VCR等等别走,有优化 需求来源 需要在鼠标浮动到指定位置后提示出详细的信息,一开始使用的tooltip实现,但是里面的内容效果并不理想,需要有条理性,于是就想到能不能将展示的东西分列…

代理协议解析:如何根据需求选择HTTP、HTTPS或SOCKS5?

代理IP协议是一种网络代理技术,可以实现隐藏客户端IP地址、加速网站访问、过滤网络内容、访问内网资源等功能。常用的IP代理协议主要有Socks5代理、HTTP代理、HTTPS代理这三种。代理IP协议主要用于分组交换计算机通信网络的互联系统中使用,只负责数据的路…

Linux(CentOS)的“应用商城” —— yum

Linux(CentOS)的“应用商城” —— yum 关于 yum 和软件包Linux 系统(CentOS)的生态yum 相关操作yum 本地配置yum 安装 lrzsz.x86_64 关于 yum 和软件包 首先 yum 是软件下载安装管理的客户端,类似各种手机里的“应用…

面试场景题系列--(1)如果系统的 QPS 突然提升 10 倍该怎么设计?--xunznux

1. 如果系统的 QPS 突然提升 10 倍该怎么设计? 1.1 硬件的扩展微服务的拆分 如果所有的业务包括交易系统、会员信息、库存、商品等等都夹杂在一起,当流量一旦起来之后,单体架构的问题就暴露出来了,机器挂了所有的业务就全部无法…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境,它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

“微软蓝屏”事件,给IT行业带来的宝贵经验和教训

“微软蓝屏”事件是指2024年7月19日发生的一次全球性技术故障,主要涉及微软视窗(Windows)操作系统及其相关应用和服务。 以下是对该事件的详细解析: 一、事件概述 发生时间:2024年7月19日事件影响:全球多个…

暑期c++ 命名空间

今天是暑期第一天开始写c笔记&#xff0c;新起点&#xff0c;新开始加油 我们先来看两串代码 这串代码编译没有问题 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> int rand 14; int main(void) {int rand 14;printf("%d\n", rand);return 0; }但是…

鸽哒IM即时通讯安卓+苹果双系统源码20240723(反编译+二次开发版)

功能特点&#xff1a; 1、该软件支持加好友、消息私聊、消息群聊、朋友圈、红包、语音、视频、表情包&#xff0c;定位等。 2、此外&#xff0c;该软件还支持阅后即焚、消息过期自动销毁、支持3DES加密传输、支持端到端传输&#xff0c;保护消息隐私。 3、后台使用的是酷信的…

Java面试八股之详细阐述Spring的DI和IOC

详细阐述Spring的DI和IOC Spring框架的两大核心特性之一就是控制反转&#xff08;Inversion of Control, IoC&#xff09;&#xff0c;另一个密切相关的是依赖注入&#xff08;Dependency Injection, DI&#xff09;。这两个概念是Spring实现松耦合、可测试和可管理软件组件的…

JMeter:BeanShell到JSR223迁移中的注意事项

前言 在之前的文章JMeter&#xff1a;BeanShell向JSR223迁移过程遭遇的java标准库不可用问题-如何切换JDK版本中引用了一段使用BeanShell对入参进行加密的脚本&#xff0c;迁移到JSR223&#xff0c;虽然更换JDK后编译通过&#xff0c;看似也可以执行了&#xff0c;但是其实那段…

强化数字科技基石:深化基础理论研究

加强数字科技基础理论研究并增加对其的资金投入&#xff0c;对于推动科技进步、培养创新人才以及构建具有国际竞争力的科技创新体系都具有深远意义。同时为了加强数字科技基础理论研究并推动产业园的发展&#xff0c;我们可以从以下几个方面进行&#xff1a; 一、加强数字科技…

【vue前端项目实战案例】Vue3仿今日头条App

本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 Vue Router webpack TypeScript 等技术栈实现的一款新闻资讯类App&#xff0c;适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App&#xf…