TypeScript 学习笔记 （2小时极速入门 TypeScript）

最新推荐文章于 2023-08-02 18:03:51 发布
最新推荐文章于 2023-08-02 18:03:51 发布
阅读量603 收藏 1
点赞数
分类专栏： 前端 菜鸡日记 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YYYYYun/article/details/121832314
版权

‘## 大纲

理论基础——开发环境——编译原理——工作流程——相关工具

基础类型学习

数字、布尔、字符串、数组、元组、联合、枚举、any、unknow、void、undefined、never

面向对象

泛型、class、interface、module、nameSpace（命名空间）、元编程meta-programming(装饰器)

了解TypeScript 工作流

安装typescript

npm install -g typescript

检测typescript是否安装

tsc -v

使用

tsc **.ts
node **.js

javascrip 命名来源
ECMA International(爱玛国际)负责维护版本， 所以又称ECMAScript，缩写为ES

npm init // 创建包管理文件
npm install --save-dev lite-server

可以在命令行中开启服务器，lite-server服务器会根据根目录下index文件自动部署在localhost:3000这个url上，部署在服务器上的好处是编译完成之后可以避免刷新页面就可以显示新的代码

TypeScript 基础

typescript的基本类型

// 基本类型
boolean string number array null undefined object
tuple enum void never any
// 高级类型
union 组合类型
Nullable 可空类型
Literal 预定义类型

Number

  • 数字类型
  • 可以表示整数、浮点数、也可表示正负数

String

  • “string” ‘string’ `string`

boolean

function add(a:number, b:number) {
	return a + b
}

数组Array

let array1:number[] = [1,2,3,4]
let array2:Array<number> = [1,2,3,4]
let array3 = [1,2,3,4]
let array4 = [1,"string"]
let array5:any[] = [1,"string",true]

元组Tupple
一个特殊的数组，是一个固定长度，固定类型的数组，存在一定bug

let array:[number, string] = [123,"hahaha"] // 固定长度，固定类型的数组
// array.push(3) 不报错
// array[2] = 3 报错

联合类型Union
一个变量可以同时支持多个不同类型，支持的类型中间用|分割

let union:string|number
union = 1
union = "1"
union = true // 报错
let union2: 1|2|3 // 不仅划定了数据类型，还确定了取值范围 也是字面量类型
union2 = 1
union2 = 4 // 报错

function merge(n1:number|string,n2:number|string|resultType:"as-number"|"as-string"){
	if(resultType == "as-string") {
		return n1.toString() + n2.toString()
	}
	if(typeof n1 == "string" || typeof n2 == "string") {
		return n1.toString() + n2.toString()
	}else {
		return n1 + n2
	}
}

文献类型Literal

let literal:1|"2"|true|[1,2,3]

枚举类型Enum

enum Color = {
	red,
	green,
	blue
}
let color = Color.green
console.log(color) // 1

enum Color2 = {
	red = 5,
	blue = 10,
	green = 1
}
enum Color3 = {
	red = "red",
	blue = "blue",
	green = 1
}
let color = Color3.blue
console.log(color) // blue

any

let randomValue:any = 666
randomValue = "666"
randomValue = true

unknow

void undefined never

// 函数没有任何返回 就是void类型
function printResult(){
	console.log("hahaha")
}
// 等价于
function printResult():void{
	console.log("hahaha")
}

// 函数永远执行不完，就是never，因为有throw，所以永远执行不到最后一个}
function throwError(message:string, errorCode: number) {
	throw{
		message,
		errorCode
	}
}
throwError("没有找到"， 404)

类型适配（类型断言） Type Assertions
用于各种类型的适配工作

let message: any;
message = "hello"
message.endsWith("o") // message还是any类型，所以不能使用字符串自有的endsWith方法，但是此时message其实已经是string类型了，通知typeScript进行类型适配的过程，就是Type Assertions

let ddd = (<string>message).endsWith("o")
let ddd2 = (message as string).endsWith("o")

函数类型

