TypeScript的认识与入门学习

分手后的思念是犯贱 2023-01-08 08:19 104阅读 0赞

# 一、TypeScript 简介 #

`TypeScript` 是 `JavaScript` 的超集，是由微软公司开发的。  
他处理了 `JavaScript` 的一些问题，语法更加严谨，适合开发 **大型项目**。  
在实际使用时，需要先编写`.ts`文件后在转换为`.js`文件使用。

## 1、出现背景 ##

JavaScript产生于互联网1.0时代，是网景公司对抗微软时的产物。  
因为当时的时代背景，导致JavaScript来了一招为快不破，后来虽然网景败了，但却留下了JavaScript。

因为JavaScript太赶时间了，所以在设计理念和严谨上都存在一些问题，随着时代推进，JavaScript的地位不断提高，在此前提下微软推出了基于JavaScript的TypeScript，用于解决JavaScript的缺陷。

TypeScript相比于JavaScript主要增加了数据类型、类、模块、接口、类型注解方面的功能。

## 2、相比优势 ##

TypeScript相较于JavaScript的主要优势：

*  语法严谨后带来的编码错误检测，可防止js中出现的用对象去加对象，对象到底是数字还是字符不明确，TypeScript可以直接声明为数字类型，没有赋值数字类型直接就报错了，从源头上解决了问题。
 *  完全按照TypeScript规范开发的代码更具可读性，代码更易维护，也正是因为这样。
 *  对面向对象的支持毕竟完善，对大型项目的开发比较友好。

## 3、是否使用 ##

随着ECMA标准的进化，TypeScript与JavaScript的差异正在慢慢减少。  
了解ES6标准的朋友都知道，JavaScript中已经支持块级作用域、箭头函数、类等。  
所以，如果不是对面向对象特性有强烈的需求，使用TypeScript的意义并不大。  
但这并不影响我们了解学习TypeScript，或许在不就的将来，新的ECMA发布后，你会发出这样的感叹：  
`这个新特性似曾相识！嗯，以前在TypeScript中用过。`

## 二、TypeScript入门 ##

### 1、开发环境 ###

*  安装node.js
 *  npm i -g typescript
 *  vscode

## 2、变量类型 ##

*  number `数字`
    
        let count: number = 12; //数字
 *  string `字符串`
    
        let name: string = '姓名'; //字符串
 *  boolean `布尔`
    
        let del: boolean = false; //布尔
 *  字面量 `自定义`
    
        let PI: 3.14159; //单个值时变量不可修改，类似常量；不班不这样用
        let server: '中国电信'|'中国移动'|'中国联通'; //只能是指定的这三个值之一
        let name: string | number; //联合类型，姓名可以为字符串或数字类型
 *  any `任意`
    
        let a: any; //取消了ts的类型限制，等同于js中变量的使用方式，不建议使用
        a = 10; //可以是数字
        a = 'abc'; //还可以是字符串等
        
        let b; //未设置类型时，默认为any类型
        b = 20;
 *  unknown `安全的any`
    
        let str: string; //字符串
        let unk: unknown; //
        str = unk; //有错误提示：给字符串赋值一个未知类型
        //类型断言
        str = unk as string;//告诉解析器unk就是个字符串，这时候就不会报错提示了
        str = <string>unk;//告诉解析器unk就是个字符串，这时候就不会报错提示了
        //any和unknown的区别
        let a: any;
        str = a; //不会错误提示，把str也祸害成没有类型的了
 *  void `没有值`
    
        //函数无返回值
        function setx():void{ }
 *  never `不能是任何值`
    
        //毛都没有
        function err():never{ 
        	throw new Error('出错了');
        }
 *  object `对象`
    
        //毛都没有
        let user1: object; //js中对象太多了，一般不这样用
        let user2:{ name:string}; //一般这样用，指定对象中有那些属性
        let user3:{ name:string,iphone?:string}; //有问号的属性及可有可无
        let user4:{ name:string,[propName:string]:any}; //name必须由，其他随意
 *  array `数组`
 *  tuple `固定长度数组`
 *  enum `枚举`
 *

有了变量类型，主要规范了方法参数的类型。

//求和，只能传数字进来且返回数字
    function sum(a:number,b:number):number{ 
    	return a+b;
    }
    let result = sum(123,456);

持续更新中…