typescript使用手册

安装依赖

yarn add typescript -dev

使用

yarn tsc xxx.ts

生成配置文件tsconfig.json

yarn tsc --init

原始数据类型

const a: string = 'foobar'const b: number = 100 // NaN Infinityconst c: boolean = true // false// 在非严格模式(strictNullChecks)下,
// string, number, boolean 都可以为空
// const d: string = null
// const d: number = null
// const d: boolean = nullconst e: void = undefinedconst f: null = nullconst g: undefined = undefined// Symbol 是 ES2015 标准中定义的成员,
// 使用它的前提是必须确保有对应的 ES2015 标准库引用
// 也就是 tsconfig.json 中的 lib 选项必须包含 ES2015
const h: symbol = Symbol()

配置文件中需要再lib中加上对应的库

 "lib": ["ES2015", "DOM"], // DOM解决bom和dom的库引用  

在使用的过程中可能会出现命名重复的问题。在每个js文件中加一个export {}

对象类型

// Object 类型
export {} // 确保跟其它示例没有成员冲突
// object 类型是指除了原始类型以外的其它类型
const foo: object = function () {} // [] // {}
// 如果需要明确限制对象类型,则应该使用这种类型对象字面量的语法,或者是「接口」
const obj: { foo: number, bar: string } = { foo: 123, bar: 'string' }

数组类型

// 数组类型
export {} // 确保跟其它示例没有成员冲突
// 数组类型的两种表示方式
const arr1: Array<number> = [1, 2, 3]
const arr2: number[] = [1, 2, 3]
// 案例 -----------------------
// 如果是 JS,需要判断是不是每个成员都是数字
// 使用 TS,类型有保障,不用添加类型判断
function sum (...args: number[]) {return args.reduce((prev, current) => prev + current, 0)
}
sum(1, 2, 3) // => 6

元组

const tuple: [number, string] = [18, 'zce']
// const age = tuple[0]
// const name = tuple[1]
const [age, name] = tuple
// ---------------------
const entries: [string, number][] = Object.entries({foo: 123,bar: 456
})
const [key, value] = entries[0]
// key => foo, value => 123

枚举

// 一定声明为常量,避免生成的代码里还有对应的枚举声明
const enum PostStatus {Draft,Unpublished,Published
}
const post = {title: 'Hello TypeScript',content: 'TypeScript is a typed superset of JavaScript.',status: PostStatus.Draft // 3 // 1 // 0
}

函数

function func1 (a: number, b: number = 10, ...rest: number[]): string {return 'func1'
}
func1(100, 200)
func1(100)
func1(100, 200, 300)
// -----------------------------------------
const func2: (a: number, b: number) => string = function (a: number, b: number): string {return 'func2'
}

类型断言

// 假定这个 nums 来自一个明确的接口
const nums = [110, 120, 119, 112]
const res = nums.find(i => i > 0)
// const square = res * res
const num1 = res as number
const num2 = <number>res // JSX 下不能使用

接口

interface Post {title: stringcontent: stringsubtitle?: stringreadonly summary: string // 只读属性,第一次声明后不可修改
}
const hello: Post = {title: 'Hello TypeScript',content: 'A javascript superset',summary: 'A javascript'
}
// hello.summary = 'other'
// ----------------------------------
interface Cache {[prop: string]: string // 可动态添加属性
}
const cache: Cache = {}
cache.foo = 'value1'
cache.bar = 'value2'

class Person {public name: string // = 'init name'private age: number // 外部不能直接访问protected readonly gender: boolean // 子类可以访问, 设置readonly只读属性后,constructor (name: string, age: number) {this.name = namethis.age = agethis.gender = true}sayHi (msg: string): void {console.log(`I am ${this.name}, ${msg}`)console.log(this.age)}
}class Student extends Person {// 构造函数私有化后外部不能直接实例化,需要实例化时需要类提供对应的静态的实例化方法。private constructor (name: string, age: number) { super(name, age)console.log(this.gender)}static create (name: string, age: number) {return new Student(name, age)}
}const tom = new Person('tom', 18)
console.log(tom.name)
// console.log(tom.age)
// console.log(tom.gender)
// 调用类提供的实例化方法创建实例对象
const jack = Student.create('jack', 18)

类和接口

interface 声明接口 implements 去实现

interface Eat {eat (food: string): void
}
interface Run {run (distance: number): void
}
class Person implements Eat, Run {eat (food: string): void {console.log(`优雅的进餐: ${food}`)}run (distance: number) {console.log(`直立行走: ${distance}`)}
}
class Animal implements Eat, Run {eat (food: string): void {console.log(`呼噜呼噜的吃: ${food}`)}run (distance: number) {console.log(`爬行: ${distance}`)}
}