let log = function(message){
	console.log(message)
}
let log2 = (message) => console.log(message)
let log3 = (message:string, code?:number) => console.log(message,code)
let log3 = (message:string, code:number = 0																													) => console.log(message,code)

typeScript 面向对象

const person = {
	firstName: "四",
	lastName: "李",
	age: 14
}
console.log(person.age)
console.log(person.nickname) // 原生js不会报错，ts会报错

与javaScript 键值对不同，typeScript是key to type 键类型对

const person:object = {
	firstName: "四",
	lastName: "李",
	age: 14
}
console.log(person.age) // 报错，相当于声明了一个{}，浏览器并不知道具体内部构造

Interface接口

let drawPoint = (x,y)=>{
	console.log({x,y})
}

let drawPoint = point=>{
	console.log({x:point.x,y:point.y})
}
drawPoint({x: 200,y: 30})
drawPoint({x: "ha",y: "he"})

// 使用
let drawPoint = (point:Point)=>{
	console.log({x:point.x,y:point.y})
}
interface Point{
	x: number;
	y: number;
}

高内聚 低耦合
功能相关的事务应该放在同一个集合中，形成一个模块——高内聚
模块又应该相互独立，不同模块之间保持低耦合

interface IPoint{
	x: number;
	y: number;
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
}
class point implements IPoint{
	x: number;
	y: number;
	drawPoint:()=>{
		console.log("x=",this.x,"y=",this.y)
	};
	getDistances:(p:IPoint)=>{
		return Math.pow(p.x-this.x,2) +  Math.pow(p.y-this.y,2)
	};
}
const point = new Point() //对象 Object  实例instance
point.x = 2
point.y = 3
point.drawPoint()

使用构造函数constructor进行初始赋值

interface IPoint{
	x: number;
	y: number;
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
}
class point implements IPoint{
	x: number;
	y: number;
	// 构造函数不可以重载
	constructor(x: number, y: number) {
		this.x = x;
		this.y = y
	}
	drawPoint:()=>{
		console.log("x=",this.x,"y=",this.y)
	};
	getDistances:(p:IPoint)=>{
		return Math.pow(p.x-this.x,2) +  Math.pow(p.y-this.y,2)
	};
}
const point = new Point(2,3)
point.drawPoint()


interface IPoint{
	// 当在构造函数中使用访问修饰符修饰参数的同时，constructor会自动为我们生成对应的成员变量，并为成员变量赋值，此时不可以使用缺省方法
	constructor(public x: number, public y: number) {
		// this.x = x;
		// this.y = y
	}
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
}

Access Modifier 访问修饰符
typeScript中有三个访问修饰符

public // 默认成员变量和成员方法都是public
private
protected

const point = new Point(20,30)
// 仍然可以通过访问对象来给x，y重新赋值
point.x = 30
point.y = 50

这种在对象外部直接访问成员变量，甚至重新赋值的方法是不安全的

interface IPoint{
	// x: number; // 私有的话和接口有冲突
	// y: number;
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
	getX:()=>number;
	getY:()=>number;
	setX:(value)=>void;
	setY:(value)=>void;
}
class point implements IPoint{
	constructor(private x: number, private y: number) {
		// this.x = x;
		// this.y = y
	}
	drawPoint:()=>{
		console.log("x=",this.x,"y=",this.y)
	};
	getDistances:(p:IPoint)=>{
		return Math.pow(p.getX()-this.x,2) +  Math.pow(p.getY()-this.y,2)
	};
	// 缓冲带，避免一些错误
	setX:(value:number)=>{
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.x = value
	};
	getX: ()=>{
		return this.x
	};
	setY:(value:number)=>{
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.y = value
	};
	getY: ()=>{
		return this.y
	}
}
const point = new Point(2,3)
point.setX(10)
point.drawPoint()

get set 懒人包,编译器版本至少设置为es5以上,设置方法为tes -t es5 + 文件名
如
tes -t es5 app.ts

好处： getter和setter不需要再写那么多代码，调用的时候也不需要像函数一样调用，只需要像属性一样使用就可以了，代码可以更整洁干净

