TypeScript语言基础

一、什么是TypeScript

　　编程语言包括动态类型语言和静态类型语言。动态类型语言是指在程序运行阶段才检查变量数据类型的语言，在定义变量时不需要指定变量的数据类型，通常在编译时不容易发现错误，因此前端开发工具发明了一些检查插件，比如eslint等，用于在编译时根据一定的规则检查数据类型，避免一些错误；反之静态类型语言是在编译阶段就确定变量数据类型的语言，在编译时编译器就会检查错误，比如Java、C#等。

　　TypeScript可理解成Type+javaScript，理解为可扩展的JavaScript（参考Javascript基础），既保留了JavaScript动态类型的特点，也集成了静态类型的特点。TypeScript可以使用JavaScript中的所有代码和编码概念，TypeScript与JavaScript相比，进步的地方包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之成为一个全新的面向对象语言，适用于大型的开发项目。

二、JavaScript 和 TypeScript 的主要差异

　　1、TypeScript 可以使用 JavaScript 中的所有代码和编码概念，TypeScript 是为了使 JavaScript 的开发变得更加容易而创建的。

　　2、TypeScript 从核心语言方面和类概念的模塑方面对 JavaScript 对象模型进行扩展。

　　3、JavaScript 代码可以在无需任何修改的情况下与 TypeScript 一同工作，同时可以使用编译器将 TypeScript 代码转换为 JavaScript。

　　4、TypeScript 通过类型注解提供编译时的静态类型检查。

　　5、TypeScript 中的数据要求带有明确的类型，JavaScript不要求。

　　6、TypeScript 为函数提供了缺省参数值。

　　7、TypeScript 引入了 JavaScript 中没有的“类”概念。

　　8、TypeScript 中引入了模块的概念，可以把声明、数据、函数和类封装在模块中。

三、安装和使用TypeScript

　　首先需要安装nodejs环境，然后执行" npm install -g typescript "就可以全局安装Typescript，编写完成*.ts文件后，可以通过编译命令" tsc *.ts "将TypeScript编写的ts代码转换为*.js代码。目前最流行的IED工具是vsCode，它对typeScript具有很好的支持。本章节只介绍基本用法，不对具体概念做深入探究。

四、变量定义

let isok:boolean =false; 
let age:number=10;
let name:string='我若安好，便是晴天'；
let u:undefined=undefined;
let n:null=null;
let num:number=undefined;
let notSure:any=xxx; //any为任意类型，任何值都可以赋值给该类型，该类型会绕过编译器检查
let arrOfNum:number[]=[1,2,3,4,5,6]; //数组元素必须为同一类型
arrOfNum.push(7);
let item:[string,number]=['123',123];//元组为特殊的数组，指定元素的类型范围

interface IUser{ //定义接口，用来约束对象的属性类型，方便编译时检查
name：string;
age:number;
tel?:number; 
readonly id:number;   
} 

let mine:IUser={
  id:1,
  name:'我若安好，便是晴天',
  age:20,
  tel:15000000000
}
mine.name='zhangshan';

五、函数定义

function add(x:number,y:number,z?:number):number{  //约束参数类型 ?表示可选参数
 return  x+y;
}

const add=(x:number,y:number,z?:number):number=>{  //lambda写法
 return  x+y;
}

function hellow(x:number | string ,y:number):number{  //number | string表示可以是这两种类型中的一种
    const str=x as string； //类型断言后赋值给str
  if（str.length）{ 
      return str.length； 
   }else
  {
     const n=x as number； 
     return n.toString().length;
  }
}

function isNum(x:number|string):boolean {
  if(type x ==='number') //判断类型
  {
     return true;
  }
    return false;
}

六、类的定义

class Animal {

   constructor(name){  //构造函数
       this.name=name;
   }

   run(){
       return '${this.name} is running'
   }

}

const dog=new Animal('小黄')；
dog.run();


