学习 TypeScript 笔记

仅仅个人用来做笔记，如有不对请指出。
我是看的技术胖的视频，然后自己总结的笔记，想去看视频的同学，请去 
https://jspang.com

初识TypeScript

TypeScript是JavaScript 的超集

适合用于大型应用 或者多人合作

TypeScript 还是会像 less sass 一样 会在最后编译成JavaScript 和css

跨平台 且开源 注：js一定要学懂在看

js库 TS 也可以使用

TypeScript 提供了一些 类 接口 模块 利于组件化开发

Vue Ng React 推荐使用TypeScript

开发环境 安装

https://nodejs.org 先安装Node 可以安装最新版 具体百度

npm install typeScript -g 安装TS

tsc –version 查看版本如果出来说明安装成功

npm init -y -y表示默认

tsc –init 会生成一个tsconfig.JSON 是用来编译成js文件 的一个文件 eg：有时运行不好使 请删除这个重新下载

npm install @types/node –dev-save 解决模块生名文件问题

然后就可以写文件了

var a:string ="Hello TS";

右键编译 转换成js 然后使用 node 文件名.js 出现你打的文字就说明成功

变量类型

javascript 是弱类型语言 TypeScript是强类型语言 TypeScript有很多类型

1.undefined类型、

没赋值就是undefined

2.number类型

不仅可以设置整数类型 也可以设置小数类型
NAN 全称 Not a Number

3.string类型

单引号 双引号都是string类型

boolean类型

true false 只有这两个值 没有0 1

enum类型枚举类型

eg：人的类型：男 女 中(:技术胖日常开车
eg： enum REN(通常用大写声明)

enum REN(nan,nv,yao));
console.log(REN.yao);//打印索引下标
enum RENN(nan='男人'.nv='女');
console.log(RENN.nan);//打印男人

any 类型

eg：就是任何类型啥都行 （我感觉就是返回js类）

var t:any =10 
t=true;
console.log(t);打印true

void 空类型

Array 数组类型

Tuple 元祖类型

Null 空类型

TypeScript的函数

eg:代码的复用

function searchAV(AV:string):string{

    return 'search your AV' +AV;
}
var AV:string='010294590';
var result:string =searchAV(AV)
console.log(result);

eg: ?是可以不传的参数

function searchAV(AV:string,AVMING?:string):string{
    if(AVMING===undefind){
        return 'search your AVMING' +AV+AVMING;
    }else{
        return 'search your AV' +AV;
    }


}
var AV:string='010294590';
var result:string =searchAV(AV)
console.log(result);

三种函数得定义方式(完全支持ES 6,7,8,…)

函数声明法

function add(n1:number,n2:number){
    return n1+n2;
}
console.log(add(1,2));//打印3

函数表达式法

var add =function(n1:number,n2:number){
    return n1+n2;
}
console.log(add(1,2));//打印3

箭头函数

var add =(n1:number,n2:number):number => {
    return n1+n2;
}
console.log(add(1,2));//打印4 

函数中变量得作用域

变量得作用域:TypeScript函数划分 函数体内得变量 是封闭得 只在函数体内部起作用

什么是全局变量，局部变量？

函数体外就是全局变量，函数体内得就是局部变量 当重名得时候内部变量不会改变，内部变量引入不了外部变量

var app = function():void{
    var abc:string='asd';
    console.log(abc); //asd
}
app();
console.log(abc);//报错

引用类型-数组

引用类型

let A ={
    name:'wang',
    age=12,
    webChrom: 'wangxuelong.com',
    saysome:function(){
        console.log('112233');
    }
}
console.log(A.name);
A.saysome();

数组 –array String Date RegEXP

let arr:number[] //数值类型
let arr1:Array<string> //字符串类型
let arr2:Array<boolean> //布尔类型

字面量赋值法

let arr1:number[] = [];
let arr2:number[] = [1,2,3,4,5];
let arr3:Array<string> = ['aa','bb','cc'];
let arr4:Array<boolean> = [true,false,true];

构造函数赋值法

let arr1:number[] = new Array();
let arr2:number[] = new Array(1,2,3,4,5);
let arr3:Array<string> = new Array('aa','bb','cc');
let arr4:Array<boolean> = new Array(true,false,true);

坑🕳

let arr5:number[]=[1,2,true]//单一类型 不允许会报错

元祖是可以的(不建议使用)

let arr5:[string,number];
arr5=['hello',10]//正确的方法
//arr5=[10,'he']//错误的

引用类型得字符串

基本类型字符串，引用类型字符串

