TypeScrtpt学习

TypeScript 开发环境搭建

安装TS

下载TS的编译器，它能够把TS文件转为JS文件。

npm install -g typescript

编译TS

手动编译：使用tsc命令将一个TS文件转为JS文件。

tsc index.ts   
//如果报错ts-node : 无法将"ts-node"项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。
//可以试试 npx tsc index.ts   这种运行成功后如果需要使用Code Runner插件的话，需要将插件运行命令更换为npx开头，往下看有更换的步骤

自动编译：编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。

tsc index.ts -w  
//如果不行的话可以试试 npx tsc index.ts -w

vsCode中运行TS

在 vsCode中运行TS文件，也可以直接运行JS文件

• VSCode安装Code Runner插件

• 全局安装ts-node模块：npm i ts-node -g

• 采用右键Run Code 或者 快捷键alt+ctrl+n可以运行TS文件(这里要记得项目路径中不能含有中文字符,否则找不到路径,或者直接报错)

(如果输出代码有中文乱码的话，可以去Code Runner插件设置搜索Run in Terminal 将其选中)

(如果路径不含中文还是报错的话，在插件设置随便找个在setting.json中编辑点进去找到code-runner.executorMap选项里面找到typescript值更换为npx ts-node 保存，这样右键运行时就会按照指定命令运行)

以下所有的笔记参考都来自于此网站,点击就能进入,特别适合学习tyscript

类型声明

Ts代码

let num:number = 10
num=11 //num只能为number类型


function abc(a:string){
  console.log('a',a);
}
abc("123") //只能传入string类型的值

// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值

编译后的JS代码

var num = 10;
num = 11; //num只能为number类型
function abc(a) {
    console.log('a', a);
}
abc("123"); //只能传入string类型的值
// 类型声明 指定ts变量(参数,形参)的类型 ts编译器, 自动检查
// 类型声明给变量设置了类型,使用变量只能存储某种类型的值

基础数据类型

Ts代码

// boolean类型
let flag:boolean = true
flag = false  //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错

// number类型(支持每个进制)
let a:number = 123 //十进制
let a1:number = 0b1010 //二进制
let a2:number =0o12 //八进制
let a3:number =0xa //十六进制
a=11 
// a="11" 报错,不能给string类型

// string类型
let str:string = "123"
// str = 123 报错
str = ''

// undefined和null类型(作为了解,不经常用)
let u:undefined = undefined
let n:null = null
// u=123 // 报错

// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
let b:number = undefined
let str1:string = null
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用

编译后的JS代码

// boolean类型
var flag = true;
flag = false; //这里只能为布尔值(即使没有给flag声明类型,但是ts会根据第一次赋值的类型作为定义的类型)
// flag = 123 报错
// number类型(支持每个进制)
var a = 123; //十进制
var a1 = 10; //二进制
var a2 = 10; //八进制
var a3 = 0xa; //十六进制
a = 11;
// a="11" 报错,不能给string类型
// string类型
var str = "123";
// str = 123 报错
str = '';
// undefined和null类型(作为了解,不经常用)
var u = undefined;
var n = null;
// u=123 // 报错
// undefined和null还可以作为其他类型的子类型
// undefined和null可以赋值给其他类型的变量
var b = undefined;
var str1 = null;
//以上两个在vscode会标红,但可以实际编译出,编译不会报错,可以正常使用

数组和对象类型

Ts代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
let arr1: number[] = [1, 2, 3]
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12]
// 第二种方式 泛型
let arr2: Array<number> = [10, 20, 30]
arr2 = [40, 50, 60, 70, 80]

// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
let obj:object = {}
// obj=123 报错
// obj="123" 报错
obj=null
obj=undefined
obj=[]
obj=new String() //实例对象
obj =String //类也是属于object

编译后的JS代码

// 定义数组类型,并且数组内的数据类型为number
// 第一种方式
var arr1 = [1, 2, 3];
arr1 = [4, 5, 6, 7, 8, 9, 10, 11, 12];
// 第二种方式 泛型
var arr2 = [10, 20, 30];
arr2 = [40, 50, 60, 70, 80];
// 定义对象
// object 表示非原始类型,除了number,string,boolean之外的类型都是非原始类型(包括null,undefined)
var obj = {};
// obj=123 报错
// obj="123" 报错
obj = null;
obj = undefined;
obj = [];
obj = new String(); //实例对象
obj = String; //类也是属于object

any和void两种类型

Ts代码

// any 任何类型
let h:any=123
h="123"
h=true
h=null
h=undefined
h=[]
h={}

// 数组可以存any任意类型数据
let newArr:any[]=[1,"123",true,{}]
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 

// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1():void{
  console.log('123',123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错

// 下面代码代表没有任何类型
let v:void=undefined

编译后的JS代码

// any 任何类型
var h = 123;
h = "123";
h = true;
h = null;
h = undefined;
h = [];
h = {};
// 数组可以存any任意类型数据
var newArr = [1, "123", true, {}];
// 缺点:不能知道数组数据类型导致方法不能使用
// 例如,下面代码中newArr的0号元素不是数组,调不了方法,就报错了
// console.log(newArr[0].split('')); 
// void空值(表示没有任何返回值的函数,更多使用到函数上)
// 函数内 return undefined 也表示没有返回值
function fun1() {
    console.log('123', 123);
}
// console.log('fun1()',fun1()); //没有返回值,编译报错
// 下面代码代表没有任何类型
var v = undefined;

类型推断

Ts代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型

// 两中情况下进行类型推断
// 1.定义函数时候
let t = 123
// t="123" //报错,ts在t=123时候将t的类型定义为了number

// 2.不赋值情况下定义为any类型
let g;
g=123
g="123"
g=true
g=undefined
g=null
g=[]
g={}

编译后的JS代码

// 类型推断:ts在没有明确的指定类型的时候推测一个类型
// 两中情况下进行类型推断
// 1.定义函数时候
var t = 123;
// t="123" //报错,ts在t=123时候将t的类型定义为了number
// 2.不赋值情况下定义为any类型
var g;
g = 123;
g = "123";
g = true;
g = undefined;
g = null;
g = [];
g = {};

联合类型

Ts代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
let f: boolean | number | string = true
f = 123
f="123"
// f=[] //报错,没有进行联合声明

// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法

编译后的JS代码

// 联合类型:表示取值可以为多种类型中的一种
// flag true,1 false,0
var f = true;
f = 123;
f = "123";
// f=[] //报错,没有进行联合声明
// 联合类型和any差不多,如果想要调用属性或者方法的话,只能调用他们类型共用的属性或者方法

接口

对象类型

Ts代码

// 接口是对行为的抽象,用于对「对象的形状（Shape）」进行描述。理解为一种约束
// 接口一般首字母大写
// 首字母一般为I
interface Person {
  name: string
  age: number
}

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
let tom: Person = {
  name: 'Tom',
  age: 25,
}

// 可选属性
// 有时我们希望不要完全匹配一个形状，那么可以用可选属性：
interface Person2 {
  name: string
  age?: number
}
// 属性?:值   就是可选属性的语法
let tom1: Person2 = {
  name: 'Tom',
}

// 任意属性
// 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：
// 有时候我们希望一个接口允许有任意的属性，可以使用如下方式：
interface Person3 {
  name: string
  age?: number
  [propName: string]: any //如果有确定的类型,可以用确定的类型,但是一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集,还是建议使用any类型
  // [propName: string]: string | boolean | number
}

let tom2: Person3 = {
  name: 'Tom',
  gender: 'male',
}

// 只读属性
// 有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：
interface Person4 {
  readonly id: number;
  name: string;
  age?: number;
  [propName: string]: any;
}

let tom3: Person4 = {
  id: 89757,
  name: 'Tom',
  gender: 'male'
};

// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。

编译后的JS代码

// 接口内有什么属性,那么使用接口类型的也必须有什么属性(不能多也不能少)
var tom = {
    name: 'Tom',
    age: 25,
}
// 属性?:值   就是可选属性的语法
var tom1 = {
    name: 'Tom',
}
var tom2 = {
    name: 'Tom',
    gender: 'male',
}
var tom3 = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
}
// tom3.id = 9527;  报错 无法为"id"赋值,因为它是只读属性。

数组类型

Ts代码

// 不常用
interface NumberArray {
  [index: number]: number //任意属性,index表示数组中的下标,数组内数据为number类型
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5]

编译后的JS代码

var fibonacci = [1, 1, 2, 3, 5];

函数类型

Ts代码

interface SearchFunc {
  // (参数:类型,....):返回值类型
  (a: string, b: string): boolean 
}
const mySearch = function (a: string, b: string):boolean {
  return a.search(b) !== -1
}

console.log('mySearch()',mySearch("1","2"));

编译后的JS代码

var mySearch = function (a, b) {
    return a.search(b) !== -1;
};
console.log('mySearch()', mySearch("1", "2"));

函数

定义函数的方式

Ts代码

// h函数声明,命名函数
function add(a: number, b: number): number {
  return a + b
}
// 函数表达式,匿名函数
let add2 = function (a: number, b: number): number {
  return a + b
}
console.log('add2(1,3)', add2(1, 3))

// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
let add3: (a: number, b: number) => number = function (
  a: number,
  b: number
): number {
  return a + b
}
console.log('add3(1,3)', add3(1, 3))

编译后的JS代码

