typeScript笔记

Posted 2020-09-25 可爱的小熊

typeScript 是一种给 javascript 添加特性的语言扩展。如：类型批注和编译时类型检查、类、接口、模块。

数据类型系统: numbers, strings, structures, boolean等，当类型没有给出时，TypeScript 编译器利用类型推断以推断类型。如果由于缺乏声明，没有类型可以被推断出，那么它就会默认为是动态的 any 类型。any’类型是一种强大的兼容存在的 JavaScript 库的类型系统。他允许跳过 TypeScript 的编译时类型的检查。(这些值可能来自动态内容，例如从用户或第三方库。在这种情况下，我们要退出类型检查)

any:

var notSure: any = 4;//notSure 这个是不确定的值，默认先给一个数字 4

notSure = "this string";//改变这个值为 this string

notSure = false; //最终确定的值是一个 boolean 值.

数组 Array：
//第一种方式，你可以在数据类型之后带上’[]‘:
var list:number[] = [1, 2, 3];
//第二种方式，也可以采用泛型的数组类型：
var list1:Array<number> = [1, 2, 3];//泛型数组

var isFlag:boolean=false;这个 : 号代表应该是代表继承的意思

枚举 Enum
enum Color {Red, Green, Blue};//enum 关键字 枚举对象{声明变量}
var c1: Color = Color.Green;//从枚举里面拿出绿色出来赋给一个叫 c 的变量
//---------手动枚举所有值都设置---------------------
//默认枚举类型其实数值从 0 开始，你可以可用手动设置某一个成员的数值。例如我们可以将上文
的起始值定为 1：
enum Color1 {Red = 1, Green = 2, Blue = 4};
var c2: Color1 = Color1.Green;
//---------手动设置全部的枚举成员：---------------------
enum Color2 {Red = 1, Green, Blue};
var colorName: string = Color2[2];

var Color1;
(function (Color1) {
　　Color1[Color1["Red"] = 1] = "Red";
　　Color1[Color1["Green"] = 2] = "Green";
　　Color1[Color1["Blue"] = 4] = "Blue";
})(Color1 || (Color1 = {}));

void 和‘any’相对的数据类型则是’Void‘，它代表没有任何数据类型。我们常用的一个方法
没有任何返回值：
//,格式如：function doMain:void{}
function warnUser(): void {
alert("This is my void");
}

例子：ts & js

/***返回 string 一个值***/
function setTableRowhtml2():string{
　　var userName:string="";
　　$("tr").each(function(){
　　　　userName=$(this).find("td:eq(1)").html();
　　);
　　return userName;
}

Ts 编译生成的 js

/***返回 string 一个值***/
function setTableRowHtml2() {
　　var userName = "";
　　$("tr").each(function () {
　　　　userName = $(this).find("td:eq(1)").html();
　　});
　　return userName;
}

TypeScript 接口

/**--声明一个接口，这个接口不会在 js 上面出现，只会在显示一个 user 对象在 getUserInfo*/

interface IUserInfo{
  　  age : any;//定义一个任何变量的 age.
　　userName :string;//定义一个 username.
}
/*********获取用户信息*******/
function getUserInfo(user : IUserInfo):string{
　　return user.age+"======"+user.userName;
}
//用一个数组对象作为一个 user 对象传值过 getUserInfo 函数方法..参数必须要以接口
IUserInfo 对应上.
少传一个参数，typescript 会自动帮你检测报错,如果用纯 javascript 去写的话，不会报错，
ts 大大减少检查 js 问题

 

interface SquareConfig {
　　color?: string;//
　　width?: number;
}
/***************创建一个对象 function.**************/
function createSquare(config: SquareConfig): {color: string; area: number} {
//此时 newSquare 里面的参数必须与 :后面里面的参数名称一致.
　　var newSquare = {color: "white", area: 100};
　　if (config.color) {
　　　　newSquare.color = config.color;
　　}
　　if (config.width) {
　　　　newSquare.area = newSquare.area * config.width;
　　}
　　return newSquare;
}
//--createSquare 返回的对象是 newSquare，所有只能获取 color 和 area 并获取不了 width
这个属性的值..
var mySquare1 = createSquare({color: "red"});//与接口的变量 color 一样，此时这个值
是取出是默认值 color=red
var mySquare2 = createSquare({color1: "red"});//与接口的变量 color 不一样，此时这
个值是取出是默认值 color=white
console.log(mySquare1.color+"=="+mySquare1.area);//
console.log(mySquare2.color+"=="+mySquare2.area);//
var mySquare3 = createSquare({color: "yellow",width:80});//这里给了两个变量值，
一个是 color，一个是 width
console.log(mySquare3.color+"=="+mySquare3.area);//所以这个值必须等于 800JavaScript 的 的 search 函数//--typescript 的 function 类型结合 javascript 的 search 函数使interface searchFunt{

//声明一个两个变量..
　　(source: string, subString: string): boolean;
}
var mySearch : searchFunt;//声明一个 interface 变量接收
mySearch = function(source:string,subString:string){
　　var result = source.search(subString);
　　if (result == -1) {
　　　　return false;
　　}
　　else {
　　　return true;
　　}
}
$(function(){
　　var source:string ="this is ok";
　　var subString1:string ="ok";
　　var subString2:string ="not";
　　var result:boolean;
　　var result1= mySearch(source,subString1);//从 source 字符串上面找 ok，返回值
是 true
var result2= mySearch(source,subString2);//从 source 字符串上面找 not，返回
值是 false
alert(result1);//
alert(result2);
});