interface IPoint{
	// x: number; // 私有的话和接口有冲突
	// y: number;
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
	// getX:()=>number;
	// getY:()=>number;
	X: number;
	Y: number;
	setX:(value)=>void;
	setY:(value)=>void;
}
class point implements IPoint{
	constructor(private x: number, private y: number) {
		// this.x = x;
		// this.y = y
	}
	drawPoint:()=>{
		console.log("x=",this.x,"y=",this.y)
	};
	getDistances:(p:IPoint)=>{
		return Math.pow(p.X-this.x,2) +  Math.pow(p.Y-this.y,2)
	};
	// 缓冲带，避免一些错误
	set X(value:number){
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.x = value
	};
	get X{
		return this.x
	};
	set Y(value:number){
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.y = value
	};
	get Y(){
		return this.y
	}
}
const point = new Point(2,3)
point.X = 10 // 赋值
console.log(point.X) // 取值

Module 模块
point.ts

// point.ts
interface IPoint{
	// x: number; // 私有的话和接口有冲突
	// y: number;
	drawPoint:()=>void;
	getDistances:(p:IPoint)=>number;
	// getX:()=>number;
	// getY:()=>number;
	X: number;
	Y: number;
	setX:(value)=>void;
	setY:(value)=>void;
}
export class point implements IPoint{
	constructor(private x: number, private y: number) {
		// this.x = x;
		// this.y = y
	}
	drawPoint:()=>{
		console.log("x=",this.x,"y=",this.y)
	};
	getDistances:(p:IPoint)=>{
		return Math.pow(p.X-this.x,2) +  Math.pow(p.Y-this.y,2)
	};
	// 缓冲带，避免一些错误
	set X(value:number){
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.x = value
	};
	get X{
		return this.x
	};
	set Y(value:number){
		if(value < 0) {
			throw new Error("value不能小于0")
		}
		this.y = value
	};
	get Y(){
		return this.y
	}
}

app.ts

import { Point } from './point' // 不需要加后缀
const point = new Point(2,3)
point.X = 10 // 赋值
console.log(point.X) // 取值

Generics 泛型
类型加尖括号这种形式就是泛型，相当于一个泛型模板

// let array1:number[] = [1,2,3,4]
// let array2:Array<number> = [1,2,3,4]

let lastInAray = (arr: Array<number>) => {
	return arr[ arr.length - 1 ]
}
const l1 = lastInAray([1,2,3,4])
// const l2 = lastInAray(["a","b","c","d"]) 把类型修改为any也可以满足，但是输出的l2类型也是any

在函数参数前面写上表示动态类型泛型(约定俗称)，可以把T传入参数类型的定义，用T动态的代替Array中的类型

// arr: Array<T> & T[]
let lastInAray = <T>(arr: Array<T>) => {
	return arr[ arr.length - 1 ]
}
const l1 = lastInAray([1,2,3,4]) // 此时l1的类型是number
const l2 = lastInAray(["a","b","c","d"]) // 此时l2的类型是string

通过使用泛型，完美保持代码中类型的一致性

// 也可以明确指明泛型的类型，显示定义类型，提高安全性
const l2 = lastInAray<string>(["a","b","c","d"]) // 此时l2的类型是string
// 联合类型
const l3 = lastInAray<string|number>(["a","b","c","d"]) // 此时l3的类型是string|number的联合类型

let makeTuple = (x,y)=>[x,y]

// 多泛型使用
let makeTuple = <T, Y>(x:T,y: Y)=>[x,y]
const m1 = makeTuple(1,"a") // m1:(string|number)[]
const m2 = <Boolean,String>makeTuple(true,"a")

设置泛型默认类型

// 多泛型使用
let makeTuple = <T, Y = number>(x:T,y: Y)=>[x,y]
const m1 = makeTuple(1,"a") // m1:(string|number)[]
const m2 = <boolean,string>makeTuple(true,"a")

待扩展内容
类型别名、声明合并、接口合并、类型合并、class的继承与多态、模块、命名空间

