TS 学习笔记

最新推荐文章于 2022-07-11 10:52:43 发布
最新推荐文章于 2022-07-11 10:52:43 发布
阅读量718 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43571751/article/details/116831996
版权

TS开发环境搭建

  1. 安装node.js；
  2. 使用npm 全局安装 ts： npm i -g typescript ；
  3. 创建一个ts文件，编辑好之后，使用tsc命令对文件进行编译：tsc xxx.ts，会生成同名的js文件。
    在这里插入图片描述

TS基本类型

  • 类型声明：
  1. 通过类型声明指定TS中变量（形参、返回值）的类型，当为变量赋值时，TS编译器会自动检查变量是否符合定义的类型。
  2. 语法：
	let 变量：类型；
	let 变量：类型 = 值；
	function fn(参数: 类型, 参数:类型): 返回值类型 {
		...
	}

在这里插入图片描述

  • 自动类型判断：
  1. TS有自动判断类型的机制，定义变量时同时赋值而没有定义类型，那么TS会自动判断类型。
  • 类型：
    在这里插入图片描述
/* 
1. 字面量: 限制变量的值就是其本身
*/
let a: 10;
a = 11; // 修改会报错，a只能是10

// 可以使用 | 来设置多个类型
let b: "male" | "female";

b = "male";
b = "female";

/* 
2. any: 表示任意类型,相当于针对该变量关闭了ts的类型检测，不建议使用
*/
let d: any;  // let d; 不指定类型，会默认为any类型
d = 10;
d = 'hello';
d = true;

/*
3. unknown 表示任意类型的值
*/

let e: unknown;
e = 10;
e = "abc";
e = true;

// unknown 和 any 的区别：unknown 相当于类型安全的any，不会影响其他变量的类型校验。
let s: string;

// d是any类型，并且d=true，但是s是string。
// 将d赋值给s是并没有报错，相当于不仅any类型的d关闭了类型校验，被赋值的s也被关闭了。
s = d;  

// 将unknown类型的e赋值给s，会报错：不能将unknown类型赋值给string。
s = e;

// 类型断言，已经明确知道e是字符串，为了不让编译器报错，可以使用类型断言。
e = "abc";
s = e as string;
s = <string>e;


/*
4. void 和 never 一般用于指定函数的返回值
*/

// void 用来表示空，表示没有返回值或返回值为undefined、null
function fn(): void {
    // 如果设置了返回值会报错
    return 123
    // 以下三种情况不会报错
    return undefined
    return null
    return
}

// never 表示没有返回值
function fn1(): never {
    // 如果设置了返回值会报错
    return 123
    // 以下三种情况不会报错
    return undefined
    return null
    return
}

/*
5. object 表示一个js对象
*/
let f: object;
f = {};
f = function () {

};

// {} 用于指定对象中可以包含那些属性
// 语法： {属性1： 属性值， 属性2：属性值}
// 在属性名后面加 ? 代表属性是可选的
let g: {name: string, age?: number};
g = {name: '孙悟空', age: 18};

// 如果要表示name属性必须有，其他属性可有有无，则可以通过
// [propName: string]: any 表示任意类型的属性
let h: {name: string, [propNmae: string]: any};
h = {name: "猪八戒", age: 18, gender: "男"};

// 定义函数的结构，只能有a,b两个参数且为number，返回值也为number
let i: (a: number, b: number) => number;
i = function(n1, n2): number {
    return n1 + n2
}

 /*
6. array
*/

let l: (string|number)[]; // 数组中只能存在string 或 number
l = ["a", 1, ]

let m: Array<number|string>; // 数组中只能存在string 或 number
m = ["a", 1]

/*
7. tuple： 固定长度的数组
语法： [类型， 类型....]
*/
let n: [string, number];
n = ["a", 1];
n = ["a"]; // 个数不同也会会报错
n = [1, "a"]; // 顺序相反也会报错

/*
8. enum： 枚举
语法： [类型， 类型....]
*/
enum Gender{
    Male = 0,
    Female = 1
}

let o: {name: string, gender: Gender};

o = {
    name: "孙悟空",
    gender: Gender.Male
};

TS面向对象

类

通过类创建对象，类可以理解为对象的模型。

  • 定义类：
class 类名 {
	属性名： 类型;
	constructor(参数: 类型) {
		this.属性名 = 参数;
	}
	方法名() {
		...
	}
}
  • 示例：
class Person {
	// 实例属性
	name: string;
	// 类属性(静态属性，直接通过类访问，不需要创建对象)
	static age: number;
	// 只读属性，不能修改
	readonly gender: string = "famale";
	// 构造函数， 创建对象时传入name和age字段，创建不同的Person对象
	constructor(name: string, age: number) {
		// this就代表当前的实例对象，可以通过this设置当前实例的属性
		this.name = name;
		this.age = age;
	}
	// 定义方法
	sayHello() {
		console.log("hello")
	}
}

