TypeScript简介

第一章：基本类型

1.1 类型声明

1.2 自动类型判断

1.3 案例

1.4 类型

第二章：面向对象

2.1 类（class）

2.2 面向对象的特点

2.3 接口（Interface）

2.4 泛型（Generic）

TypeScript简介

1. TypeScript是JavaScript的超集。

2. 它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。

3. TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。

4. TS完全兼容JS，换言之，任何的JS代码都可以直接当成TS使用。

5. 相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

第一章：基本类型

1.1 类型声明

类型声明是TS非常重要的一个特点
通过类型声明可以指定TS中变量（参数、形参）的类型
指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
语法：

let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{...
}

1.2 自动类型判断

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

1.3 案例

下面是个案例，从下面这段代码可以得出下面几点结论：

如果给一个变量设置的类型，在使用的过程中只能使用这个类型，如下面的a变量，指定类型为number，赋值为'hello'，会报错
下面的c变量，声明完直接赋值
d变量的声明和赋值同时进行，TS可以自动对变量进行类型检测，后面修改成其它类型会报错
JS中的函数是不考虑参数的类型和个数的，但是TS可以指定函数的参数的类型、参数的个数以及参数的返回值，如下面的sum函数，调用它的第一个返回值res1会报错，因为第二个参数是字符串；第二个返回值res2也会报错，因为参数有三个；第三个返回值没有问题

// 声明一个变量a，同时指定它的类型为nunber
let a: number// a的值设置为了number，在以后使用过程中a的值只能是数字
a = 10
a = 99
// a = 'hello' // 此代码会报错，因为变量a的类型是number，不能赋值字符串let b: string
b = 'hello'
// b = 123// 声明完变量直接赋值
// let c: boolean = false// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let d = false
d = true
// d = 123// JS中的函数是不考虑参数的类型和个数的
// function sum(a, b){
//   return a + b
// }// console.log(sum(123, 456)) // 579
// console.log(sum(123, '456')) // "123456"function sum(a: number, b: number): number {return a + b
}let res1 = sum(123, "456")
let res2 = sum(123, 456, 789)
let res3 = sum(123, 456)

1.4 类型

类型	例子	描述
number	1, -33, 2.5	任意数字
string	'hi', "hi", `hi`	任意字符串
boolean	true、false	布尔值true或false
字面量	其本身	限制变量的值就是该字面量的值
any	*	任意类型
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:'孙悟空'}	任意的JS对象
array	[1,2,3]	任意JS数组
tuple	[4,5]	元素，TS新增类型，固定长度数组
enum	enum{A, B}	枚举，TS中新增类型

代码案例1：从下面这段代码得出下面几点结论

用字面量进行类型声明，则这个变量只能是指定的那个值或那个类型，可以使用“ | ”来连接多个类型（联合类型）
any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测，但是最好尽量不要使用any，如果把一个any变量复制给有指定类型的变量，会报错
unknown 表示未知类型的值，实际上就是一个类型安全的any，不能直接赋值给其它变量
类型断言，语法: 变量 as 类型或 <类型>变量，表示将这个变量当成指定的类型
void 用来表示空,以函数为例,就表示没有返回值的函数，也可以是返回undefined，可以省略
never 表示永远不会返回结果

// 可以直接使用字面量进行类型声明
var a: 10
a = 10
// a = 11// 也可以使用 | 来连接多个类型（联合类型）
let b: 'male' | 'female'
b = 'male'
b = 'female'let c: boolean | string
c = true
c = 'abc'// any 表示的是任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型
// let d: any// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let d
d = 1
d = 'abc'
d = true// unknown 表示未知类型的值
let e: unknown
e = 1
e = 'abc'
e = truelet f: string// d的类型是any，它可以赋值给任意变量
f = de = 'string'// unknown 实际上就是一个类型安全的any
// unknown类型的变量,不能直接赋值给其它变量
if(typeof e === 'string'){f = e
}// 类型断言
// 语法: 变量 as 类型    或    <类型>变量
f = e as string
f = <string>e// void 用来表示空,以函数为例,就表示没有返回值的函数
function fn(): void{
}// never  表示永远不会返回结果
function fn1(): never{throw new Error('报错了!')
}

代码案例2：从下面这段代码得出下面几点结论

要指定一个对象，并不是要判断是不是对象，而是要指定对象中可以包含哪些属性，属性的类型是什么，如下面的b。如果有不确定对象中是否包含这个属性，可以加上“ ? ”，并且，如果之后可能有其他的属性，可以使用“[propName: string]: any”，表示任意类型的属性
设置函数结构的类型声明: 语法:(形参:类型, 形参:类型......) => 返回值类型，指定了参数的类型以及返回值的类型
数组的类型声明类型[] 或 Array<类型>
元组, 元组就是固定长度的数组，语法: [类型, 类型, 类型......]
enum枚举，在里面添加一些固定的值，可以像下面的m那么使用
& 表示同名，同时满足前后两个条件
类型的别名，如果有自己指定的类型，可以给它添加名字，使用会更加简便