抽象类

abstract 声明一个抽象类或者方法,子类去具体实现对应的方法即可

abstract class Animal {eat (food: string): void {console.log(`呼噜呼噜的吃: ${food}`)}// 声明一个抽象方法abstract run (distance: number): void
}
class Dog extends Animal {// 实现抽象方法run(distance: number): void {console.log('四脚爬行', distance)}
}
const d = new Dog()
d.eat('嗯西马')
d.run(100)

泛型

function creatArr (length: number, content: number):number[] {return Array(length).fill(content)
}
// 使用泛型
function createArray<T> (length: number, value: T): T[] {const arr = Array<T>(length).fill(value)return arr
}
// 实际使用时再给出对应的类型
createArray<string>(3, '123')
createArray<number>(3, 123)

类型声明

解决在定义时没有声明类型的时候,我们在使用时先看有没有对应的声明模块,如"@types/lodash",没有时使用declare 自己去声明

import { camelCase } from 'lodash'
import qs from 'query-string'
qs.parse('?key=value&key2=value2')
// 类型声明
// declare function camelCase (input: string): string
const res = camelCase('hello typed')

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

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

相关文章

mysql原理--undo日志2

1.概述 上一章我们主要唠叨了为什么需要 undo日志 &#xff0c;以及 INSERT 、 DELETE 、 UPDATE 这些会对数据做改动的语句都会产生什么类型的 undo日志 &#xff0c;还有不同类型的 undo日志 的具体格式是什么。本章会继续唠叨这些 undo日志 会被具体写到什么地方&#xff0c…

软件测试|Pydantic详细介绍与基础入门

简介 Pydantic 是一个强大的 Python 库&#xff0c;用于数据验证和解析&#xff0c;特别是用于处理 JSON 数据。它的主要目标是使数据验证和解析变得简单、直观和可维护。本文将介绍 Pydantic 的基础知识&#xff0c;包括如何定义模型、验证数据以及处理错误。 什么是 Pydant…

VMware安装CentOS7虚拟机

VMware 安装 获取 VMware 安装包 下载地址&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1ELR5NZa7rO6YVplZ1IUigw?pwdplz3 提取码&#xff1a;plz3 包括&#xff1a;当然&#xff0c;也可以自己去别的地方下载&#xff0c;WMware 版本都差不多&#xff0c;现在用的比…

快速排序学习笔记

代码框架 // 在数组nums将下标从left到right中进行从小到大排序// 原理是先将一个元素排好序&#xff0c;然后将其他的元素排好序void sort(int[] nums, int left, int right) {if (left > right) {return;}// 对数组nums[left,right]进行切分&#xff0c;使得nums[left,p-1…

软件测试|QtDesigner配置以及使用

简介 上一篇文章我们介绍了PyQt5环境的安装和配置&#xff0c;并且安装了Qt tools工具&#xff0c;本文我们将介绍如何使用Qt tools的QtDesigner如何使用。 QtDesigner 的启动和入门 打开我们的项目从顶部菜单栏选择&#xff1a;Tools -> ExternalTools -> QtDesigner…

基于TCP的半双工网络编程实践

首先我们先了解一下什么是半双工通信&#xff1f; 半双工数据传输允许数据在两个方向上传输&#xff0c;但是在某一时刻&#xff0c;只允许数据在一个方向上传输&#xff0c;它实际上是一种切换方向的单工通信。 TCP服务端代码&#xff1a; #include <stdio.h> #inclu…

Blob 和 File 的区别,以及 Blob、File、Base64 三种类型的相互转换

一、 Blob 和 File 的区别 Blob 和 File 都是 JavaScript 中用于处理二进制数据的对象&#xff0c;但它们有一些区别。 Blob 定义&#xff1a; Blob 表示不可变的、原始数据的类文件对象。它通常用于存储大块的二进制数据&#xff0c;比如图像、音频或视频文件等。 特点&…

如何在免费云Colab上使用扩散模型生成图片?

前言 在人工智能技术的迅猛发展下&#xff0c;内容生成领域也迎来了一系列创新的突破。其中&#xff0c;使用扩散模型&#xff08;如Stable Diffusion&#xff09;从文字生成图片的AI技术备受瞩目。这一技术的出现&#xff0c;为我们创造栩栩如生的图像提供了全新的可能性。本…

MongoDB - 库、集合、文档(操作 + 演示 + 注意事项)