let per = new Person("小红", 18);
console.log(per.name);
console.log(Person.age);

继承

  1. 继承语法： class 子类 extends 父类 { }
  2. 子类中添加属性需要重新构造函数时，需要调用父类的构造函数，使用super()。
class Animal {
    public name: string;
    public age: number;

    constructor(name: string, age: number) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log("动物在叫。")
    }
}

// Dog 通过 extends 关键字继承父类Animal
class Dog extends Animal {

    gender: string;

    constructor(name: string, age: number, gender: string) {
        // 子类中添加属性需要重新构造函数时，需要调用父类的构造函数，使用super()
        super(name, age);
        this.gender = gender;
    }

    run() {
        console.log("狗在叫。")
    }
}

let dog = new Dog("旺财", 3, "公");
dog.run();
dog.sayHello();

抽象类、抽象方法

  1. 抽象类不能被实例化，只能被子类继承；
  2. 抽象类中可以定义抽象方法，但抽象方法不做具体实现，子类继承时必须实现具体的方法；
abstract class Animal {
    public name: string;

    constructor(name: string) {
        this.name = name;
    }

    // 抽象类中定义抽象方法，不做具体实现，子类继承时必须实现具体的方法
    abstract sayHello(): void;
}

class Dog extends Animal {

    // 子类必须实现父类的抽象方法
    sayHello() {
        console.log("旺旺旺");
    }
}

let dog = new Dog("旺财");
dog.sayHello();

// 抽象类不能实例化，只能被继承---这里会报错
let animal = new Animal("鱼");

接口

参考
参考

接口用于定义一个规范。

  1. 检查变量类型：
interface labelValue{
    label:string;
 }
 
 // 在调用printLabel时，会根据接口的定义，检查传入的参数和类型；并且只检查那些必需属性是否存在，并且类型是否匹配。
 function printLabel(labelObj:labelValue){
     console.log( labelObj.label );
 }
 
 // 如果传入的没有传入label或类型不是string则会报错
 let myObj2={ size:10, label:"Size 10 Object" };
 printLabel(myObj2);
  1. 接口继承：
interface Shape {
    color: string;
}

// 定义新的接口，并继承Shape接口
interface Triangle extends Shape {
    sideNum: number;
}

// 声明变量遵循 Triangle 接口
let triangle = <Triangle>{};
triangle.color = "blue";
triangle.sideNum = 3;

triangle.sideNum1 = 4; // 这里会报错，遵循Triangel接口，只能定义color和sideNum

let square: Shape;
square.color = "red";
//报错
square.sideNum=4;
  1. 类接口：
// 定义接口ClockInterface，包含属性 currentTime:Date 和 方法getTime；
interface ClockInterface{
    currentTime:Date;
    getTime(d:Date);
}

// 类遵循接口 ClockInterface， 至少需要currentTime属性和实现getTime方法；
class Clock implements ClockInterface{
    currentTime:Date;
    age: number;
    
    constructor(h: number, m: number){}

    getTime(){
        console.log("123");
    }

}

let clock1=new Clock(30,40);
clock1.getTime()
  1. 接口继承类：
// 定义类 Point，包含属性x、y 和 方法log
class Point{
    x:number;
    y:number;
    constructor(){}
    log(){
       console.log('123456');
    }
}
// 接口继承一个类时，会继承类的成员但不包括其实现。
// 所以接口Point3d会继承类属性x、y和方法log，并且新增一个属性z
interface  Point3d extends Point{
    z:number;
}

// 变量遵循接口Point3d，只能包含x、y、z和log方法。
let point3d: Point3d={
    x:1,
    y:2,
    z:3,
    log(){
        console.log('7777');
    }
}
point3d.log();//7777

属性封装

  1. 提供get和set方法，在类外获取和修改属性；
  2. 类属性声明的简便方法；
class Animal {
    /*
    定义 public 属性，类内部和外部都可以访问
    定义 private 属性，当前类内部可以访问
    定义 protected 属性，当前类和子类可以访问
    
    */
    private _name: string;

    constructor(name: string) {
        this._name = name;
    }

    // 提供get方法，在类外面访问_name属性
    get name() {
        return this._name
    }

    // 提供set方法，在类外面修改_name属性
    set name(val: string) {
        // 这里可以加一些对修改name的校验
        this._name = val;
    }
}


class Dog {
    // 直接在构造函数中定义 public name，相当于先定义name属性，在constructor中赋值this.name = name;
    /*
        public name: string;
        constructor(name: string) {
            this.name = name;
        }
    */
    constructor(public name: string) {
        
    }
}

let dog = new Dog("旺旺")
console.log(dog);

泛型