let a:string = 'xxbb';//基本类型
let b:String = new String('xxbb')//引用类型 String:'xxbb'
console.log(a.length) //4

查找字符串indexOf

let some:string='abcdefg,higklmn';
let find:string='abcdefg'
console.log(some.indexOf(find));//0
console.log(some.lastindexOf(find));//0 找最后一个 出现两次 选最后一次

截取字符串 substring()

let some:string='abcdefg,higklmn';
let find:string='abcdefg'
console.log(some.substring(8));//higklmn
console.log(some.substring(8,10));//hi

替换字符串 replace()

let some:string='abcdefg,higklmn';
let find:string='abcdefg';
console.log(some.replace('abcdefg','xxbb'));//xxbb,higklmn

引用类型-日期对象

1 不传值

let d:Date = new Date();
console.log(d); //不是当前中国时区？ 不知道为什么

2 传数字

let d:Date = new Date(1000);//1970-01-01 00:00:00向前数1000毫秒
console.log(d);//

3 传字符串

let d:Date = new Date('1970/01/01 00:00:00');
let d1:Date = new Date('1970-01-01 00:00:00');
let d2:Date = new Date('1970-01-01T00:00:00');
console.log(d);//1969-12-31T16:00:00.000Z
console.log(d1);//1969-12-31T16:00:00.000Z
console.log(d2);//1969-12-31T16:00:00.000Z
//这里打印结果 我这TS 时区是不一样的   我也不知道为什么

正则表达式

RegExp string

构造函数声明法

let reg:RegExp = new RegExp("js")//1.匹配字符串 2.修饰符（可选）
console.log(reg);// /js/

字面量声明 查找字符串text(string)返回TRUE FALSE exec(string)返回 【查找的东西 位置 内容】

let reg:RegExp = /js/
let findred:string = 'jis is js very good'
console.log(reg.test(findred))//true

面向对象编程-类的声明和使用

概念

类：类是对象具体事务的一个抽象

对象：对象时的具体表现

class findgirl{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
    }
    sayHello(){
        console.log('大马猴');
    }
}
let xxbb:findgirl =new findgirl('hxx',18);
console.log(xxbb)//findgirl { name: 'hxx', age: 18 }
xxbb.sayHello()//大马猴

面向对象编程-修饰符

public //曝光的 protected //保护的 private //私有的

class DaMahou{
    public sex:string 
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.name = name 
        this.age = age
        this.sex = sex
    }
    public sayHello(){
        console.log('我叫大马猴')；
    }
    protected sayHxx(){
        console.log('hxx');
    }
}

var xxbb:DaMahou = new DaMahou('男','xxbb',24)
console.log(DaMahou.sex) //男
console.log(DaMahou.name) //提示收到保护
console.log(DaMahou.age) //报错 私有属性
DaMahou.sayHello()//正常
DaMahou.sayHxx()//报错

readonly 只读 不能修改

class findName{
    public readonly name:string='xxbb'
}

var man:findName = new findName()
man.name = 'hxx'//报错

面向对象编程-继承和重写

继承：允许我们创建一个类（子类），从已有的类（父类）上继承所有的属性和方法，子类可以新建父类中没有的属性和方法。

class b{
    console.log(12);
}
extends//继承 a 继承于b
class a extends b {
    public xing:string ='asd';
}

面向对象编程-接口 就是与后端交互 interface

interface man{
    name:string
    sex:string
    age:number
    Dmh?:Boolean
}

let hxx:man = {
    name:'hxx',
    sex:'nv',
    age: '18'
}
console.log(hxx)//{ name: 'hxx', sex: 'nv', age: 18 }

接口规范

interface FindDMH{
    (name:string,sex:string):boolean
}
let hxx:FindDMH
hxx=function (name:string,sex:string):boolean{
    let flag =name.search(sex)
    return (flag!=1)
}
console.log(hxx('dmh','男'))//true

面向对象编程-命名空间

namespace shuaiGe{
    export class Dehua{
        public name:string = '刘德华'
        talk(){
            console.log('我是帅哥刘德华')
        }
    }
}

namespace bajie{
    export class Dehua{
        public name:string = '马德华'
        talk(){
            console.log('我是二师兄马德华')
        }
    }
}

let dehua1:shuaiGe.Dehua   = new shuaiGe.Dehua()
let dehua2:shuaiGe.Dehua   = new bajie.Dehua()
dehua1.talk()

结语：感觉TS 就是 好严谨啊 又get到了一个知识点

网站链接 https://jspang.com/posts/2018/06/27/typesript.html

打赏