TypeScript入门到出门

强类型语言

TypeScript是强类型语言，静态类型分为基础静态类型（number，string，null，undefined，boolean，void，symbol）和对象类型

//对象类型
const xiaoJieJie: {
  name: string,
  age: number,
} = {
  name: "大脚",
  age: 18,
};
//数组类型
const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];
//类类型
class Person {}
const dajiao: Person = new Person();
//函数类型
const jianXiaoJieJie: () => string = () => {
  return "大脚";
}; // 代表定义的必须是函数切返回值为字符串

声明变量的时候需要声明变量的类型，声明后则可以使用改类型的所有方方法，例如let a：string = '哈哈'，则a就可以使用所有字符串的属性和方法，也可以自己定义静态类型，也就是接口
TypeScript包含的类型有如下
Undefined ; （声明但是未复制）
Number:数值类型; （支持整型和浮点型）
string : 字符串类型;（单双引号都可）
Boolean: 布尔类型；（js中的0和null在这不再代表false）
enum：枚举类型；（声明 ``）

enum REN{nan,nv,yao}   console.log(REN.yao) //2  下标
enum REN{nan='男',nv='女',yao='妖'}  console.log(REN.yao) //妖  值
console.log(REN[0])  //男

any : 任意类型；（可以随意改变声明的变量类型）
void：空类型；
Array : 数组类型;
Tuple : 元祖类型；
Null ：空类型。

工作细节

如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
如果 TS 无法分析变量类型的话， 我们就需要使用类型注解

函数

定义

function ReturnAge (age:number,stature?:string):string{
//这里string表示的是return的数据类型,stature加上问号后成为可选的形参
//默认参数的形式可以写成 stature:string= '身材'
//剩余参数的形式写成   ...xuqiu:string[]
//没有返回值时:void 即返回空值
//永远执行不完或者死循环:never
return '发现'+age+'岁的人'
}
let age:number = 18
let result:string  = ReturnAge(age)
//如果传进来的是一个对象并且限定类型
function add({ one: number, two: number }) {
  return one + two;
}

const total = add({ one: 1, two: 2 });

复习一下声明函数的几种方式

function a(){}
let a = function(){}
let a = (n1:number,n2:number):number=>{}

引用类型

array

//声明
let arr1:number[]     //声明数字类型数组
const stringArr: string[] = ["a", "b", "c"]; //声明字符串类型数组
const undefinedArr: undefined[] = [undefined, undefined];
const arr: (number | string)[] = [1, "string", 2];  // 声明包含数字和字符串的数组

const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];   //数组中含有对象

//或者用类型别名
type Lady = { name: string, age: Number };
const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

//类的形式也可以
class Madam {
  name: string;
  age: number;
}
const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

let arr2:Array<string>   //声明字符串类型数组
let arr2:Array<boolean>   //声明布尔类型数组

//赋值
let arr1:number[] = [1,2,3,50]
let arr2:Array<string> = ['哈哈哈','呵呵']
let arr2:Array<boolean> = [true,true,false]
//构造函数赋值
let arr1:number[] = new Array(1,2,3,50)
let arr2:Array<string> =  new Array('哈哈哈','呵呵')
let arr2:Array<boolean> = new Array(true,true,false)
//声明元祖
let x :[string,number] = ['hello',17]  //赋值顺序也得对上不然会报错

String

let a:String = new String('呵呵')
//[String:'呵呵']

复习一下字符串方法

let something:string = "清早起来打开窗，心情美美的，我要出去找小姐姐，心情美美的。"
let xiaoJieJie:string = "小姐姐"
console.log(something.indexOf(xiaoJieJie))   //19  从前面开始查找返回下标 没有返回-1
console.log(something.lastIndexOf(xiaoJieJie)) //19 从后面开始查找返回下标
str.substring(startIndex,[endIndex])  //截取字符串，第一个参数是开始的位置，没有第二个参数就是截取至末尾，有则是制定截取到的位置，但不包含
str.replace(subStr,newstr);  //替换字符串，第一个参数替换第二个参数

date

