【TypeScript 一点点教程】

news2024/11/15 10:45:40

文章目录

  • 一、开发环境搭建
  • 二、基本类型
    • 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:string
        age: number
        sayHello():void;
    }
    
    class MyClass implements myInterface{
        name: string;
        age: number;
        sayHello(): void {
            console.log('大家好');
        }
        
    }
})

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

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

相关文章

操作系统——进程与线程(死锁)

1)为什么会产生死锁?产生死锁有什么条件? 2)有什么办法解决死锁? 一、死锁 死锁:多个程序因竞争资源而造成的一种僵局(互相等待对方手里的资源),使得各个进程都被阻塞,…

02.C++入门基础(下)

1.函数重载 C支持在同一作用域中出现同名函数,但是要求这些同名函数的形参不同,可以是参数个数不同或者类型不同。这样C函数调用就表现出了多态行为,使用更灵活。C语言是不支持同一作用域中出现同名函数的。 1、参数类型不同 2、参数个数不同…

volatile,最轻量的同步机制

目录 一、volatile 二、如何使用? 三、volatile关键字能代替synchronized关键字吗? 四、总结: 还是老样子,先来看一段代码: 我们先由我们自己的常规思路分析一下代码:子线程中,一直循环&…

DocRED数据集

DocRED数据集文件夹包含多个JSON文件,每个文件都有不同的用途。以下是这些文件的用途解释以及哪个文件是训练集: 文件解释 dev.json:包含开发集(验证集)的数据,通常用于模型调优和选择超参数。 label_map…

java面向对象进阶进阶篇--《包和final》

一、前言 今天还是面向对象相关知识点的分享,包是写小型项目时不可或缺的存在,final关键字用的地方不算太多。idea会提示我们导包,有时会自动导包,确实十分方便。但是我们也不能不会自己去导包。 面向对象篇不出意外的话本周就要…

【线性代数】矩阵变换

一些特殊的矩阵 一,对角矩阵 1,什么是对角矩阵 表示将矩阵进行伸缩(反射)变换,仅沿坐标轴方向伸缩(反射)变换。 2,对角矩阵可分解为多个F1矩阵,如下: 二&a…

python打包exe文件-实现记录

1、使用pyinstaller库 安装库: pip install pyinstaller打包命令标注主入库程序: pyinstaller -F.\程序入口文件.py 出现了一个问题就是我在打包运行之后会出现有一些插件没有被打包。 解决问题: 通过添加--hidden-importcomtypes.strea…

“微软蓝屏”事件引发的深度思考:网络安全与系统稳定性的挑战与应对

“微软蓝屏”事件暴露了网络安全哪些问题? 近日,一次由微软视窗系统软件更新引发的全球性“微软蓝屏”事件,不仅成为科技领域的热点新闻,更是一次对全球IT基础设施韧性与安全性的深刻检验。这次事件,源于美国电脑安全…

【Vue3】工程创建及目录说明

【Vue3】工程创建及目录说明 背景简介开发环境开发步骤及源码 背景 随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日…

全网最全最详细的C++23 标准详解:核心语言改进与新特性

1. 简介 C23 是由 C 标准委员会最新发布的标准,旨在进一步提升 C 语言的功能和开发效率。作为一项重要的编程语言标准更新,C23 引入了多个关键的新特性和改进,使开发者能够编写更高效、简洁和安全的代码。 与 C20 相比,C23 的变…

3112.力扣每日一题7/18 Java 迪杰斯特拉(Dijkstra)算法

博客主页:音符犹如代码系列专栏:算法练习关注博主,后期持续更新系列文章如果有错误感谢请大家批评指出,及时修改感谢大家点赞👍收藏⭐评论✍ 目录 迪杰斯特拉(Dijkstra)算法 解题思路 解题过…

C++学习指南(三)——模板

欢迎来到繁星的CSDN。本期内容主要包括模板template。 目录 一、什么是模板? 二、函数模板 模板的定义方式 模板的实例化(确定参数的类型) 隐式实例化 显式实例化 实例化顺序 三、类模板和模板类 类模板的实例化 一、什么是模板&#xff1…

智慧职校就业管理:开启校园招聘会新模式

在智慧职校的就业管理系统中,校园招聘会的出现,为学生们提供了一个展示自我、探寻职业道路的舞台,同时也为企业搭建了一座直面未来之星的桥梁。这一功能,凭借其独特的优势与前沿的技术,正在重新定义校园与职场之间的过…

2024中国大学生算法设计超级联赛(1)

🚀欢迎来到本文🚀 🍉个人简介:陈童学哦,彩笔ACMer一枚。 🏀所属专栏:杭电多校集训 本文用于记录回顾总结解题思路便于加深理解。 📢📢📢传送门 A - 循环位移解…

python-爬虫实例(5):将进酒,杯莫停!

目录 前言 将进酒,杯莫停! 一、浇给 二、前摇 1.导入selenium库 2.下载浏览器驱动 三、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 博主身为一个农批,当然要尝试爬取王者荣耀的东西啦。 将进…

萝卜快跑突然就火了,背后发生了什么?

近日,百度旗下的自动驾驶出行平台“萝卜快跑”突然在网络上火了起来,成为热门话题。那么,这背后到底发生了什么? 1. 数字误传引发热议 首先,一些误传的数字在传播中起到了推波助澜的作用。例如,百度在2023…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第三十八章 驱动模块编译进内核

i.MX8MM处理器采用了先进的14LPCFinFET工艺,提供更快的速度和更高的电源效率;四核Cortex-A53,单核Cortex-M4,多达五个内核 ,主频高达1.8GHz,2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

PCL 批量处理点云文件

系列文章目录 文章目录 系列文章目录前言一、PCL是什么?二、配置PCL环境三、使用步骤1.引入库2.主函数 总结 前言 点云处理时往往会需要对多个点云进行处理,比如在预处理,保存点云时。下面提供一个简单的点云批量转换例子,PCD文件…

MongoDB 文档存储

安装 下载: Download MongoDB Community Server | MongoDB 说明: 现在基本都安装的是4.4以后的版本。安装完成后使用 mongod 来查看是否安装成功 会输出一堆内容 而如果想要操作数据库,则需要安装一个工具,mongosh-2.2.12-x64.m…

JavaSE从零开始到精通(七) - Stream流

1. 概述 Java 8引入了Stream API,它提供了一种高效且易于使用的处理集合数据的方式。Stream流可以被认为是一种高级的迭代器,允许我们在集合上进行复杂的操作,例如过滤、映射、排序、归约等,而这些操作可以链式调用,形…