在定义函数或类时，如果遇到类型不明确时就可以使用泛型。

// 1. 当函数输入值和返回值类型不确定时，可以使用泛型代表输入和返回的类型，用于限制类型。

function fn<T>(a: T) : T {
    return a;
}

// 2. 多个参数
 
function fn2<T, K>(a: T, b: K): T {
    console.log(b);
    return a;
}

// 3. 接口和泛型
interface Inter {
    length: number;
}
// 表示泛型T必须实现接口Inter，即存在length属性
function fn3<T extends Inter>(a: T): number {
    return a.length;
}

fn3("123");
fn3({length: 100});

// 4. 类

class MyClass<T>{
    name: T;
    constructor(name: T) {
        this.name = name;
    }
}
const mc = new MyClass("孙悟空"); // TS自动推断参数类型
const mc1 = new MyClass<string>("猪八戒"); // 指定泛型类型
weixin_43571751
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ts枚举类型
qq_43033748的博客
11-22 4501
1.枚举类型是ts为数不多的特有类型之一 枚举其实是将每一个可能出现的值一个个的列出来，定义在类型中，这个类型就是枚举类型 枚举允许开发者定义一组命名常量，常量可以是数字，字符串类型 enum Direction{ LEFT,//0 TOP,//1 CENTER//2 BOTTOM//3 } enum Direction{ LEFT=100,//0 TOP=200,//1 CENTER=300//2 BOTTOM=400//3 } enum Direction{ LEFT=100,//0 TOP,.
ts流学习笔记.docx
05-23
数字电视是通过机顶盒接收的一段段码流经过解封装，解码，送到电视机进行播放的，这一段段码流其实就是ts流（传输流），TS流引入了两个表格PAT和PMT的概念来区分电视播放的频道和节目信息。
TypeScript 数组
weixin_43746297的博客
11-08 489
数组新建： let aaa:string[]=[] let eee:string[]=['aaa','bbb','ccc'] let www:number[]=[111,22,333] let qqq:boolean[]=[true,false,true] console.log(aaa); console.log(eee); console.log(www); console.log(qqq);
TypeScript(2)
weixin_44978043的博客
04-22 3727
1.数组 数组：用于存放多个数据的集合 let names: string[] = ['张三', '李四', '王五'] 注：数组中，通常是相同类型的数据 1.创建数组 let names: string[] = [] 表示一个空数组,数组的类型注解是由两部分组成：类型+[],此处表示字符串类型的数组（只能出现字符串类型） let names: string[] = ['张三','李四'] console.log(names) 语法二 let ages: number[] =new Array(20,
TS 类型体操 之 数组的用法与进阶（加法，减法，乘法）
Jioho的博客
07-06 2731
用亿点点小学知识，在TS中实现 “加减乘” 法，加深对TS infer 的特性和数组特性的用法
TypeScript：对象
KaiSarH
05-24 1789
对象
Typescript基础知识
Welcome to my csdn!
02-01 1619
1.Typescript介绍 1.1什么是javascript，typescript？ js 运行在客户端中的编程语言 为网站提供交互特征 是网页‘动’起来 能在浏览器 服务器运行 ts 是js的超集（js有的ts都有）typescript=type+javascripe 为js添加了类型系统 优点 1类型思维方式，减少改BIG时间 2 构建代码更容易 3 补充js缺少的功能 安装 安装解析TS工具包 node.js/浏览器只认识js不认识ts 先将ts装换位js 然后可以在node.js/浏览器运行 1
TypeScript笔记
qq_51983617的博客
07-11 554
其他数据类型(array function) 元组 元组是一种特殊的数组，可以限制数组内容的长度和数据类型 元组的可选参数 元组的剩余元素 只读的元组类型 void never 一般都用来代表函数返回值，void表示函数无返回值，never表示函数出现问题永远不会出现返回值，如函数内部抛出异常或出现死循环。 any类型 any类型的变量可以被重新赋值为任意类型的值，一定程度上any是ts所有数据类型的顶层数据类型。 如果在声明变量的时候没有进行赋值，则自动将该类型转为any类型。 可以任意读取a
第五章总结
wuhao20021007的博客
03-28 127
1.声明字符串：字符串是常量，它可以显示任何文字信息，字符串的值在创建之后就不能更改。 String a; String a,b; 注意：在不给字符串变量赋值的情况下，默认值为null（空），就是空对象，如果此时调用String的方法会发生空指针异常。 2.创建字符串 String a="时间就是金钱，我的朋友。"; String b="锄禾日当午",c="小鸡炖蘑菇"; String str1,str2; str1="We are students"; str2="We are student
Typesctipt 定义定长列表的类型
weixin_33806914的博客
02-23 155
前言 在平时需求中我们经常会遇到定义定长数组类型的需求 比如一个 9x9 的棋盘 model: let board = [ [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0], [0,0,0,0,...
TypeScript简单学习笔记
12-15
分享个人简易的typescript学习笔记，内容粗糙，都是摘抄字官网。
TypeScript 学习笔记之基本类型
01-19
在 TypeScript 中一共有 7 种基本类型。 1、boolean 代码如下: var isDone: boolean = false; 2、number 代表 JavaScript 中的数字。在 JavaScript 中，无论是“整数”还是“浮点数”，都是以双精度浮点类型存储...
Bootstrap栅格系统学习笔记
11-27
Bootstrap栅格系统知多少？ 1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的...
typescript学习笔记
12-09
typescript学习笔记 阅读官方文档 做一些基础知识整理 以便于之后要用到ts开发 用于快速查阅
typescript基础笔记
wade3po的博客
03-09 582
typescript早在2013年就发布了第一个正式版本，印象中一直到了19年才大火起来。 三年过去了，一直是可用可不用的状态，于是很多人都没学习使用。 直到react和vue开始捆版上了ts，前端圈也开始了“内卷”，ts已经是不得不用的状态了。 这次分享的是自己学习过程觉得掌握了就可以上手的内容，上手了之后通过项目多实践， 实践过程再学习深入的内容，应该就能比较快的掌握。 学习过程贴的代码都是在在线的这个平台的演练场调试的： https://www.typescriptlang.org/zh/ tips:
ts问题小总结
热门推荐
一叶的博客
09-07 2万+
display:none的元素更改为display:block为何不可以和其他属性修改一样触发动画呢？ 这是因为display属性刚开始是none,所以还没有创建，改为block之后需要等待js渲染队列更新 但是transition属性在一开始就有了，所以transform改变元素的时候并没有触发动画 解决方法：让元素获取dom.offsetHeight,触发js渲染队列更新，让元素先展示出来。 <!DOCTYPE html> <html> <head> <.
TypeScript学习(四)——变量类型约束（&，|，别名，数组，类型断言，枚举，元祖）
浪头的博客
05-04 902
王元肉==>个人主页 大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。 推荐阅读 文章结构&交叉类型|联合类型别名数组类型断言枚举元祖 &交叉类型 // 两个约束同时起效果 interface IPerson { name:string, age:number } interf
TypeScript 数组定义方式
Ttxsmdcg的博客
03-03 1万+
方式一： var arr1:Array = [1,2,3]; var arr2:Array = []; 方式二： var arr3:number[] = [3,4,5,6,7,8]; var arr4:any[] = new Array(5,6,7,8); 类型转换: var arr5:Array = arr4; ();
Golang中的常量
CamelGem
10-03 2229
golang中的常量 文章目录golang中的常量字符常量短声明变量和类型推导布尔值浮点数复数整数数字 在Go中，我们通常使用const关键字来定义一个常量，它为标量值引入了名称，例如2或者3.14或者helloworld.这样的值在Go中被称为常量。常量也可以通过根据常量构建的表达式来创建，例如2+3或者2*3或者“go"+"lang"等。 有些语言支持常量，而有些语言不支持常量，有些语言虽然支持常量，但是定义常量的方式不同，意义也不同。但是在Go中，常数只是一个简单而不变的值。 字符常量 数字常量有很多
TS学习笔记（九）：Symbol 和模块
最新发布
05-30
好的，让我来回答你关于 TypeScript 中 Symbol 和模块的问题。 首先，Symbol 是 TypeScript 中的一种新的基本数据类型，它可以用来创建唯一的标识符。在 TypeScript 中，Symbol 主要有两种用法： 1. 作为对象属性的键值，用来表示一个对象属性的唯一标识符。 2. 作为一个类的静态属性或方法，用来表示该类的唯一标识符。 下面是一个使用 Symbol 作为对象属性键值的示例： ```typescript const key = Symbol('myKey'); const obj = { [key]: 'value' }; console.log(obj[key]); // 输出'value' ``` 在上面的代码中，我们使用 Symbol('myKey') 创建了一个新的 Symbol，然后将该 Symbol 作为对象 obj 的属性键值，并赋值为'value'。最后，我们通过 obj[key] 的方式来访问该属性，并输出了'value'。 另外，模块是 TypeScript 中的另一个重要概念，它用来组织和管理代码。在 TypeScript 中，模块可以使用 import 和 export 命令来进行导入和导出。下面是一个使用模块的示例： ```typescript // moduleA.ts export const num = 123; // moduleB.ts import { num } from './moduleA'; console.log(num); // 输出123 ``` 在上面的代码中，我们定义了一个名为 num 的常量，并将其导出。然后，在另一个模块中，我们使用 import 命令将 num 导入，并通过 console.log 输出了它的值。 这就是关于 TypeScript 中 Symbol 和模块的简单介绍，希望能对你有所帮助。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值