typescript学习(更新中)

news2024/12/28 19:54:14

目录

  • 开发环境搭建
  • 类型如何声明
  • 有哪些类型
  • 编译配置文件

开发环境搭建

npm i -g typescript

tsc检查是否安装成功

类型如何声明

// 先声明再赋值
let a: number
a = 1

// 直接赋值
let b = 1
function sum(a: number, b: number): number {
    return a + b
}
console.log(sum(1, 2))

有哪些类型

在这里插入图片描述

// 可以使用|连接多个类型
let a: number | string

// unknown类型的变量,不能直接赋值给其他变量
let b: unknown
// a = b // 不可
// 可以下面这样写
a = b as number
a = <number>b

// void用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void {}

// never 表示永远不会返回结果
function fn2(): never {
    throw new Error('报错了!')
}

// object {属性名: 属性值, 属性名:属性值}
// 在属性名后边加上?,表示属性可选的
let c: { name: string, age?: number }
c = { name: 'nihao', age: 18 }
c = { name: 'ni' }
// [propName: string]: any 表示任意类型的属性
let d: { name: string, [propName: string]: any}

// 设置函数结构的类型声明
let e: (a: number, b: number) => number
e = (n, m) => {
    return n + m
}
 
// 数组 类型[] Array<类型>
let f: string[]
let g: Array<string>

// 枚举
enum Gender{
    Male = 0,
    Female = 1
}
let h: { gender: Gender }

// &
let i: { name: string } & { age: number }
i = { name: 'aa', age: 18 }

// 类型别名
type myType = 1 | 2 | 3
let j: myType
let k: myType

编译配置文件

创建一个tsconfig.json

{
    /*tsconfig.json 是ts编译器的配置文件,ts编译器可以根据她的信息来对代码进行编译
    "include": [""],用来指定哪些ts文件需要被编译,一个/*表示任意文件,两个/**表示任意文件目录
    "exclude": 不需要被编译的目录,默认["node_modules","bower_components","jspm_packages"]
    "extends":"目录地址", 继承配置文件,可以把两个配置文件合并
    "files":[xxx.ts,xxx.ts]指定被编译的文件列表
    compilerOptions{} 编译器配置
        target: 用来指定ts 编译后的Es版本,默认ES3,,可选值es3,es5,es6,es2015,es2016,es2017,es2018,es2019,es2020,esnext
        lib[] 用来指定项目中要使用的库,一般不动他
        module: 指定要使用的模块化规范,可选值:none commonjs amd system umd es6 es2015 es2020 exnest
        outDir: 用来指定版以后文件所在的目录
        outFile: 将代码合并成一个文件,设置outFile 后 所有的全局作用域中的代码会合并到同一个文件中。
        allowJs: 是否对js文件进行编译,默认false
        checkJs: 是否检查js文件语法
        removeComments: 编译时是否去除注释
        noEmit: 不生成编译后的文件
        noEmitOnError: 当有错误时不生成编译文件

        // 语法检查的属性
        alwaysStrict: 严格模式,用来设置编译后的文件是否使用严格模式,默认false
        noImplicitAny: 不允许使用隐式any
        noImplicitThis: 不允许使用不明确类型this
        strictNullChecks: 严格的检查空值,
        strict: 所有严格模式的总开关,这个属性一定要写在最上面
    */
    "exclude": [
       	"node_modules"
    ],
    "include": ["./src/**/*"]
    "compilerOptions": {
        "module": "commonjs",
        "target": "ES5",
        "sourceMap": true,
        "outDir": "./dist",
       // "outFile": "./dist/app.js"
       "allowJs": false,
       "checkJs": false,
       "removeComments": false,
       "noEmit": false,
       "noEmitOnError": false,
       "strict": false,
       "alwaysStrict": false,
       "noImplicitAny": false,
       "noImplicitThis": false,
       "strictNullChecks": false
    }
}

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

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

相关文章

使用Apache Kafka的Golang实践指南

您是否在寻找构建可扩展、高性能应用程序的方法&#xff0c;这些应用程序可以实时处理流数据&#xff1f;如果是的话&#xff0c;结合使用Apache Kafka和Golang是一个很好的选择。Golang的轻量级线程非常适合编写类似Kafka生产者和消费者的并发网络应用程序。它的内置并发原语&…

httprunner用例结构(前后置)

说明&#xff1a;httprunner 结合 pytest 的前后置方式 1. 用例级别前后置 1.1. setup teardown class TestCaseRefTestcase(HttpRunner):# 用例级别前后置def setup(self):logger.warning("------用例级别前置")def teardown(self):logger.warning("------用…

算法练习:双指针

目录 1. 双指针1.1 移动 "0"1.2 复写 "0"1.3 快乐数&#xff08;快慢指针&#xff09;1.4 盛水最多的容器&#xff08;单调性原则&#xff09;1.5 有效三角形个数1.6 两个数之和1.7 三数之和1.8 四数之和 1. 双指针 1.1 移动 “0” 题目信息&#xff1a; …

线程有几种状态,状态之间的流转是怎样的?

Java中线程的状态分为6种&#xff1a; 1.初始(NEW)&#xff1a;新创建了一个线程对象&#xff0c;但还没有调用start()方法。 2.运行(RUNNABLE)&#xff1a;Java线程中将就绪&#xff08;READY&#xff09;和运行中&#xff08;RUNNING&#xff09;两种状态笼统的称为“运行”…

红黑树的学习

红黑树 红黑树出自一种平衡的二叉查找树&#xff0c;是计算机科学中中用到的一种数据结构 1972年出现&#xff0c;当时被称之为平衡二叉B树。后来&#xff0c;1978年被修改为如今的红黑树 他是一种特殊的二叉查找树&#xff0c;红黑树的每一个节点上都有存储表示节点的颜色 …

