TypeScript和JavaScript的基础语法对比

小咪咪 2023-03-02 13:10 62阅读 0赞

# JavaScript里面的 #

### 数据类型 ###

JavaScript的数据类型分为2大类：原始数据类型和引用数据类型  
原始数据类型： object、 number、 string、 boolean、 null、 undefined  
引用数据类型： object类型的Array 、Date、function

### JavaScript中的变量 ###

【1】JS中变量的声明： var 变量名=值；  
【2】JS中变量的使用注意的事项：

A.  js中的变量的名称和java中标识符的命名保持一致就可以了。
       B.  js中变量名称是可以重复的，但是后者的名称会把前者的名称值覆盖
       C.  js中末尾即使没有分号结束也是可以的，但是不推荐大家这样书写。

### JavaScript中的函数 ###

在ES3里面定义函数的关键字是function，而在ES6里面定义函数是可以不需要function关键字的。  
在ES3到ES6之间定义函数的是用function关键字：

# TypeScript里面的 #

TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了使用的枚举类型方便我们使用。

### 数据类型 ###

##### 布尔值 #####

最基础的数据类型就是简单的true和false值，在JavaScript和TypeScript里面叫做boolean值。  
定义变量的语法：

let bol:boolean=true;

##### number(数字) #####

这个和JavaScript里面的一样的，TypeScript里面的所有数字都是浮点数，这些浮点数的类型都是number，除了支持十进制和十六进制字面量，TypeScript还支持ECMAScript 2015中引入的二进制和八进制字面量。  
例如：

//十进制或者整数
    let num:number = 3;
    //十六机制
    let num0X:number = 0xf00d;
    //二级制
    let num0b:number = 0b1010;
    //八进制
    let num0o:number = 0o7114;

##### 字符串（string） #####

在这里和JavaScript里面定义字符串的数据可以用单引号引起来也可以用双引号引起来  
语法：

let name：string ='bob';
    name = "smith";

你还可以使用模版字符串，它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围（ \`），并且以$\{ expr \}这种形式嵌入表达式  
例：

let name: string = `Gene`;
    let age: number = 37;
    //调用姓名变量 年龄变量
    let sentence: string = `Hello, my name is ${ name }.I'll be ${ age + 1 } years old next month.`;

这个与下面定义sentence的方式效果相同：

let sentence: string = "Hello, my name is " + name + ".\n\n" +"I'll be " + (age + 1) + " years old next month.";

##### 数组 #####

在TypeScript里面定义数组的方法有两个，第一个是下面的这种方法：

let arr:number[] = [1,2,3];

第二种就是下面的这种方法：

let list: Array<number> = [1, 2, 3];

**元组（Tuple）**  
这个是在JavaScript里面没有的，这个元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。  
例如：

// 定义元组
    let x: [string, number];
    //给元组里面的元素进行赋值
    x = ['hello', 10]; // OK
    // 错误示范
    x = [10, 'hello']; // 报错
    //当访问一个已知索引的元素，会得到
    
    // 正确的类型：
    console.log(x[0].substr(1)); // OK
    console.log(x[1].substr(1)); // Error, 
    
    'number' does not have 'substr'
    //当访问一个越界的元素，会使用联合类型替代：
    x[3] = 'world'; 
    
    // OK, 字符串可以赋值给(string | number)类型
    console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
    x[6] = true; // Error, 布尔不是(string | number)类型

##### 枚举（enum） #####

枚举类型是对JavaScript标准数据类型的一个补充。像C\#等其他语言一样，使用枚举类型可以为一组数值赋予友好的名字。  
例：

//定义枚举
    enum backgroundColor { Red，Pink，Black，Blue，Green}
    //调用
    let bc:backgroundColor = backgroundColor.Pink

默认情况下，从0开始为元素编号。手动的指定成员的赋值开始的编号，也可以手动的随意指定成员编号值。  
例：

//定义枚举
    enum backgroundColor { Red=1，Pink=2，Black，Blue，Green}
    //调用
    let bc:backgroundColor = backgroundColor.Pink
    //定义枚举，混合手动指定编号
    enum backgroundColor { Red=1,Pink=2,Black=4,Blue=3,Green=6}
    //调用
    let bc:backgroundColor = backgroundColor.Pink
    //这样的获取
    enum Color { Red = 1, Green, Blue}
    let colorName: string = Color[2];
    console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

##### Any（交给编译阶段的检查） #####

这个就是将你需要检查的代码及数据交给编译阶段的时候进行自行检查，我们就可以使用any类型来标记这些变量。  
例：

//定义
    let notSure: any = 4;
    //赋值
    notSure = "maybe a string instead";
    notSure = false; // okay, definitely a boolean

在对现有代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择地包含或移除类型检查。 你可能认为 Object有相似的作用，就像它在其它语言中那样。 但是 Object类型的变量只是允许你给它赋任意值 - 但是却不能够在它上面调用任意的方法，即便它真的有这些方法。  
例：

let notSure: any = 4;
    notSure.ifItExists(); 
    
    // okay,
    notSure.toFixed(); // okay,
    
    let prettySure: Object = 4;
    prettySure.toFixed(); //报错 还会报类型错误
    
    //当你只知道一部分数据的类型时，any类型也是有用的
    let list: any[] = [1, true, "free"];
    list[1] = 100;

##### void(无返回值) #####