let d:Date = new Date()   //2018-09-06T06:48:12.504Z
let d:Date = new Date(1000)
let da:Date = new Date(2000)
console.log(d)  //1970-01-01T00:00:01.000Z
console.log(da) //1970-01-01T00:00:02.000Z
let d1:Date = new Date('2018/09/06 05:30:00')
let d2:Date = new Date('2018-09-06 05:30:00')
let d3:Date = new Date('2018-09-06T05:30:00')
let d:Date = new Date(year,month,day,hours,minutes,seconds,ms);

year 表示年份，4位数字。
month表示月份，数值是0(1月)~11(12月)之间的整数。
day 表示日期。数值是1~31之间的整数。
hours 表示小时，数值是0-23之间的整数。
minutes 表示分钟数，数值是0~59之间的整数。
seconds 表示秒数，数值是0~59之间的整数。
ms 表示毫秒数，数值是0~999之间的整数

RegExp

let reg1:RegExp = new RegExp("jspang")  //表示字符串规则里含有jspang
let reg2:RegExp = new RegExp("jspang",'gi')
//等同于
let reg3:RegExp = /jspang/
let reg4:RegExp = /jspang/gi

let reg1:RegExp =  /jspang/i
let website:string = 'jspang.com'
let result:boolean = reg1.test(website)
console.log(result)    //true
console.log(reg1.exec(website))
//[ 'jspang', index: 0, input: 'jspang.com' ]  分别表示查找的字符，找到的位置，查找的母体字符串

类的声明和使用

class XiaoJieJie{
    name:string;
    age:number;
    constructor(name:string,age:number){
        this.name = name
        this.age = age 
    }
    say(){
        console.log('小哥哥好')
    }
}
let jiejie:XiaoJieJie = new XiaoJieJie('范冰冰',18)
console.log(jiejie)  //XiaoJieJie {name:'范冰冰',age:18}

修饰符
成员的默认修饰符是public
public表示类的内外部都可以使用
private只允许类的内部使用
protected外部不能使用，子类可以使用

那么如何获得private成员呢

class Xiaojiejie {
  constructor(private _age:number){}
  get age(){
      return this._age
  }
}
const dajiao = new Xiaojiejie(28)
console.log(dajiao.age)   // 28

class XiaoJieJie2{
    public sex:string
    protected name:string
    private age:number
    public constructor(sex:string,name:string,age:number){
        this.sex=sex
        this.name=name
        this.age=age
    }
    public sayHello(){
        console.log('小哥哥好')
    }

    protected sayLove(){
        console.log('我爱你')
    }
}

var jiejie2:XiaoJieJie2 = new XiaoJieJie2('女','热巴',22)

console.log(jiejie2.sex)
console.log(jiejie2.name)   //报错
console.log(jiejie2.age)    //报错
jiejie2.sayHello()
jiejie2.sayLove()    //报错

只读属性

class Man{
    public readonly sex:string = '男'
}

var man:Man = new Man()
man.sex='女'
//报错

静态属性
可以直接通过类名的形式调用属性或者方法

class Girl {
  static sayLove() {
    return "I Love you";
  }
}
console.log(Girl.sayLove());

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

class Jspang{
    public name:string
    public age : number
    public skill: string
    constructor(name:string,age:number,skill:string){
        this.name = name
        this.age = age
        this.skill = skill
    }
    public interest(){
        console.log('找小姐姐')
    }
}
class JsShuai extends Jspang{
    public xingxiang:string = '帅气'
    public zhuangQian(){
        console.log('一天赚了一个亿')
    }
}

let shuai = new JsShuai("技术帅",5,'演讲')
shuai.interest()
shuai.zhuangQian()

重写就是在子类中重写父类的方法和属性

class JsShuai extends Jspang{
    public xingxiang:string = '帅气'
    public interest(){
        super.interest()  //这里表示也继承原来的，下面是添加的
        console.log('建立电商平台')
    }
    public zhuangQian(){
        console.log('一天赚了一个亿')
    }
}

抽象类
继承的子类必须完善继承过来的抽象方法

abstract class Girl{
    abstract skill()  //因为没有具体的方法，所以我们这里不写括号
}