接口定义 Array
interface StringArray {
　　[index: number]: string;
　　//length: number;
}
var myArray:StringArray;
myArray = ["Bob", "Fred"];
$(function(){
　　$.each(myArray,function(key,val){
　　alert(val);
　　});
})

class 实现 implements 接口

interface IClock {
　　currentTime: Date;
　　setTime(d: Date);
}
//--实现 IClock 接口
class Clock implements IClock{
　　currentTime:Date;
　　constructor(h: number, m: number) { }//--构造函数方法
　　setTime(d:Date){
　　　　this.currentTime=d;
　　}
}
//--------------------------------------------------
interface IClock1 {
　　new (hour: number, minute: number);
}
class Clock1 {
　　currentTime: Date;
　　constructor(h: number, m: number) { }
}
var cs: IClock1 = Clock1;
var newClock = new cs(7, 30);
console.log(newClock);

扩展接口 Extending Interfaces
interface IShape{
　　color:string;
}
interface PenStroke {
　　penWidth: number;
}
//--接口继承接口,用，分割开多继承.
interface ISquare extends IShape,PenStroke {
　　sideLength: number;
}
//---赋值..
var square = <ISquare>{};
square.color="red";
square.sideLength=100;
square.penWidth=50;

混合型 Hybrid Types

interface Counter {
　　(start: number): string;//声明一个开始变量
　　interval:number;//声明一个间隔变量
　　reset(): void;//声明一个重置 function 方法
}
var c: Counter;
c(10);//开始.
c.interval=5.0;
c.reset();//重置.

TypeScript 类
//--这个是简单的 class
class Employee {
　　fullName: string;
}
var employee = new Employee();
employee.fullName = "Long long";//赋值
//说明这个属性是存在的..
if (employee.fullName) {
　　alert(employee.fullName);
}
Ts 文件编译成 js 文件代码
/// <reference path="../plugins/typescript/typings/jquery.d.ts" />
//--这个是简单的 class
var Employee = (function () {
　　function Employee() {
　　}
　　return Employee;
})();
var employee = new Employee();
employee.fullName = "Long long"; //赋值
//说明这个属性是存在的..
if (employee.fullName) {
　　alert(employee.fullName);
}

class使用 constructor super 关键字

一、-------------------

class Person{
　　userName:string;//声明一个名称
　　//构造方法
　　onstructor(paramVal:string){
　　　　this.userName=paramVal;
　　}
　　//--声明一个 getPersonInfo 方法，并在声明 age 变量
　　getPersonInfo(age:number=120):string{
　　　　return this.userName+"\n"+age;
　　}
}
class Student1 extends Person{
　　constructor(username:string){
　　　　super(username);
　　}
　　getPersonInfo(age=100){
　　　　var superMsg=super.getPersonInfo(age);
　　　　return this.userName+"\n"+age+"岁"+"\n\t\t"+"默认信息：" +superMsg;
　　}
}
class Student2 extends Person{
　　constructor(username:string){
　　　　super(username);
　　}
　　getPersonInfo(age=120){
　　　　var superMsg=super.getPersonInfo(age);
　　　　return this.userName+"\n"+age+"岁"+"\n\t\t"+"默认信息：" +superMsg;
　　}
}
var stu1=new Student1("周伯通");
var stu2=new Student2("老毒物");
var stuMsg1=stu1.getPersonInfo();
var stuMsg2=stu2.getPersonInfo(80);//传一个默认值给 getPersonInfo 方法

二、-------------------默认是 public-------

class MyAnimal {
　　private name:string;
　　//构造方法
　　constructor(private theName : string){
　　　　this.name = theName;
　　}
　　getMsg(name : string):string{
　　　　return this.name=name;
　　}
}
//犀牛
class Rhino extends MyAnimal{
　　constructor(){
　　　　super("犀牛");
　　}
　　getMsg(name : string):string{
　　　　return name;
　　}
}
//员工
class Employees {
　　private name:string;
　　//构造方法
　　constructor(theName : string) {
　　　　this.name = theName;
　　}
}
var animal = new MyAnimal("山羊");//Goat 山羊
var retMsg1=animal.getMsg("鹿");
var rhino = new Rhino();
var employees = new Employees("洪七公");
animal = rhino;
//animal = employees;//此时这个值不能赋给 animal，并不能编译通过.

三、----------- class高级技巧------

//当您声明一个类，你实际上是在同一时间创建多个声明。第一个是类的实例的类型

class Greeter {
　　static standardGreeting = "Hello, there";
　　greeting: string;
　　greet() {
　　　　if (this.greeting) {
　　　　　　return "Hello, " + this.greeting;
　　　　}
　　　　else {
　　　　　　return Greeter.standardGreeting;
　　　　}
　　}
}
var greeter1: Greeter;
greeter1 = new Greeter();
alert(greeter1.greet());
var greeterMaker: typeof Greeter = Greeter;
greeterMaker.standardGreeting = "Hey there!";
var greeter2:Greeter = new greeterMaker();
alert(greeter2.greet());