WordPress建站入门教程:如何创建菜单和设置前端导航菜单?

前面我们跟大家分享了WordPress如何上传安装WordPress主题&#xff0c;但是启用主题后前端没有看到有导航菜单&#xff0c;这是因为我们还没有创建菜单和设置导航菜单。 JianYue主题导航菜单和右上角菜单 今天boke112百科就继续跟大家分享WordPress站点如何创建菜单和设置前端…

使用 Amazon Bedrock 上的 Claude 3 将架构图转换为 CDK/Terraform 代码

概述 在云原生领域&#xff0c;基础设施即代码 (IaC) 对于开发人员和 DevOps 团队来说是一种不可避免的实践。 最近&#xff0c;Amazon Bedrock 上线了 Claude 3 Sonnet 模型和这个模型的图像转文本能力。这无疑开启了一个新时代&#xff0c;也就是实现架构图与 IaC 工具的无…

【C++】C++11---右值引用和移动语义

目录 1、什么是左值引用和右值引用2、左值引用与右值引用比较3、右值引用使用场景和意义4、右值引用引用左值的分析5、完美转发 1、什么是左值引用和右值引用 传统的C语法中就有引用的语法&#xff0c;而C11中新增了的右值引用语法特性&#xff0c;所以从现在开始我们之前学习…

java-ssm-jsp-大学生评优管理系统的设计与实现

java-ssm-jsp-大学生评优管理系统的设计与实现 获取源码——》公主号&#xff1a;计算机专业毕设大全

kafka报文模拟工具的使用

日常项目中经常会碰到消费kafka某个topic的数据&#xff0c;如果知道报文格式&#xff0c;即可使用工具去模拟发送报文&#xff0c;以此测试代码中是否能正常消费到这个数据。 工具资源已上传&#xff0c;可直接访问连接下载&#xff1a;https://download.csdn.net/download/w…

C++ 标准库类型string

C/C总述&#xff1a;Study C/C-CSDN博客 目录 定义和初始化string对象 string的增 使用push_back进行尾插 使用insert插入 使用append函数完成string的拼接 string的删 使用pop_back进行尾删 使用erase删除 string的查 使用find函数正向搜索第一个匹配项 使用rf…

【MATLAB源码-第159期】基于matlab的胡桃夹子优化算法(NOA)机器人栅格路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 胡桃夹子优化算法&#xff08;Nutcracker Optimization Algorithm, NOA&#xff09;是一个灵感来源于胡桃夹子的故事的元启发式优化算法。这个故事中&#xff0c;胡桃夹子是一个能够将坚果壳轻易地破开以获取内部果仁的工具。…

腾讯云99元服务器有什么猫腻?为什么这么便宜?

腾讯云服务器99元一年是真的吗&#xff1f;真的&#xff0c;99元优惠购买入口 txybk.com/go/99 折合每天8元1个月&#xff0c;腾讯云99元服务器配置为2核2G3M带宽&#xff0c;2024年99元服务器配置最新报价为61元一年&#xff0c;为什么这么便宜&#xff1f;有什么猫腻吗&#…

【工具】Raycast – Mac提效工具

引入 以前看到同事们锁屏的时候&#xff0c;不知按了什么键&#xff0c;直接调出这个框&#xff0c;然后输入lock屏幕就锁了。 跟我习惯的按Mac开机键不大一样。个人觉得还是蛮炫酷的&#xff5e; 调研 但是由于之前比较繁忙&#xff0c;这件事其实都忘的差不多了&#xff0…

网工内推 | 网络工程师,IE认证优先,最高15K,有项目绩效奖金

01 重庆并联网络科技有限公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、负责集成项目的相关实施工作&#xff08;设备上架安装、网络设备配置、服务器相关系统配置安装、相关软件环境搭建及配置等&#xff09; 2、负责项目现场技术维护与技术支持&#xff1b;…

蓝桥杯day6队列-3.3

目录 1.约瑟夫环 1.注意&#xff01;q.push(q.front()); 2.机器翻译 3.小桥的神秘礼盒 4.餐厅排队 1.约瑟夫环 今天学习了队列的STL写法&#xff0c;来试试这个题。 #include<bits/stdc.h> using namespace std;int main() {int n,m;cin>>n>>m;queue&l…

使用docker安装运行rabbitmq---阿里云服务器

目录 0、阿里云没开端口的得要去安全组规则去添加&#xff1a; 1、下载RabbitMQ镜像&#xff1a; 2、查看镜像是否下载成功&#xff0c;得到docker镜像id&#xff1a; 3、运行RabbitMQ: 4、查看RabbbitMQ容器是否启动成功&#xff1a; 5、启动RabbitMQ中的插件管理 6、访…

postman环境变量全局变量设置

postman环境变量、全局变量设置 在公司中&#xff0c;一般会存在开发环境、测试环境、线上环境等&#xff0c;如果需要在不 同的环境下切换做接口测试&#xff0c;显然我们需要把所有接口的域名进行修改&#xff0c;如果接 口测试用例较多&#xff0c;那么修改会非常费力&…

three.js 射线Ray,三维空间中绘制线框

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs"></div> <div>{{ res1 }}</div> <div>{{ res2 }}</div><…

vue3的开发小技巧

「总之岁月漫长&#xff0c;然而值得等待。」 目录 父组件调用子组件函数如何访问全局api 父组件调用子组件函数 ref, defineExpose //父组件 代码 <child ref"ch">this.$refs.ch.fn();//子组件 函数抛出 const fn () > { }; defineExpose({ fn });如何…