// Object 表示一个js对象
let a: Object
a = {}
a = function() {}// {} 用来指定对象中可以包含哪些属性
// 语法: {属性名:属性值,属性名:属性值}
// 在属性名后面加上?,表示属性时可选的
let b: {name: string, age?: number}
b = {name: 'abc', age: 18}// [propName: string]: any 表示任意任意类型的属性
let c: {name: string, [propName: string]: any}
c = {name: 'abc', age: 18, gender: 'male'}// 设置函数结构的类型声明: 语法:(形参:类型, 形参:类型......) => 返回值类型
let d: (a: number, b: number) => number
d = function(param1: number, param2: number): number{return 1
}// 数组的类型声明  类型[]  或  Array<类型>
// string[] 表示字符串数组
let e: string[]
e = ['a', 'b', 'c']let f: Array<string>
f = ['d', 'e', 'f']// 元组, 元组就是固定长度的数组
//   语法: [类型, 类型, 类型......]
let g: [string, number]
g = ['abc', 123]// enum枚举
enum Gender{Male,Female
}let h: {name: string, gender: Gender}
h = {name: 'abc', gender: Gender.Male}// & 表示同名
let m: {name: string} & {age: number}
m = {name: 'abc', age: 18}// 类型的别名
type myType = 1 | 2 | 3 | 4 | 5
let n: myType
n = 1

第二章：面向对象

面向对象是程序中一个非常重要的思想，它被很多人理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。

举例来说：
- 操作浏览器要使用window对象
- 操作网页要使用document对象
- 操作控制台要使用console对象

一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。

在程序中所有的对象都被分成了两个部分数据和功能，以人为例，人的姓名、性别、年龄、身高、体重等属于数据，人可以说话、走路、吃饭、睡觉这些属于人的功能。数据在对象中被成为属性，而功能就被称为方法。所以简而言之，在程序中一切皆是对象。

2.1 类（class）

要想面向对象，操作对象，首先便要拥有对象，那么下一个问题就是如何创建对象。要创建对象，必须要先定义类，所谓的类可以理解为对象的模型，程序中可以根据类创建指定类型的对象，举例来说：可以通过Person类来创建人的对象，通过Dog类创建狗的对象，通过Car类来创建汽车的对象，不同的类可以用来创建不同的对象。

定义类：

class 类名 {属性名: 类型;constructor(参数: 类型){this.属性名 = 参数;}方法名(){....}}

示例1

从下面这段代码可以得出下面几点结论：

static表示当前类身上的属性或方法，通过“类.属性或类.方法”来调用
readonly表示只能读，不能修改，与static连用的时候放在static后面
在类里面函数的声明直接使用函数名(){} 的方式定义

class Person{name: string = '张三'static readonly age: number = 18static sayHello(){console.log('hello');}sayHi(){console.log('hi');}
}const per = new Person()
console.log(per);
console.log(Person.age);per.name = '李四'
console.log(per);Person.sayHello()
per.sayHi()

示例2

从下面这段代码可以得出下面几点结论：

constructor 被称为构造函数，构造函数会在对象创建时调用
在实例方法中，this就表示当前的实例，在构造函数中当前对象就是当前新建的那个对象，可以通过this向新建的对象中添加属性
在方法中可以通过this来表示当前调用方法的对象

class Dog{name: stringage: number// constructor 被称为构造函数// 构造函数会在对象创建时调用constructor(name: string, age: number){// 在实例方法中，this就表示当前的实例// 在构造函数中当前对象就是当前新建的那个对象// 可以通过this向新建的对象中添加属性this.name = namethis.age = age}bark(){// 在方法中可以通过this来表示当前调用方法的对象console.log(this);}
}const dog = new Dog('旺财', 3)
console.log(dog);

2.2 面向对象的特点

1. 封装

对象实质上就是属性和方法的容器，它的主要作用就是存储属性和方法，这就是所谓的封装
默认情况下，对象的属性是可以任意的修改的，为了确保数据的安全性，在TS中可以对属性的权限进行设置
只读属性（readonly）：
- 如果在声明属性时添加一个readonly，则属性便成了只读属性无法修改
TS中属性具有三种修饰符：
- public（默认值），可以在类、子类和对象中修改
- protected ，可以在类、子类中修改
- private ，可以在类中修改

属性存取器

