TypeScript汇总（这一篇有点长）

1、安装：npm install typescript -g

2 、定义静态类型：static typing

const count:number = 918;
const myName:string ="abc";
// null,undefinde,boolean,void,symbol
// a对象类型，b数组类型，c对象类型，d函数类型
const a :{name:string,age?:number} ={name:"aa"}
const b :string[]=['ab','cd'];
class p{}
const c:p = new p() //对象类型
const d:()=>string = ()=>{return "1"}

3、 type annotation  类型注解  type inference 类型推断

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

4、函数参数返回类型：

// type annotation  类型注解
// type inference 类型推断
function sayHello({ one, two }: { one: number; two: number }): void {
  console.log("helloWorld");
}

5、类型别名：

const arr:(string|number)[] =[1,2,'a']
// type alias 
type Dd = { name: string, age: Number };
class Madam {
    name: string;
    age: number;
  }
const xiaoJieJies: Dd[] = [
  { name: "aa", age: 18 },
  { name: "bb", age: 28 },
];

6、元组

// 元组 解决了数组类型 csv 
const xiaojiejies: [string, string, number][] = [
    ["dajiao", "teacher", 28],
    ["liuying", "teacher", 18],
    ["cuihua", "teacher", 25],
  ];

7、接口

// 接口
interface Student {
    name: string;
    age: number;
    score: number;
    [propname: string]: any; //其他
  }

const screenResume = (Student: Student) => {
    Student.age < 24 && Student.score >= 90 && console.log(Student.name + "进入面试");
    Student.age > 24 || (Student.score < 90 && console.log(Student.name + "你被淘汰"));
  };
  
  const getResume = (Student: Student) => {
    console.log(Student.name + "年龄是：" + Student.age);
    console.log(Student.name + "fen是：" + Student.score);
  };
  const Student = {
    name: "dd",
    age: 18,
    score: 94,
  };
  
  screenResume(Student);
  getResume(Student);

接口限制类

class XiaoJieJie implements Girl {}
interface Teacher extends Girl {
  teach(): string;
}

 8、类的概念：

class Lady {
    content = "Hi，dd";
    sayHello() {
      return this.content;
    }
  }
  class XJ extends Lady {
    集成
    sayHello() {
        return super.sayHello() + "。你好！";
    }
      
    sayLove() {
      return "I love you";
    }
  }
  
  const goddess = new XJ();
  console.log(goddess.sayHello());
  console.log(goddess.sayLove());

private、protected和public,也是三种访问类型
构造函数的关键字是constructor

class Person{
    constructor(public name:string){}
}

class Teacher extends Person{
    constructor(public age:number){
        super('abc')
父类没有构造函数，子类也要使用super()
    }
}

const teacher = new Teacher(18)
console.log(teacher.age)
console.log(teacher.name)

 

  类的 Getter 和 Setter 

class D{
  constructor(private _age:number){}
  get age(){
      return this._age-10
  }
  set age(age:number){
    this._age=age
  }
}

static，这样就不用 new 出对象就

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

 抽象类，

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

}
class seniorTeacher extends Girl{
    skill(){
        console.log('xx！')
    }
}

 10、配置文件

11、类型保护，断言 4种守护方式

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();
  }
}
function judgeWhoTwo(animal: Waiter | Teacher) {
  if ("skill" in animal) {
    animal.skill();
  } else {
    animal.say();
  }
}
function add(first: string | number, second: string | number) {
  if (typeof first === "string" || typeof second === "string") {
    return `${first}${second}`;
  }
  return first + second;
}
function addObj(first: object | NumberObj, second: object | NumberObj) {
  if (first instanceof NumberObj && second instanceof NumberObj) {
    return first.count + second.count;
  }
  return 0;
}

11、枚举

enum Status {
  MASSAGE =1,
  SPA,
  DABAOJIAN,
}

 12、泛型

function myFun<ANY>(params: ANY[]) {
  return params;
}
myFun < string > ["123", "456"];
定义多个泛型，比如第一个泛型用T,第二个用P代表
泛型也是支持类型推断的，比如下面的代码并没有报错，这就是类型推断的功劳

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: "dd" },
  { name: "cc" },
  { name: "aa" },
]);
console.log(selectGirl.getGirl(1));

约束
class SelectGirl<T extends number | string> {
  //.....
}

 命名空间

npm init -y    
;  、、,创建package.json文件。
tsc -init
; ,生成tsconfig.json文件。
; 新建src和build文件夹，再建一个index.html文件。
; 在src目录下，新建一个page.ts文件，这就是我们要编写的ts文件了。
; 配置tsconfig.json文件，设置outDir和rootDir(在 15 行左右)，也就是设置需要编译的文件目录，和编译好的文件目录。
; 然后编写index.html，引入<script src="./build/page.js"></script>,当让我们现在还没有page.js文件。
; 编写page.ts文件，加入一句输出console.log('jspang.com'),再在控制台输入tsc,就会生成page.js文件
; 再到浏览器中查看index.html文件，如果按F12可以看到jspang.com，说明我们的搭建正常了。

 

 Require.js 的 CDN  

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
<body>
  <script>
    require(["page"], function (page) {
      new page.default();
    });
  </script>
</body>

 

 npm init -y,创建package.json文件
在终端中输入tsc --init,创建tsconfig.json文件
修改tsconfig.json配置rootDir和outDir.
新建src文件夹，在里边建立index.html,page.ts文件
编写index.html文件，并引入page.ts文件
编写page.ts文件。
yarn add --dev parcel@next