肥喵蒙太奇
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
typeScript学习笔记
04-27
typeScript学习笔记
我用8个小时，把TypeScript从头学了一遍，并没有你想象的那么难！！！
宋承佑
03-30 2945
TypeScript 建议先学JavaScript再看TypeScript，这样你就会很快的理解。 文章目录TypeScript第一节 基础类型第二节 变量声明类型断言类型推断变量作用域第三节 运算符算术运算符关系运算符逻辑运算符短路运算符（&& 与 ||）位运算符赋值运算符三元运算符（？ ：）类型运算符typeof 运算符instanceof 运算符其它运算符负号运算符（-）字符串运算符：连接运算符（+）第四节 条件语句if 语句if...else 语句if...else if...els
2022 年了，我才开始学 TypeScript ，晚吗？（7.5k字总结）
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-01 416
前言fengmian.png其实早在初学前端时，就有大致了解过 typescript ,但后面工作中基本 vue2 开发为主，所以真正能够接触到 typescript 的机会其实并不多。尽管在某些间歇性踌躇满志的时刻，我也会上X站搜索 typescript最新教程，但都很难坚持过10节视频，又或者刷掘金的时候看到相关文章，我也会麻溜的点赞收藏一条龙，可是到现在也只是在我的...
30分钟学会TypeScript
mareden的专栏
07-03 593
TypeScript可编译为JavaScript，专为开发大型和复杂应用程序的开发人员设计。TypeScript从C＃和Java这样的语言继承了许多编程概念，为强大灵活、弱类型的JavaScript增加了更多的强类型语言的特性。 本文适用于熟悉JavaScript同时想要了解TypeScript的人，将介绍语言基本特性和关键功能，并将提供带注释的代码示例，冀希望有助于了解TypeScript。以下为正文。 使用TypeScript的好处 JavaScript适用范围很广，了解Javascript的
1.10分钟学会ts
HQ\(^o^)/的博客
07-08 677
typescript简称(ts) 是微软的开源的编程语言 ts是js的超集,是因为ts比js多了 类型系统作用是: 为变量添加类型约束语法: let 变量: 类型 = 值eg: let n : number = 100 (常用类型: number string boolean null ) : number 就是类型注释, 规定了什么类型,就要赋予什么类型的值, 否则,会报错eg: let n : number = '100' (这个会报错 ,因为规定了这个是数字类型,而
Typescript
MXC17692370773的博客
11-15 162
1. 什么是typescript TypeScript 是一种由微软开发的自由和开源的编程语言，它是 JavaScript 的一个超集，扩展了 JavaScript 的语法。 2. 语法特征 类 Classes 接口 Interfaces 模块 Modules 类型注解 Type annotations 编译时类型检查 Compile time type checking Arrow 函数 (类似 C# 的 Lambda 表达式) 3. 安装 4. 类型批注...
TypeScript 学习笔记
05-16
大学牲学习 TypeScript 的学习笔记，欢迎小伙伴们一起来学习！
typescript学习笔记
03-04
typescript学习笔记
TypeScript 学习笔记之基本类型
01-19
在 TypeScript 中一共有 7 种基本类型。 1、boolean 代码如下: var isDone: boolean = false; 2、number 代表 JavaScript 中的数字。在 JavaScript 中，无论是“整数”还是“浮点数”，都是以双精度浮点类型存储...
8小时搞定TypeScript
08-17
关于TypeScript：TypeScript在JavaScript的基础上附加了一层类型定义；在大团队协作项目中引入TS，无需沟通即可明确认知每一个函数轮子的入参和返回值是什么，极大地减少了沟通成本；在前端越来越卷的今天，使用TS开发项目已经逐渐成为企业的标配；课程特色：零基础教学，深入浅出，轻松诙谐，物超所值！深切结合企业需求，深入到TS每一个语法细节，让各位童鞋清晰认知TS全貌；紧扣企业面试，附经典而高频的TodoList案例，OFFER轻松拿；课程源码：全部源码附在第一小节课中；
JavaScript实现startWith、endWith效果函数
zdeming
04-21 158
利用正则表达式实现： [code="JavaScript"] String.prototype.startWith=function(str){ var reg=new RegExp("^"+str); return reg.test(this); } [/code] [code="JavaScript"] String.prototype.end...
TypeScript算法基础——TS字符串的常用操作总结：substring、indexOf、slice、replace. . .
最新发布
一步一个脚印，踏实努力，向着目标前进
08-02 2292
这些方法是字符串处理中常用的操作，可以根据具体的需求选择适合的方法来处理字符串。需要注意的是，这些方法都返回新的字符串，原始字符串并不会被修改。以上是一些常用的字符串查找方法，根据具体的需求选择适合的方法来查找字符串。需要注意的是，这些方法都返回布尔值或索引位置，而不是具体的匹配字符串。这些方法可以根据具体的需求选择适合的方法来提取字符串的子串。需要注意的是，这些方法返回新的字符串或字符串数组，原始字符串并不会被修改。在JavaScript/TypeScript中，有多种方法可以用于提取字符串的子串。
ts-简单知识点汇总
Merryhyl的专栏
06-18 230
1.基本类型：boolean、number、string、数组、元组、枚举、any、void、null、undefined、never、object let numberOrString: number | string = 123 let union: number | string | boolean | string[] let arrOfNumber: number[] = [1, 2, 3] let arrOfNumber1: Array<number> = [1, 2, 3] le
String类的startsWith()和endsWith()方法详细介绍
java架构师分享,有问题可以联系我
02-11 798
String类的startsWith()和endsWith()方法详细介绍
python自学入门要多久,新手学python需要多久
纸尿裤排行
09-16 1715
要学会用Python干活，还需要学习Python的各种库，它的强大在于库，原因是Python的库可以用Python，c语言，c++等设计，再提供给Python使用，所以无论gpu运行，神经网络，智能算法，数据分析，图像处理，科学计算，各式各样的库在等着你用。○第三阶段是全栈开发项目实战，整个阶段需要1.5个月的时间学习，是整个培训时间占比比较长的一个阶段，时间更长、案例更多、 实用性更强，在这个阶段主要是做项目，学案例，学完这个阶段，学员就可胜任python全栈开发工程师的职位。当然需要足够的投入。
ts基础
messi
01-08 645
文章目录let const解构赋值关于字符串的相关字符串模板字符串查找字符串是否以谁开头:字符串是否以谁结尾:重复字符串:判断浏览器填充字符串:函数相关函数的默认参数扩展运算符、Rest运算符: ... 展开数组箭头函数数组相关的东西ES5里面新增一些东西循环: for while ---> arr.forEach() arr.map()过滤 arr.filter()查找 ar...
都说TypeScript 难学？其实真的不难！
小北哥哥和北妈
06-06 4646
文/北妈阅读本文需要2.6分钟一上个月北妈介绍过TypeScript，我接触的项目也逐渐都过渡到TypeScript。了解我写的 关于TypeScript ，戳这里 ...
TypeScript 学习之路（详细）
不知在知的博客
05-30 664
typescript 学习 这几天通过学习将自己的typescript学习总结上传到了GitHub， 链接：https://github.com/cuminzh/ts-base
10分钟学会TypeScript，总结TS的常用特性
拖泥羊的博客
06-22 1441
为什么要学习 TypeScript 前端老法师应该都知道，一路走来js有太多不完善的地方；呃，它是弱类型语言，它是解释型脚本，它入门其实很简单但深入挺难。想要知道为什么学习 TypeScript，那么我们首先要学习下什么是强类型、弱类型、静态类型、动态类型、类型系统。 强类型与弱类型（类型安全） 强类型，形参和实参的类型必须保持一致 强类型，不允许随意的隐式类型转换，而弱类型是允许的 弱类型的问题 缺失了类型系统的可靠性： 一些类型异常要等到运行时才能发现 类型不明确造成函数功能的改变 对象索引器的错误用

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值