目录
一、TS 简介
TypeScript 由微软开发的自由 和 开源的 编程语言,它可以在任何操作系统上运行。TypeScript 是 JavaScript 的 超集 ，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过 类型注解 提供编译时的 静态类型检查。
二、开发准备
2.1、开发环境
TypeScript 目录 浏览器还不能支持，需要把编写好的 TS 编译转为 JS ，编译的环境为 NodeJs 环境。
- 下载 NodeJs nvm
- 切换 npm 镜像源 nrm
- 使用 npm 全局( -g )安装 typescript
npm i -g typescript
// 检查是否安装成功 查看到版本，表示安装成功
tsc -v
- 创建一个以 .ts 扩展名 文件
- 使用 tsc 命令对 ts 文件进行 编译
// 使用命令行工具，进入到对应的文件目录中，执行如下命令
tsc app.ts
2.2、开发工具
很多 IDE 都有支持 TypeScript 开发，选择 VsCode 工具来进行 ts 代码的 编写。
下载地址： Visual Studio Code - Code Editing. Redefined
三、基本类型
TypeScript 支持与 JavaScript 几乎相同的数据类型，此外还提供了自己特有的一些类型。
- 类型声明
类型声明是 TS 非常重要的一个特点，通过类型声明可以指定 TS 中变量（参数、形参）的类型，当为变量赋值时，TS 编译器会自动检查值是否符合类型声明，符合则赋值，否则报错，类型声明给变量设置了类型，使得变量只能存储某种类型的值。
- 自动类型 ( 类型推论 )
当对变量的声明和赋值是同时进行的，TS 编译器会自动判断变量的类型，工作中建议还是手动指明变量类型，尽量少的去让 TS 自动判断类型。
3.1、布尔值
let isDone: boolean = false;
3.2、数字
let decLiteral: number = 6; // 十进制
let hexLiteral: number = 0xf00d; // 十六进制
let binaryLiteral: number = 0b1010; // 二进制
let octalLiteral: number = 0o744; // 八进制
3.3、字符串
let name: string = "bob"
let username:string = `aaabbbccc`
3.4、any 和 unknown
any 任意类型 , 类型安全的 any 类型
let app:any = 66
let app:unknown = 99 
3.5、void
它表示没有任何类型 , 声明一个 void 类型的变量没有什么大用，因为你只能为它赋予 undefined 和 null , 一般多用于 函数返回值指定
let unusable: void = undefined;
function warnUser(): void {
console.log("This is my warning message");
}
3.6、null 和 undefined
undefined 和 null 两者各自有自己的类型分别叫做 undefined 和 null 。 和 void 相似，它们的本身的类型用处不是很大
let u: undefined = undefined;
let n: null = null;3.7、never
never 类型表示的是那些 的类型
function error(message: string): never {
throw new Error(message);
} 
// never , 永远也不存在的类型 , 用在方法和函数中返回值类型
/* function error(): never {
throw new Error('永不存在')
} */
// 联合类型 , 给一个变量可以指定它拥有多个类型 , 中间用中竖线隔开
function fn(arg: string | number): number {
if(typeof arg === 'string') {
return arg.length
} else if (typeof arg === 'number') {
return arg
} else {
return arg
}
}
// fn(true) // 报错
3.8、字面量
可以使用字面量去指定变量的类型，通过字面量可以确定变量的取值范围
let color: 'red' | 'blue' | 'green';
let num: 1 | 2 | 3; 
3.9、枚举 ( enum )
使用枚举类型可以为一组数值赋予友好的名字
// 只有 key 没有值 ，则值默认是 0 开始 0 1 2
enum Color {
Red,
Green,
Blue,
}
或
enum Color {
Red = ‘a’,
Green = 2,
Blue = 3,
}
let c: Color = Color.Green;
面试中会使用到的知识点 :
// 枚举类型 , 多个选一 , 可以理解为 , 它是自定义了一个类型 , 只不过这个类型是多选一的类型
// 枚举类型 , 它是 【可以】设置值的 ， 如果你不设置 ， 则默认值是从 0 开始
enum Color {
'red', // 0
'green' = 'green',
// 枚举类型 , 如果在中间有自定义设置值 , 则设置值下一个字段必须要设置值 , 最好设置数字
// 设置数字后 , 其下面的字段就可以不用设置了 , 其下面的字段值从上面的值的数字 + 1 开始
'blue' = 100,
'pink' // 101
}
// 声明一个变量 , 此变量的类型为 Color 自定义的枚举类型
// 此时变量的值只能在此 Color 枚举类型中选择一个使用
let arg: Color;
arg = Color.red
console.log(arg); // 0
工作中的写法 :
3.10、object
let obj: object = {}
let obj:{id:number,name?:string} // ?可选
// id 是必须要有的，后面可以任意 key，key 为字符串，值为任意类型
let obj:{id:number,[props:string]:any}
// 给函数参数定义类型和返回值定义类型
type fnType = {(a:number,b:number):number }
const fn:fnType = (a:number,b:number):number=>a+b
3.11、array
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
3.12、元组( tuple )
元组类型 允许表示一个已知元素 数量 和 类型 的 数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string 和 number 类型的 元组 。
let x: [string, number]
x = ["hello", 10]
3.13、自定义类型
type url = string
let httpurl:url
httpurl = 'http://xxx.com'
type User = {
name:string,
age:number
}
let user:User
user = {name: 'aa',age:20}
3.14、联合类型
给变量指定多个类型
let id:number|string
function fn(el:string|number){
}3.15、类型断言
有些情况下，变量的类型对于我们来说是很明确，但是 TS 编译器却并不清楚，此时，可以通过类型断言来告诉编译器变量的类型，断言有两种形式
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;
let strLength: number = (<string>someValue).length;
!. ?： ??
四、TS 编译配置
网址：编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集
tsc 编译是可以通过 tsconfig.json 来进行自定义配置。
tsc --init 它会自动生成一个 tsconfig.json 文件
手动在项目根目录 src 下面创建名称为 tsconfig.json 文件
配置常用的配置选项
{
// 用来指定哪些 ts 文件需要被编译
// src 目录下面的任意目录和任意文件
"include":[
"./src/**/*"
],
// 编译器的选项
"compilerOptions":{
// 用户指定 ts 被编译为 es 的版本 默认为转为 es3 esnext 最新版本
"target":"es5",
// 指定要使用的模块化规范
"module":"es6",
// 用户来指定编译后文件所在的目录
"outDir":"./dist",
// 是否对 js 文件进行编译，默认是 false
"allowJs": true,
// 是否检查 js 代码，是否符合语法规范，默认 false
"checkJs": true,
// 当有错误时不生成编译后的文件 true 有错就不生成
"noEmitOnError": true,
// ------------------------------------------------
// 开启严格检查
"strict": true
}
}小知识点 => JSON5 :
配置好配置文件后，就可以执行
// 实时编译，只要文件有修改就会自动进行编译，不在需要修改后手动执行
tsc -w
五、Typescript 类
TypeScript 是面向对象的 JavaScript。类 描述了所创建的对象共同的属性 和 方法。
TypeScript 支持面向对象的所有特性，比如 类、接口 等。
5.1、定义类
class 类名 { 属性名: 类型; // 静态属性 static 属性名:类型; // 只读属性 readonly 属性名:类型 = 值; // 构造方法 constructor(参数: 类型){ this.属性名 = 参数; } // 实例方法 方法名(){ .... } }
// readonly 只读 , 此成员属性只能 读 , 不能 修改
公有的 public
默认在不写时 , 就是公有的 , 定义的属性或方法在本类或子类或实例中都可以调用
// TS 中的 类 , 定义使用 class 关键字 class User { // 成员属性 /* readonly 只读 , 此成员属性只能读 , 不能修改 作用就和 const 声明变量一样 , 只不过它作用在类成员属性中 , 用它可以来定义类的成员属性常量 */ // id: number = 1 readonly id: number = 1 /* 公有的 public 默认在不写时 , 就是公有的 , 定义的属性或方法在本类或子类或实例中都可以调用 */ /* 受保护的 protected 只能在 本类 或 子类 中使用 */ /* 私有的 private 只能在 本类 中使用 */ /* public */ /* name: string constructor(name: string) { this.name = name } */ // name!: string public name: string = '张三' // public 关键字 可不写 // name: string = '张三' getId() { return this.id } getName() { return this.name } } // 继承 class List extends User { getName() { return this.name } } const user = new User // user.id = 1000 console.log(user.name); // 张三 console.log(user.getName()); // 张三受保护的 protected , 只能在本类或子类中使用
私有的 private , 只能在本类中使用
5.2、属性存取器
对于一些不希望被任意修改的属性，可以将其设置为 private ，直接将其设置为 private 将导致无法再通过对象修改其中的属性，我们可以在类中定义一组读取、设置属性的方法，这种对属性读取或设置的属性被称为属性的 存取器 。
class Person{
private _name: string;
constructor(name: string){
this._name = name;
}
// 获取器
get name(){
return this._name;
}
// 修改器
set name(name: string){
this._name = name;
}
}
class User {
private _age: number = 20
// 获取器
get age() {
// return this._age >= 20 ? 18 : 20
return this._age
}
// 存取器
set age(val: number) {
if (val > 150) val = 150
if (val <= 0) val = 1
this._age = val
}
}
const user = new User;
user.age = 1000
console.log(user.age); // 150
5.3、继承
通过 继承 可以将其他类中的 属性 和 方法 引入到当前类中
class A { }
class B extends B { }
5.4、抽象类
抽象类是专门用来被其他类所继承的类，它只能被其他类所继承不能用来创建实例
abstract class A {
// 抽象方法 没有实现方法体 规则
abstract run([参数]): void;
fn(){
console.log('AAA');
}
}
class B extends A {
// 实现抽象方法
run(){
console.log('冲起来~');
}
}
5.5、接口
接口主要负责定义一个类的结构，类要实现此接口后，对类只有包含接口中定义的 所有属性 和 方法时才能定义成功。
- 类 接口
interface Person{
name: string;
say():void;
}
class Student implements Person{
constructor(public name: string) {}
say() {
console.log('大家好，我是' + this.name);
}
}
// 接口中的方法 , 都是抽象方法 , 没有具体的实现方法
/* 接口在面向对象中 , 它只能被 类 所实现
而且类可以实现多个接口 , 多个接口的实现用逗号隔开 */
// 定义一个接口的 关键字 interface , 里面的抽象方法 【不需要】(abstract) 关键字
// 定义一个接口 -- 【规则】 ( 接口它只能被实现 , 不能被实例化 )
interface Person {
// 属性
name: string
// 方法
hello(msg: string): string
}
/* const p = new Person */
// 接口只能通过类来实现它 , 在类中一定要实现接口中定义好的属性或方法
class User implements Person {
name: string = '李四'
hello(msg: string): string {
return this.name + '---' + msg
}
}
const user = new User
console.log(user.hello('abc'));
- 函数 接口
// 定义接口 -- 它不能用在 function 定义的函数中
interface searchInterface {
(kw: string, page?: number): string[]
}
// 使用
const searchFn: searchInterface = (kw:string):string[] => ['aaa', 'bbb']
// 接口在 ts 中还可以用来给函数定义规则 , 函数参数规则
interface Person {
// 此接口是给函数来定义规则的
/* 如果接口给函数来定义规则 , 它的类型必须一致
但是函数的形参名称可以自定义(不一样) , 但是建议还是一致 */
(id: number, name: string, age?: number): string
}
const App: Person = (id: number, name: string, age?: number): string => {
return `您的编号: ${id}, 姓名: ${name}, 年龄: ${age ?? 20}`
}
console.log(App(1, 'lisi', 30));
// 接口也是类型 , 它和 type 是一样的 , 只不过 type 不可以用于类的实现 /* interface UserInterface { id: number age: number run: (name: string) => void } let lisi: UserInterface lisi = { id: 1, age: 20, run(name: string) { console.log(name); } } lisi.run('abc') */ // 定义 规则 /* ajax 得到用户列表数据为 [ { id: 1, name: 'zhangsan', age: 18, sex: 0 }, { id: 2, name: 'lisi', age: 20, sex: 1 }, { id: 3, name: 'wangwu', age: 22, sex: 0 }, ] */ // 先定义小的 ( type 来定义类型 ) , 在定义大的 ( interface 定义类型 ) enum SexEnum { 'male', 'female' } // 定义小的 type UserType = { id: number, name: string, age: number, sex: SexEnum } // 定义大的 interface UserInterface { data: UserType[] } const returnValue = [ { id: 1, name: 'zhangsan', age: 18, sex: 0 }, { id: 2, name: 'lisi', age: 20, sex: 1 }, { id: 3, name: 'wangwu', age: 22, sex: 0 }, ] const ajax = (): UserInterface => { return { data: returnValue } }
六、泛型
定义一个函数 或 类时，有些情况下无法确定其中要使用的具体类型（返回值、参数、属性的类型不能确定）, 此时泛型便能够发挥作用。
6.1、泛型函数
在没有没学过泛型之前可以使用，但是这样使用 any 会关闭 TS 的类型检查，其次这样设置也不能体现出 参数 和 返回值 是相同的 类型
function test(arg: any): any{
return arg;
}使用泛型
// 泛型继承
interface fnInterface {
length: number
}
function fn<T extends fnInterface>(arg: T): T {
return arg
}
fn<string>('abc')
fn<number[]>([1, 2])6.2、泛型类
class MyClass<T>{
num!: T;
constructor(num: T){
this.num = num;
}
}
const c = new MyClass<number>(10)
// 泛型继承
interface MyInter{
length: number;
}
function test<T extends MyInter>(arg: T): number{
return arg.length;
}
1161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
