前端笔记|TypeScript基础 javascript|前端|typescript

TS在js的基础上添加了很多java语言的特征
全局安装：
typescript： npm install -g typescript
执行ts文件： npm i -g ts-node
生成tsconfig.json配置文件：tsc -init
1. 用VSCode创建一个.ts文件

文章图片

2. 强类型–为变量指定变量类型

var uname:string uname = "1" uname = null//no uname = undefined//no uname = 1//no uname = {}//no uname = []//no uname = function(){}//no

var uname:string uname = "1" function a(uname:string){ //给形参显示指定类型 return uname.split(""); } a('qwe')//自动监测参数类型是否匹配

文章图片

3. ts文件在浏览器上无法运行，需要执行ts命令：tsc 01.ts
ts会检测【同时打开的】文件中是否存在命名冲突

文章图片

4. 基础数据类型

var a:null a = nullvar b:undefined b = void 0var c:string c = 1+""var d:number d = Math.PI d = Number.MAX_SAFE_INTEGER d = 2 ** 24 var e:any //任意类型 e = {} e = []var f: string | boolean //混合类型 f = `${a}` f = true

5. 数组类型

//规定数组元素类型为 number //基础写法-01 var TS_arr:Array = [1,2,3,4,null,undefined] //基础写法-02 var TS_arr:number[] = [1,2,3,4] //多类型 var TS_arr:(number | string |null | undefined)[] = [1,2,3,4,null,undefined]//数组对象写法 -01 var cc:{a:number,b:string}[] = [ {a:1,b:"aaac"}, {a:3,b:"cccc"} ] //数组对象写法 -02 type t = {a:number,b:string} var cc:t[] = [ {a:1,b:"aaac"}, {a:3,b:"cccc"} ] //数组对象写法 -03 class t{ a:number b:string } var cc:t[] = [ {a:1,b:"aaac"}, {a:3,b:"cccc"} ]

6. 接口

interface ts_json { a:boolean, b:string, c?:number, // 加了问号代表 c属性可以不写 [propname:string]:any, //写任何属性不被约束（属性名是string类型属性值是任何类型） say():string, // 必须有say方法而且返回值是string类型 }//对对象字面量进行约束 var ts_json_01:ts_json = { a:true, b:"", c:1, d:true, e:undefined, say() { return "返回值是接口中定义的string类型" }, }//对类进行约束 class A implements ts_json{ a = true b = "" c = 1 say(){ return "返回值是接口中定义的string类型" } }//接口继承 interface ts_son extends ts_json{ www() : string }class B implements ts_son{ a = true b = "" c = 1 say(){ return "返回值是接口中定义的string类型" } www(){ return "ts_son继承了 ts_json 所以这个类不仅得接受 ts_json接口的约束还得添加一个 ts_son中约束的 www方法" } }console.log(ts_json_01);

7. 对象类型

//接口约束对象 interface ts_json { a:boolean, b:string, c?:number, // 加了问号代表 c属性可以不写 } var ts_json_01:ts_json = { a:true, b:"", } console.log(ts_json_01); //另一种写法 const aa: { a:boolean, b:string, c:number, } = { a:true, b:"", c:123, } console.log(aa);

8. 类修饰符 public protected private

class Limit{ public a=1 //实例化对象可用 protected b=2 // 类以及子类内部可用 private c=3 // 当前类内部可用 } //ts定义一个类 const a :Limit = new Limit(); console.log(a.a)

9. 类型注解类型推断

//类型注解:手动添加变量的类型 //类型推断:程序可以推断一部分变量的类型所以可以不用特意添加 let a = 1; a = "" //报错

10. 函数参数类型和返回类型检测

//有返回值写法 let a = 1; function aa(b:number):number{//防止类型意外变更 return b } aa(a) //无返回值写法 function aa(b:number):void{//防止代码中出现return语句单写一个 return不会出错 console.log(b+"") return ""; //报错 } aa(a) //执行死循环 let a = 1; function aa(b:number):never{//让函数一直执行 throw new Error() } function bb(b:number):never{//让函数一直执行 while(true){} }//参数是对象 function a({aa}:{aa:number}){ return aa } a({aa:1})

11. 元组解决数组类型与元素对应的顺序不同

//一维数组 const arr :[string,number] = ["",1] //二维数组 const arr :[string,number][] = [ ["",1], ["",1] ]

12. ts 类的 static getter setter

class A { readonly b :string = "readonly关键字设置属性只读" constructor(private _a:string){} //在构造函数内定义一个 _a 属性简化了定义属性的写法 get a(){ // getter return this._a + "_get" } set a(val){ // setter this._a = val + "_set" } static saw(){//定义静态方法直接通过类名 . 方法名调用不用再实例化对象 console.log("saw方法") } } let aa = new A("sss") aa.a = "修改a__" //aa.b = "修改b属性" //报错 console.log(aa.a) //调用静态方法 A.saw()

13. ts 抽象类

//abstract 关键字定义抽象类和抽象方法 abstract class A{ abstract sss():any } class B extends A{ sss() { console.log("B类需要定义 sss的方法体"); } }

14. tsconfig.json 文件常用配置把注释解开即可

{ "include": ["01.ts"], //只编译 01.ts "exclude": ["02.ts"], //编译除了 02.ts文件 "files": ["*.ts"],//编译所有文件 "compilerOptions": { "removeComments": true,//去掉注释在执行的时候直接终端输入 tsc即可 "strict": true,//开启严格模式 "noImplicitAny": true,//允许注释类型为any 的可以不用特意声明 any "rootDir": "./src",//入口文件路径 "outDir": "./build", //出口文件路径 "sourceMap": true, //编译后文件和源文件的映射方便排错 "noUnusedLocals": true,// 未使用的变量不再进行打包 } }

15. 联合类型和类型守护

interface AI { a:string, ai():any } interface BI { b:string, bi():any } //联合类型 interface AI { a:string, ai():string } interface BI { b:string, bi():string }function jw(j:AI | BI){//联合类型 //类型守护判断属于哪个接口 let a = (j as AI).a; console.log("a=>",a); if(a){ let ai = (j as AI).ai; console.log(ai()); } let b = (j as BI).b; console.log("b=>",b); if(b){ let bi = (j as BI).bi; console.log(bi()); } } jw({a:"aaa",ai(){return "调用了ai方法"}}) jw({b:"bbb",bi(){return "调用了bi方法"}})

16. 枚举类型

enum TYPE { //定义枚举类型默认从0开始也可以像这样手动设置 A = 1, B = 2, C = 3, } //反查枚举属性 console.log("反查A=>", TYPE[1]); function F(type: any) { switch (type) { case TYPE.A: console.log("case_a"); break; case TYPE.B: console.log("case_b"); break; case TYPE.C: console.log("case_c"); break; } } F(TYPE.B);

17. 泛型它像一个参数一样把一个类型做参数传递

//把类型做参数传递 //基本泛型 T代表泛型 function A(a: T, b: T) { console.log(a, b); } A>("1", "2"); A(1, 2); //定义多个泛型 function D(a: T, b: P) { console.log(a, b); } D, number>("1", 1); //数组泛型 T代表泛型 function B(a: Array) { console.log(a); } B([1, 2]); //类泛型 class AA { constructor(private a: T) {} say_a(): T { return this.a; } } let a = new AA>("AA传入的参数"); console.log(a.say_a()); //泛型继承约定里面必须有一些东西 interface J { name: string; } function JC(jc: T) { console.log(jc); } JC({ name: "1" }); // J 中要求必须有一个 name属性 //泛型约束 function YS(jc: T) { //泛型只能从类型 string 和 number中选择 console.log(jc); } YS("ys参数");

18. 命名空间用命名空间将代码包裹防止代码全局污染实现模块化命名空间可以嵌套

//定义命名空间 namespace N { class A { constructor(public a: string) { console.log(a); } } class B { constructor(public b: string) { console.log(b); } } class C { constructor(public c: string) { console.log(c); } } //如果你想在外界使用需要 export 暴露出去 export class Main { constructor() { new A("aaaa"); new B("bbbb"); new C("cccc"); } } } let m = new N.Main();

技术参考 b站：【技术胖】TypeScript从入门到精通视频教程-2020年新版
TS官网：https://www.tslang.cn
【前端笔记|TypeScript基础】写博客这么长时间发现博客除了可以整理我们不经常用但是很重要的容易忘的知识点，更重要的是学习能力得到了很大的提升，坚持了这么久我依然觉得写博客从来不只是在做一两件事，而是把你的综合能力提升到了一定的高度，个人认为这就是学习的最好的方式。