对于一些不希望被任意修改的属性，可以将其设置为private
直接将其设置为private将导致无法再通过对象修改其中的属性
我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的存取器
读取属性的方法叫做setter方法，设置属性的方法叫做getter方法

(function() {class Person{/*** TS 可以在属性前添加属性的修饰符* public 修饰的属性可以在任意位置访问（修改）—— 默认值* private 私有属性，私有属性只能在类的内部进行访问（修改）*    通过在类中添加方法使得私有属性可以被外部访问* protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）*/// 属性可以被任意修改会导致对象中的数据变得非常不安全private _name: stringprivate _age: numberconstructor(name: string, age: number){this._name = namethis._age = age}/*** getter 方法用来读取属性* setter 方法用来设置属性*      它们被称为属性的存取器*/// 定义方法，用来获取name属性getName(){return this.name}setName(value: string){this._name = value}getAge(){return this._age}setAge(value: number){// 判断年龄是否合法if(value > 0){this._age = value}}// TS中设置getter和setter方法的方式get name(){return this._name}set name(value: string){this._name = value}get age(){return this._age}set age(value: number){this._age = value}}const per = new Person('张三', 18)console.log(per.getName());per.setName('李四')per.setAge(10)console.log(per);})()

2.继承

继承时面向对象中的又一个特性
通过继承可以将其他类中的属性和方法引入到当前类中
通过继承可以在不修改类的情况下完成对类的扩展
发生继承时，如果子类中的方法会替换掉父类中的同名方法，这就称为方法的重写
在子类中可以使用super来完成对父类的引用

通过继承可以将多个类中共有的代码写在一个父类中，这样只需要写一次即可让所有的子类都同时拥有父类中的属性，如果希望在子类中添加一些父类中没有的属性或方法，直接加就可以
如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的
super表示当前类的父类
如果在子类中写了构造器，在子类构造器中必须对父类的构造器进行调用，否则会报错

(() => {class Animal{name: stringage: numberconstructor(name: string, age: number){this.name = namethis.age = age}sayHello(){console.log('动物叫~~~');}}// 通过继承可以将多个类中共有的代码写在一个父类中//   这样只需要写一次即可让所有的子类都同时拥有父类中的属性//   如果希望在子类中添加一些父类中没有的属性或方法，直接加就可以// 如果子类中添加了和父类相同的方法，则子类方法会覆盖掉父类的class Dog extends Animal{run(){console.log('跑步~~');}sayHello(){// super表示当前类的父类super.sayHello()console.log('汪汪汪');}}class Cat extends Animal{// 如果在子类中写了构造函数，在子类构造器中必须对父类的构造器进行调用constructor(name: string, age: number){super(name, age)}sayHello(){console.log('喵喵喵');}}const dog = new Dog('旺财', 5)console.log(dog);dog.sayHello()const cat = new Cat('喵喵', 2)console.log(cat);cat.sayHello()
})()

3. 抽象类（abstract class）

以abstract开头的类是抽象类，抽象类和其他类区别不大，只是不能用来创建对象，抽象类就是专门用来被继承的类
抽象类中可以添加抽象方法，抽象方法使用 abstract 开头，没有方法体，抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写，否则会报错
接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法，同时接口也可以当成类型声明去使用，接口中的所有属性都不能有实际的值，接口只定义对象的结构，而不考虑实际值，在接口中所有的方法都是抽象方法
定义类时，可以使类去实现一个接口，实现接口就是使类满足接口的要求

(function() {/*** 以abstract开头的类是抽象类*   抽象类和其他类区别不大，只是不能用来创建对象*   抽象类就是专门用来被继承的类* 抽象类中可以添加抽象方法*/abstract class Animal{name: stringage: numberconstructor(name: string, age: number){this.name = namethis.age = age}/*** 定义一个抽象方法* 抽象方法使用 abstract 开头，没有方法体* 抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写*/abstract sayHello()}class Dog extends Animal{sayHello(): void {console.log('汪汪汪');}}class Cat extends Animal{}})()

2.3 接口（Interface）

接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

结论：

(function() {// 描述一个对象的类型type myType = {name: string,age: number}/*** 接口用来定义一个类结构，用来定义一个类中应该包含哪些属性和方法*    同时接口也可以当成类型声明去使用*    接口中的所有属性都不能有实际的值*    接口只定义对象的结构，而不考虑实际值*      在接口中所有的方法都是抽象方法*/interface myInterface {name: string,age: numbersayHello(): void}interface myInterface{gender: string}// const obj: myInterface = {//   name: '张三',//   age: 18,//   gender: '男'// }/*** 定义类时，可以使类去实现一个接口*    实现接口就是使类满足接口的要求*/class myClass implements myInterface{name: stringage: numbergender: stringconstructor(name: string, age: number, gender: string){this.name  = namethis.age = agethis.gender = gender}sayHello(): void {console.log('hello');}}})()

2.4 泛型（Generic）

定义一个函数或类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定），此时泛型便能够发挥作用。

使用泛型：

function test<T>(arg: T): T{return arg;
}

这里的<T>就是泛型，T是我们给这个类型起的名字（不一定非叫T），设置泛型后即可在函数中使用T来表示该类型。所以泛型其实很好理解，就表示某个类型。
那么如何使用上边的函数呢？
- 方式一（直接使用）：
  
  test(10)
  - 使用时可以直接传递参数使用，类型会由TS自动推断出来，但有时编译器无法自动推断时还需要使用下面的方式
- 方式二（指定类型）：
  
  test<number>(10)
  - 也可以在函数后手动指定泛型
可以同时指定多个泛型，泛型间使用逗号隔开：

function test<T, K>(a: T, b: K): K{ return b; }

test<number, string>(10, "hello");

使用泛型时，完全可以将泛型当成是一个普通的类去使用

类中同样可以使用泛型：

class MyClass<T>{prop: T;
constructor(prop: T){this.prop = prop;}
}

除此之外，也可以对泛型的范围进行约束
```
interface MyInter{length: number;
}

function test<T extends MyInter>(arg: T): number{return arg.length;
}
```
- 使用T extends MyInter表示泛型T必须是MyInter的子类，不一定非要使用接口类和抽象类同样适用。

// 在定义函数或是类时，如果遇到类型不明确就可以使用泛型
function fn<K>(a: K): K{return a
}// 可以直接调用具有泛型的函数
let res1 = fn(10) // 不指定泛型，TS可以自动对类型进行推断
let res2 = fn<string>('abc') // 指定泛型// 泛型可以同时指定多个
function fn2<T, K>(a: T, b: K): T{console.log(b);return a
}
fn2<number, string>(123, 'abc')interface Inter{length: number
}// T extends Inter 表示泛型T必须是Inter的实现类（子类）
function fn3<T extends Inter>(a: T): number{return a.length
}console.log(fn3('abc'));class myClass<T>{name: Tconstructor(name: T){this.name = name}
}
const mc = new myClass<string>('张三')

TypeScript学习笔记相关推荐

TypeScript学习笔记3：运算符
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录运算符 ...
TypeScript学习笔记2：数据类型
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录数据类型 ...
TypeScript学习笔记1：变量赋值及书写方式
TS 和 JS 相对比的优势 TypeScript的安装步骤.运行问题及代码的简单运行 TypeScript学习笔记1:变量赋值及书写方式 TypeScript学习笔记2:数据类型文章目录变量赋值 ...
Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
Typescript 学习笔记一：介绍、安装、编译
前言整理了一下 Typescript 的学习笔记,方便后期遗忘某个知识点的时候,快速回忆. 为了避免凌乱,用 gitbook 结合 marketdown 整理的. github地址是:ts-gitb ...
typeScript学习笔记day01——小肉包
typeScript学习笔记 class1: 一.javaScript(js)的优缺点 javaScript是在微软公司和网景公司之间爆发的浏览器大战期间,由网景公司的Brendan Eich(布兰登 ...
typeScript学习笔记day02——小肉包
typeScript学习笔记 class3 : 2021.02.24 一.TS编译选项自动编译文件编译文件时,使用-w指令后,YS编译器会自动监视文件变化,并在文件发生变化时对文件进行重新编译. ...
typescript学习笔记1 —— 接口（interface）
typescript是微软出品的,javascript的超集.让javascript的写法很类似java,核心功能是让JavaScript这个弱类型的语言,增加类型检查,更适合编写企业级应用.之前的a ...
typescript-----javascript的超集，typescript学习笔记持续更新中......
Typescript,冲! Typescript 不是一门全新的语言,Typescript是 JavaScript 的超集,它对 JavaScript进行了一些规范和补充.使代码更加严谨. 一个特别好 ...
TypeScript学习笔记之接口（Interface）
在java中,接口是用来定义一些规范,使用这些接口,就必须实现接口中的方法,而且接口中的属性必须是常量. javascript中是没有接口的概念的.所以TypeScript在编译成 JavaScrip ...

TypeScript学习笔记

TypeScript简介

第一章：基本类型

1.1 类型声明

1.2 自动类型判断

1.3 案例

1.4 类型

第二章：面向对象

2.1 类（class）

2.2 面向对象的特点

2.3 接口（Interface）

2.4 泛型（Generic）

TypeScript学习笔记相关推荐

最新文章

热门文章