TS基础笔记
TS优势
更好的错误的提示,开发中及时发现问题;
编辑器语法提示更完善;
类型声明可以看出数据结构的语义,可读性更好;
TS环境搭建
1.安装node;
2.npm install typescript@3.6.4 -g;
因为ts文件不能直接在浏览器和node环境中运行,此时需要用运行:tsc xx.ts
,自动生成一个js文件,然后运行:node xx.js
才可以
3.npm install ts-node -g
此时运行 ts-node xx.ts就可以
TS基础类型和对象类型
//基础类型 null,undefined,symbol,boolean,void
const count: number = 123;
const myName: string = "lizhao";
//对象类型
class Person {}
const teacher: {
name: string;
} = {
name: "lizhao",
};
const nums: number[] = [1, 2, 3];
const person: Person = new Person();
const getTotal: () => number = () => {
return 123;
};
类型注解和类型推断
类型注解,我们来告诉ts变量是什么类型;
类型推断,ts会自动去尝试分析变量的类型;
如果ts能够自动分析变量类型,我们就说明也不需要做了,如果无法分析变量类型,我们就需要使用类型注解。
函数类型相关
//普通参数
function fun(p1: number, p2: number) {
return p1 + p2;
}
fun(1, 2);
//结构参数
function fun1({ p1, p2 }: { p1: number; p2: number }) {
return p1 + p2;
}
fun1({ p1: 1, p2: 2 });
//返回值类型
function fun2(p1: number, p2: number): number {
return p1 + p2;
}
fun2(1, 2);
function fun3(p1: number, p2: number): void {
console.log(p1 + p2);
}
function fun4(p1: number, p2: number): never {
throw new Error();
}
//以下几种写法都可以
const fun5_1 = (p1: number, p2: number): number => {
return p1 + p2;
};
const fun5_2: (p1: number, p2: number) => number = (p1, p2) => {
return p1 + p2;
};
数组和元祖
// 数组
const arr: (string | number)[] = [1, 2, "1"];
//type 类型别名
type user = { name: string; age: number };
const arr1: user[] = [{ name: "lz", age: 18 }];
class Teacher {
name: string;
age: number;
}
const objectArr:Teacher[]=[
new Teacher(),
{
name: 'lz',
age: 18
}
]
// 元组
const info: [string, number] = ["lizhao", 18];
const infoList: [string, number][] = [
["lizhao", 18],
["lizhao", 19],
];
interface接口
interface Person {
readonly sex: string; //只读属性
name: string; //必传属性
age?: number; //非必传属性 ?
[propName: string]: any; //其它属性
say(): string; //方法
}
const getPersonNane = (person: Person): void => {
console.log(person.name);
};
const setPersonNane = (person: Person, name: string): void => {
person.name = name;
};
const p1: Person = {
sex: "女",
name: "lz",
otner: "xxx",
say() {
return "hello lz";
},
};
getPersonNane(p1);
//继承
interface Teacher extends Person {
teach(): string;
}
//应用:类应用接口,类里边必须具备 必传属性
class User implements Person {
sex = "女";
name = "lz";
say() {
return "hello lz";
}
}
//定义函数类型
interface SayHi {
(word: string): string;
}
const say: SayHi = (word: string) => {
return "lz";
};
类
class Person {
name = "li";
getName() {
return this.name;
}
}
//子类可以继承父类,可以重写父类方法,子类用super可以调用父类的方法。
class Teacher extends Person {
getName() {
return super.getName() + "zhao";
}
}
const p1 = new Teacher();
console.log(p1.getName());
类的访问属性和constructo
//private,protected,publick访问类型
// publick允许在类内外调用
// protected允许在类内和继承的子类中使用
// private只能在类内用
//constructor
class Person {
//传统写法
// public name: string;
// constructor(name: string) {
// this.name = name;
// 简便写法
constructor(public name: string) {}
}
const p1 = new Person("lz");
//子类继承父类的时候,子类如果有constructor,constructor里必须调用super(),不论父类是否有constructor。
class Teacher extends Person {
constructor(name: string, public age: number) {
super(name);
}
}
const t1 = new Teacher("lz1", 18);
console.log(p1);
console.log(t1);
getter setter
class Person {
constructor(private _name: string) {}
get name() {
return this._name;
}
set name(name: string) {
this._name = name;
}
}
const p1 = new Person("lz");
console.log(p1.name);
单例模式
class Demo {
private static instance: Demo;
private constructor(public name: string) {}
static getInstance() {
if (!this.instance) {
this.instance = new Demo("lz");
}
return this.instance;
}
}
const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();
console.log(demo1.name);
console.log(demo2.name);
readonly
限制一个public属性只能读不能改
class Demo {
public readonly name: string;
constructor(name: string) {
this.name = name;
}
}
const demo1 = new Demo("dell");
抽象类
抽象类,把公共的基础的东西抽象出来
abstract class Geom {
width: number = 12;
getType() {
return "Geom";
}
abstract getArea(): number;
}
class Circle extends Geom {
getArea() {
return this.width * 12;
}
}
const c1 = new Circle();
console.log(c1.getArea());
interface继承简化代码
interface Person {
name: string;
}
interface Teacher extends Person {
age: number;
}
interface Student extends Person {
sex: string;
}
const teacher: Teacher = { name: "lz", age: 18 };
const student: Student = { name: "lz", sex: "女" };
const getUserInfo = (user: Person) => {
console.log(user.name);
};
泛型
可以把泛型看做一个占位符,在使用的时候,在动态的填入类型值。
//例1:
function echo<T>(arg: T): T {
return arg;
}
const str = echo("str");
const num = echo(123);
//例2:接口
interface Obj<T, U> {
key: T;
val: U;
}
const obj: Obj<number, string> = {
key: 1,
val: "234",
};
//Array也是一个interface,Array<number>是interface搭配泛型的用法
let arr: Array<number> = [1, 2, 3];
//例3:函数
interface Plus<T> {
(a: T, b: T): T;
}
const plusNum: Plus<number> = (a: number, b: number) => {
return a + b;
};
const plusStr: Plus<string> = (a: string, b: string) => {
return a + b;
};
console.log(plusNum(1, 2));
console.log(plusStr("1", "2"));
约束泛型
用extends来约束泛型
interface withLength {
length: number;
}
function echoWithLength<T extends withLength>(arg: T) {
return arg.length;
}
const str = echoWithLength({ length: 2 });
类型别名
type user = { name: string; age: number };
const arr1: user[] = [{ name: "lz", age: 18 }];
类型断言
function getLength(input: string | number): number {
if ((<string>input).length) {
return (<string>input).length;
} else {
return input.toString().length;
}
}
TS基础笔记的更多相关文章
- C#面试题(转载) SQL Server 数据库基础笔记分享(下) SQL Server 数据库基础笔记分享(上) Asp.Net MVC4中的全局过滤器 C#语法——泛型的多种应用
C#面试题(转载) 原文地址:100道C#面试题(.net开发人员必备) https://blog.csdn.net/u013519551/article/details/51220841 1. . ...
- Java基础笔记 – Annotation注解的介绍和使用 自定义注解
Java基础笔记 – Annotation注解的介绍和使用 自定义注解 本文由arthinking发表于5年前 | Java基础 | 评论数 7 | 被围观 25,969 views+ 1.Anno ...
- php代码审计基础笔记
出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...
- MYSQL基础笔记(六)- 数据类型一
数据类型(列类型) 所谓数据烈性,就是对数据进行统一的分类.从系统角度出发时为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中讲数据类型分成三大类:1.数值类型,2.字符串类型和时间日期 ...
- MYSQL基础笔记(五)- 练习作业:站点统计练习
作业:站点统计 1.将用户的访问信息记录到文件中,独占一行,记录IP地址 <?php //站点统计 header('Content-type:text/html;charset=utf-8'); ...
- MYSQL基础笔记(四)-数据基本操作
数据操作 新增数据:两种方案. 1.方案一,给全表字段插入数据,不需要指定字段列表,要求数据的值出现的顺序必须与表中设计的字段出现的顺序一致.凡是非数值数据,到需要使用引号(建议使用单引号)包裹. i ...
- MYSQL基础笔记(三)-表操作基础
数据表的操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名( 字段名 数据类型, 字段名 数据类型, 字段n 数据类型 --最后一行不需要加逗号 ...
- MYSQL基础笔记(二)-SQL基本操作
SQL基本操作 基本操作:CRUD,增删改查 将SQL的基本操作根据操作对象进行分类: 1.库操作 2.表操作 3.数据操作 库操作: 对数据库的增删改查 新增数据库: 基本语法: Create da ...
- MYSQL基础笔记(一)
关系型数据库概念: 1.什么是关系型数据库? 关系型数据库:是一种建立在关系模型(数学模型)上的数据库 关系模型:一种所谓建立在关系上的模型. 关系模型包含三个方面: 1.数据结构:数据存储的问题,二 ...
随机推荐
- 用Ultraedit调试tk程序
tk没有自己的编译环境,Ultraedit中仅3步就可以打造一个tk调试环境: 1. 为UE添加tcl/tk语法高亮支持:从UE的网站上下载tcl/tk的wordfile: 2. 添加编译命令到菜单中 ...
- netty系列之:netty中的懒人编码解码器
目录 简介 netty中的内置编码器 使用codec要注意的问题 netty内置的基本codec base64 bytes compression json marshalling protobuf ...
- Nmap 简单功能介绍/TCP Header/常见端口
Nmap:Network Mapper,网络扫描和嗅探的工具包 基本功能有3个: 1.扫描主机端口,嗅探所提供的网络服务 2.探测一组主机是否在线 3.推断主机所用的操作系统,到达主机经过的路由,系统 ...
- Visio2013安装报错 1935 问题解决
最近安装Visio2013,奈何一直报错,出现1935的错误并且回滚 试了试网上的方法,无论是安装.netframework4.0也好,下载.net修复工具也好,都不行 最后尝试删除一个注册表路径 H ...
- 一文搞懂Java/Spring/Dubbo框架中的SPI机制
几天前和一位前辈聊起了Spring技术,大佬突然说了SPI,作为一个熟练使用Spring的民工,心中一紧,咱也不敢说不懂,而是在聊完之后赶紧打开了浏览器,开始的学习之路,所以也就有了这篇文章.废话不多 ...
- SpringCloud升级之路2020.0.x版-22.Spring Cloud LoadBalancer核心源码
本系列代码地址:https://github.com/HashZhang/spring-cloud-scaffold/tree/master/spring-cloud-iiford 经过上一节的详细分 ...
- ASP.NET Core:ASP.NET Core程序使用Docker部署
一.前言 这篇文章介绍如何将一个ASP.NET Core应用程序在Docker中进行部署.开发工具使用的是Visual Studio 2019和VS Code. 二.使用Docker部署 我们选择新建 ...
- Mybatis轻松入门(仅要求会用看着一个就够了,略过源码分析部分即可)
文章目录 ==一.概念== 二.快速入门 1.开发步骤 2.环境搭建 2.1.导入Mybatis的坐标和其他坐标 2.2.创建User表 2.3.编写实体 2.4.编写UserMapper配置文件 2 ...
- Java 数组结构
数组是最常见的一种数据结构,是相同类型的.用一个标识符封装到一起的基本类型数据序列或对象序列.可以用一个统一的数组名和下标来唯一确定数组中的元素.实质上数组是一个简单的线性序列,因此数组访问起来很快. ...
- 求字符串长度之递归与非递归的C语言实现
在上一篇中介绍了字符串拷贝的递归与非递归的实现,这里就不在赘述递归原理. 递归求字符串长度_strlen: 1 int _strlen(const char *src) 2 { 3 if( src = ...