目录 一、MongoDB 1.1、简介 a&#xff09;MongoDB 是什么&#xff1f;为什么要使用 MongoDB&#xff1f; b&#xff09;应用场景 c&#xff09;MongoDB 这么强大&#xff0c;是不是可以直接代替 MySQL &#xff1f; d&#xff09;MongoDB 中的一些概念 e&#xff09;Do…

k8s--动态pvc和pv

前情回顾 存储卷&#xff1a; emptyDir 容器内部&#xff0c;随着pod销毁&#xff0c;emptyDir也会消失 不能做数据持久化 hostPath&#xff1a;持久化存储数据 可以和节点上目录做挂载。pod被销毁了数据还在 NFS&#xff1a;一台机器&#xff0c;提供pod内容器所有的挂载点…

算法训练day11Leetcode20有效的括号1047删除字符串中所有相邻重复项150逆波兰表达式求值

今日学习的文章和视频链接 https://leetcode.cn/problems/valid-parentheses/description/ https://programmercarl.com/0020.%E6%9C%89%E6%95%88%E7%9A%84%E6%8B%AC%E5%8F%B7.html 20 有效的括号 题目描述 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#…

使用emu8086实现——显示程序设计实验

一、实验目的 1. 掌握DOS系统功能调用的编程方法 2. 掌握汇编语言程序设计方法&#xff0c;自己编写程序&#xff0c;并调试运行验证结果。 二、实验内容 1.在显示器上的输出窗口显示A-Z共26个大写英文字母。 代码&#xff1a; datas segmentzimu db "A B C D E F G H …

git入门之本地操作

1、启动git命令输入 在想要建立仓库&#xff0c;建议的方式是在文件夹中右键单击&#xff0c;选择git bash here 2、初始化仓库命令&#xff1a;git init 3、查看仓库状态&#xff1a;git status 4、更新仓库特定文件&#xff1a;git add xxx 5、更新仓库所有文件&#xff1…

LLVM代码内容

1. LLVM简介 LLVM库包含所有LLVM顶层项目&#xff0c;可以分为以下几类&#xff1a; • LLVM核心库和附加内容 • 编译器和工具 • 运行时库 LLVM是一个编译器框架。LLVM作为编译器框架&#xff0c;是需要各种功能模块支撑起来的。可以将clang和lld都看做是LLVM的组成部分。…

老卫带你学---leetcode刷题(50. Pow(x, n))

50. Pow(x, n) 问题 实现 pow(x, n) &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即&#xff0c;xn &#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000 示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出…

RandLA-Net导出onnx模型并使用onnxruntime推理

首先下载RandLA-Net工程&#xff1a;https://github.com/tsunghan-wu/RandLA-Net-pytorch 导出onnx模型 import torch from utils.config import ConfigSemanticKITTI as cfg from network.RandLANet import Networkmodel Network(cfg) checkpoint torch.load("./pret…

Pandas实战100例 | 案例 13: 数据分类 - 使用 `cut` 对数值进行分箱

案例 13: 数据分类 - 使用 cut 对数值进行分箱 知识点讲解 在数据分析中&#xff0c;将连续的数值数据分类成不同的区间&#xff08;或“分箱”&#xff09;是一种常见的做法。Pandas 提供了 cut 函数&#xff0c;它可以根据你指定的分箱边界将数值数据分配到不同的类别中。 …

力扣(leetcode)第709题转成小写字母(Python)

709.转成小写字母 题目链接&#xff1a;709.转成小写字母 给你一个字符串 s &#xff0c;将该字符串中的大写字母转换成相同的小写字母&#xff0c;返回新的字符串。 示例 1&#xff1a; 输入&#xff1a;s “Hello” 输出&#xff1a;“hello” 示例 2&#xff1a; 输入&am…

浏览器进程模型和JS的事件循环

一、浏览器的进程模型 1、什么是进程&#xff1f; 程序运行所需要的专属内存空间 2、什么是线程&#xff1f; ​​​​​运行​代码的称为线程&#xff08;同一个进程中的线程共享进程的资源&#xff09; ⼀个进程⾄少有⼀个线程&#xff0c;所以在进程开启后会⾃动创建⼀个线…

ubuntu在使用su - root时提示认证失败

原因&#xff1a; 在ubuntu中&#xff0c;默认情况下&#xff0c;是没有开启root账户的&#xff0c;因此在输入密码的时候会显示认证失败。 解决方法&#xff1a; 输入sudo passwd root设置密码来激活root权限 参考链接&#xff1a;ubuntu出现su:Authentication failure解决方…