const dog1 extends Animal { //类的继承
     constructor(name){  //构造函数
      super(name) //调用父类方法
   }

   public  eat(){  //自身方法 ， public/private/protected/readonly为访问修饰符。默认为public

  }
}
const xiaogou=new dog1 ('xiaogou11')；

七、类和接口的配合

interface  IPlay{ //定义接口，包含2个方法
  on():void;
  off():void;
}

class Mp3 implements IPlay{ //Mp3类实现接口IPlay

  on(){
        console.log("播放");
}
  off(){
     console.log("关闭");
}
}

interface  IPlaymini  extends IPlay{ //接口也可以继承接口
   openmini(){
     console.log("最小化");
}
}

八、枚举类

enum  week{ //不手动赋值时默认从0开始1，2，3....
Monday,
Tuesday
Wednesday,
Thursday,
Friday,
Saturday,
Sunday
}

console.log(week.Sunday);
console.log(week[6]);

enum  Direc{  //可以手动赋值
up =1,
down=2,
left=3,
right=4
}

九、泛型

function  gettype<T>(arg:T):T{  //T为泛型类参数，可理解为占位符，在调用时才传入具体类型 

   return arg;
}

const res=gettype<Boolean>(true);


function  gettype<T extends  xxx>(arg:T):T{  //给泛型T参数增加类型约束，约束T的类型必须属于xxx类型

   return arg;
}

class Cls<T> {  //泛型参数除了作为函数参数传递外，还可以附加在接口和类上，作为全局泛型参数使用
}

十、类型别名+字面量+交叉类型

type add = (x:number,y:number)=>{ return x+y}  //声明类型，add 为类型的别名
let sum:add;  //指定sum的类型为add类型
const res= sum(1,2);


type strornum=string | number； //联合类型，表示strornum可以为字符串或者数字

let：res：strornum ='123';
       res：strornum =123


type dir= 'up' |'down' | 'left' | 'right' ;//定义联合类型dir，其值只能有这四种
let where:dir ='up'; //正确
let where:dir ='up11'; //编译报错


interface Iname{ name：string}
interface Iage{ age：string}

type Iperson=Iname & Iage；//交叉类型，Ipersion同时属于Iname和Iage类型，具有两种类型的属性

let per：Iperson={name：'zhangshan',age:'18'}；

//上面的例子可以说明，使用type关键字为类型定义别名

十一、内置数据类型

const a:Array<number> =[1,2,3,4,5,6]  //数组
const date =new Date();//日期
const reg=/abcd/；//正则表达式
const sum=Math.pow(2,2);//数学计算类
const body=document.body；//DOM对象document

十二、声明文件

　　在编写项目的时候，我们通常需要使用一些第三方的库文件，这些库文件不是通过typeScript写的，如果直接在ts文件中引用和使用它的类型会报无法识别的编译错误。这时我们可以使用关键字 declare 来为这些类型做声明，手动创建声明的语法如下：

declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明（含有子属性的）全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出（含有子属性的）对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令

　　假如我们想使用第三方库 jQuery，一种常见的方式是在 html 中通过 <script> 标签引入 jQuery，然后就可以使用全局变量 $ 或 jQuery 了。但是在 ts 中，编译器并不知道 $ 或 jQuery 是什么，我们需要使用 declare var 来定义它的类型。

declare var jQuery: (selector: string) => any; //declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。

　　通常我们会把以上声明语句放到一个单独的文件（比如jQuery.d.ts）中，可以在项目全局使用，这个d.ts类型的文件就是声明文件。

　　通常我们使用的第三方库，它的官方或者社区都已经为我们编写好了声明文件(如果没有则需要手动编写)，不需要我们亲自编写，比如在vue项目中使用 install 安装库时，会在node_modules对应的文件夹下找到它的声明文件。

posted @ 2022-07-14 00:05 我若安好，便是晴天阅读(83) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部