某种程度上来说，void类型像是与any类型相反，他表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是void。  
例：

function warnUser(): void { 
        console.log("This is my warning message");
    }
    //声明一个viod类型的变量没有什么大用，因为你只能为他赋予undefined和null;
    let unvoid: void = undefined;

##### Null和Undefined #####

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。 和 void相似，它们的本身的类型用处不是很大。

let u: undefined = undefined;
    let n: null = null;

默认情况下null和undefined是所有类型的子类型，就是说你可以把null和undefined赋值为别的数据类型的变量的。

##### Never（永远不存在的值得类型） #####

never类型表示的是那些永不存在的值的类型。never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。  
例：

// 返回never的函数必须存在无法达到的终点
    function error(message: string){ 
    	never { 
        	throw new Error(message);
    	}
    }
    
    // 推断的返回值类型为never
    function fail() { 
        return error("Something failed");
    }
    // 返回never的函数必须存在无法达到的终点
    function infiniteLoop(){ 
    	never { 
        	while (true) { 
        	}
    }

##### Object（对象） #####

object表示非原始类型，也就是除number（数字），string（字符串），boolean（布尔），symbol（符号），null或undefined之外的类型。使用object类型，就可以更好的表示像Object.create这样的API。  
例：

declare function 
    
    create(o: object | null): void;
    create({  prop: 0 }); // OK
    create(null); // OK
    create(42); // Error

##### 类型断言 #####

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。  
类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是  
在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。  
当你在TypeScript里使用JSX时，只有 as语法断言是被允许的。  
有两种形式，第一种是<>语法：  
例：

let someValue: any = "this is a string";
    
    let strLength: number = (<string>someValue).length;

第二种是as的方法：  
例：

let someValue: any = "this is a string";
    
    let strLength: 
    number = (someValue as string).length;

## 声明变量和常量 ##

在JavaScript里面定义变量和常量的关键字是一样的。  
定义变量的关键字是var和let。

他们的区别就是：  
var定义的变量可能会被别的方法使用给调用的使用，然后有一个弊端就是会出现一个变量的全局污染。var定义的变量他会变量提前然后会程序没有到定义变量的那一行的时候会出现给其变量给赋undefined值。

**let声明变量**

1.  let声明的变量不会挂在window中，不会造成全局变量的污染。
2.  新增了一个块级作用域\{\}，以前只有函数作用域，全局作用域。
3.  let是不允许重复声明
4.  let不会有声明提前（只是人为看到的效果，实际上是有声明提前，提前临时性的死区中：Cannot access ‘num’ before initialization）

**const声明常量**

1.  跟let完全相同 增加几个点
2.  不允许被修改(不允许改变内存空间的地址)
3.  const声明和赋值必须一次性完成，并且后期不允许改变存储空间的地址

## 函数 ##

TypeScript里面定义函数的方法和JavaScript里面定义函数的方法是差不多的，同样也是可以使用ES6里面的箭头函数的。  
正常定义函数的语法：

//常规定义函数的语法
    function add(x, y) { 
        return x + y;
    }
    let myAdd = function(x, y) {  return x + y; 
    
    };
    //TypeScript定义完整的函数的语法
    function add(x: number, y: number): number { 
        return x + y;
    }
    let myAdd = function(x: number, y: number): number {  return x + y; };

还可以这样使用

：

//函数完整的类型
    let myAdd: (x: number, y: number) => number =function(x: number, y: number): number {  return x + y; };
    //另外的一种写法
    let myAdd: (baseValue: number, increment: number) => number =
        function(x: number, y: number): number {  
        	return x + y; 
    	};

##### 可选参数和默认参数 #####

注意：编译器还会假设只有这些参数会被传递进函数。简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。  
例：

function buildName
    
    (firstName: string, lastName: string) { 
        return firstName + " " + lastName;
    }
    
    let result1 = buildName("Bob");                  // 报错，参数不足
    let result2 = buildName("Bob", "Adams", 
    
    "Sr.");  //报错，参数不足
    let result3 = buildName("Bob", "Adams");         // ah, just right

JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让last name是可选的。  
例：

function buildName(firstName: string, lastName?: string) { 
        if (lastName)
            return firstName + " " + lastName;
        else
            return firstName;
    }
    
    let result1 = buildName("Bob");  //选着的参数
    let result2 = buildName("Bob", "Adams", "Sr.");  
    
    // 报错，参数过多
    let result3 = buildName("Bob", "Adams");  // ah, just right

还有在ES6里面的…运算符使用也是一样的：  
例：

function buildName(firstName: string, ...restOfName: string[]) { 
      return firstName + " " + restOfName.join(" ");
    }
    
    let buildNameFun: (fname: string, ...rest: string[]) => string = buildName;

注意：

*  这个里面的错误示范，如果在vscode软件上面的.ts文件里面书写他会直接报错的，不需要你运行就会给你提示出来的。
 *  在这里的let的使用和var的差不多，只是在这里使用let定义变量的是让我们熟悉的使用ES6里面的语法，在ES6里面出现了两个一个是let再就是const（常量）
 *  在TypeScript里面定义函数的方法和JavaScript里面定义函数的方法是一样的，同样也可以使用ES6里面的一些语法，也可以这么说在TypeScript里面定义函数是在JavaScript上提升了一些新的内容。
 *  function pickCard(x): any并不是重载列表的一部分，因此这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。