class Waiter extends Girl{
    skill(){
        console.log('大爷，请喝水！')
    }
}
class BaseTeacher extends Girl{
    skill(){
        console.log('大爷，来个泰式按摩吧！')
    }
}
class seniorTeacher extends Girl{
    skill(){
        console.log('大爷，来个SPA全身按摩吧！')
    }
}

接口

如果一个变量是这个接口类型他就必须拥有接口要求的属性并且数据类型要相同

interface Husband {
    sex:string
    interest:string
    maiBaoBao?:Boolean
    [propname: string]: any;  // 代表属性名称为字符串，属性值任意，可以代替任意个成员
    say(): string;   //表示返回的数据类型
}
let myhusband:Husband ={ sex:'男',interest:'看书、作家务',maiBaoBao:true}

接口继承

interface Teacher extends Husband {
  teach(): string;
}

类被接口约束

class XiaoJieJie implements Girl {
  sex= "男";
  Interest:'打球';
  say() {
    return "欢迎光临 ，红浪漫洗浴！！";
  }
}

函数类型接口

interface  SearchMan{
    (source:string,subString:string):boolean
}

let mySearch:SearchMan

mySearch = function(source:string,subString:string):boolean{
    let flag =source.search(subString)
    return (flag != -1)
} 

console.log(mySearch('高、富、帅、德','胖')) //false

命名空间

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()

tsconfig.json文件的作用

include 制定编译包含的文件 "include":["1.ts","2.ts"]，可以使用通配符
exclude 与include作用相反
files 与include作用相同
compilerOptions中：
removeComments 在编译时去掉注释
strict 编译和书写严格按照ts规范

strict注释以后才可以配置下列项
noImplicitAny:false 允许你的注解类型any不用特意表明
strictNullChecks:false 允许null值为true，ts中出现null默认报错
rootDir 制定tsc命令入口文件 "rootDir":'./src'
outDir 制定tsc命令编译完成后出口文件 "outDir":'./build'
sourceMap 开启后tsc编译完成生成sourceMap文件，存储着位置信息
noUnusedLocals tsc对无用的变量进行提示
noUnusedParameters tsc对无用方法进行提示

联合类型和类型保护（类型守护）

联合类型

interface Waiter {
  anjiao: boolean;
  say: () => {};
}
interface Teacher {
  anjiao: boolean;
  skill: () => {};
}
function judgeWho(animal: Waiter | Teacher) {}

类型保护
类型断言

interface Waiter {
  anjiao: boolean;
  say: () => {};
}

interface Teacher {
  anjiao: boolean;
  skill: () => {};
}

function judgeWho(animal: Waiter | Teacher) {
  if (animal.anjiao) {
    (animal as Teacher).skill();
  }else{
    (animal as Waiter).say();
  }
}

in语法

function judgeWhoTwo(animal: Waiter | Teacher) {
  if ("skill" in animal) {
    animal.skill();
  } else {
    animal.say();
  }
}

typeof 语法

function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}

instanceof 语法
这种方法只能用在类上！！！

class NumberObj {
  count: number;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

泛型

函数泛型

function join<JSPang>(first: JSPang, second: JSPang) {
  return `${first}${second}`;
}
join < string > ("jspang", ".com");
//泛型数组
function myFun<ANY>(params: ANY[]) {
  return params;
}
myFun < string > ["123", "456"];

function myFun<ANY>(params: Array<ANY>) {
  return params;
}
myFun < string > ["123", "456"];
//多泛型定义
function join<T, P>(first: T, second: P) {
  return `${first}${second}`;
}
join < number, string > (1, "2");

类泛型

interface Girl {
  name: string;
}

class SelectGirl<T extends Girl> {
  constructor(private girls: T[]) {}
  getGirl(index: number): string {
    return this.girls[index].name;
  }
}

const selectGirl = new SelectGirl([
  { name: "大脚" },
  { name: "刘英" },
  { name: "晓红" },
]);
console.log(selectGirl.getGirl(1));
//约束
class SelectGirl<T extends number | string> {
  //.....
}
//规定泛型只能是数字型和字符串型

parcel打包ts

yarn add parcel@next --dev
可以在index.html中直接引入ts，在package.json中配置

{

  "scripts": {
    "test": "parcel ./src/index.html"
  },
}