// h函数声明,命名函数
function add(a, b) {
    return a + b;
}
// 函数表达式,匿名函数
var add2 = function (a, b) {
    return a + b;
};
console.log('add2(1,3)', add2(1, 3));
// 函数完整写法
// 等于号左边的括号里面代表参数和参数类型,箭头函数右边的number是返回值类型
var add3 = function (a, b) {
    return a + b;
};
console.log('add3(1,3)', add3(1, 3));

可选参数和默认参数

Ts代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
let getName = function (x: string, y?: string): string {
  return x + y
}
console.log(getName('zhang'))

// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
let getName2 = function (x: string = 'zhang', y?: string): string {
  return x + y
}
console.log(getName2())

编译后的JS代码

// 可选参数(注意:必选参数不能放到可选参数后面)
// 在参数后面加个?代表可有可无
var getName = function (x, y) {
    return x + y;
};
console.log(getName('zhang'));
// 默认参数
// x参数不传就默认是zhang
// 默认参数可以放到可选参数后面
var getName2 = function (x, y) {
    if (x === void 0) { x = 'zhang'; }
    return x + y;
};
console.log(getName2());

剩余参数和函数重载

Ts代码

// 剩余参数
function fn(x: string, y: string, ...args: number[]) {
  console.log('x,y,args', x, y, args)
}
fn('', '', 1, 2, 3, 4, 5)


// 函数重载:函数名相同,形参不同的多个函数
// 实现数字 相加 字符串 拼接
// 将最下面代码简化函数重载声明(因为联合类型的都有多个类型,类型不确定,这里适合使用函数重载)
// 使用重载定义多个函数类型
function newAdd(x: string, y: string): string
function newAdd(x: number, y: number): number
function newAdd(x: string | number, y: string | number): string | number {
  if (typeof x == 'string' && typeof y == 'string') {
    return x + y //字符串拼接
  } else if (typeof x == 'number' && typeof y == 'number') {
    return x + y //数字相加
  } else {
    return 0
  }
}
newAdd(1, 2)
newAdd('zhang', 'san')

编译后的JS代码

// 剩余参数
function fn(x, y) {
    var args = [];
    for (var _i = 2; _i < arguments.length; _i++) {
        args[_i - 2] = arguments[_i];
    }
    console.log('x,y,args', x, y, args);
}
fn('', '', 1, 2, 3, 4, 5);
function newAdd(x, y) {
    if (typeof x == 'string' && typeof y == 'string') {
        return x + y; //字符串拼接
    }
    else if (typeof x == 'number' && typeof y == 'number') {
        return x + y; //数字相加
    }
    else {
        return 0;
    }
}
newAdd(1, 2);
newAdd('zhang', 'san');

类型断言

Ts代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
function getLength(x:string|number):number{
  if((x as string).length){
    return (<string>x).length
  }else{
    return x.toString().length
  }
}

console.log(getLength(123));
console.log(getLength("123"));

// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。
(window as any).a = 10

// 将any断言为一个具体的类型
function abc(x:any,y:any):any {
  return x+y
}
let a = abc(1,2) as number //数值类型
let b = abc(1,2) as string //字符串类型

编译后的JS代码

// 定义一个函数,获取到一个数字或者字符串的长度
// 类型断言:可以手动指定一个类型
// 2种方式
// 1.变量 as 类型
// 2.<类型>变量
// 将联合类型断言为其中一个类型
function getLength(x) {
    if (x.length) {
        return x.length;
    }
    else {
        return x.toString().length;
    }
}
console.log(getLength(123));
console.log(getLength("123"));
// 将任何一个类型断言为any,any类型是访问任何属性和方法的
// 它极有可能掩盖了真正的类型错误，所以如果不是非常确定，就不要使用 as any。
window.a = 10;
// 将any断言为一个具体的类型
function abc(x, y) {
    return x + y;
}
var a = abc(1, 2); //数值类型
var b = abc(1, 2); //字符串类型

后面的有空再更新

类型别名和字符串字面量类型

Ts代码

编译后的JS代码

元组Tuple

Ts代码

编译后的JS代码

枚举Enum(一)

Ts代码

编译后的JS代码

枚举Enum(二)

Ts代码

编译后的JS代码

类

属性和方法

Ts代码

编译后的JS代码

类的继承

Ts代码

编译后的JS代码

存取器

Ts代码

编译后的JS代码

静态成员

Ts代码

编译后的JS代码

public、private、protected修饰符

Ts代码

编译后的JS代码

readonly以及参数属性

Ts代码

编译后的JS代码

抽象类和类的类型

Ts代码

编译后的JS代码

类实现接口以及接口继承接口

Ts代码

编译后的JS代码

接口继承类

Ts代码

编译后的JS代码

声明合并

Ts代码

编译后的JS代码

泛型的基本使用

Ts代码

编译后的JS代码

多个泛型参数

Ts代码

编译后的JS代码

泛型约束

Ts代码

编译后的JS代码

泛型接口和泛型类

Ts代码

编译后的JS代码