初始TypeScript

来自刚接触TypeScript的小菜鸡--养生青年阿贺

一：什么是TypeScript;

1、TypeScript 是一款编程式语言（微软开发的）;

2、typescript式Javascript的超集，遵循了最新的ES6、ES5的规范，typescript扩展了JavaScript的语法

3、这个语言添加了可选的静态类型和基于类的面向对象的编码，通俗的理解就是js的一个特殊版本，适用于大型的项目开发

4、谷歌在大力的支持并推广ts，angular2.x 也是基于typescript

5、最新的vue和react也集成了ts

6、nodejs框架中的next.js midway也用了ts

在了解了什么是TypeScript之后，我们就要安装TypeScript了。

二、安装

在这里我用的是npm下载

npm install -g typescript

 下载完毕，创建文件夹后，在根目录打开cmd，创建配置文件tsconfig.json

编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集在这里附上官网配置详情

编译选项 · TypeScript中文网 · TypeScript——JavaScript的超集

创建配置文件   ==>  tsc  --init

创建完毕之后打开tsconfig.json，在文件内部找到需要配置的选项outDir 

 把// "outDir": "./",  改成 ==>  "outDir": "./js",

执行编译：终端——运行任务——typescript——监视  //注：这里是vscode

这里有个热更新可以更快的自主更新，有的用户没有配置过powershell会报个小错，在这里给大家把命令写出来

set-ExecutionPolicy RemoteSigned

win10系统打开powershell  先win+r  直接输入powershell即可

win11开始界面直接搜索然后选择以管理员身份运行，一定要这个，不然会不行

三、声明变量

let  变量名:type=值

//type 是数据类型：number  string  null   undefined   boolean   type[]（Array<type>）  object  

四、基本数据类型

1、Boolean

最基本的数据类型就是简单的true/false值，在JavaScript和TypeScript里叫做 boolean（其它语言中也一样）

let 变量:boolean=值;
// let  flag:boolean=1//不能将类型“number”分配给类型“boolean”。

let  flag:boolean=true

2、Number

let 变量:number=值

let  num1:number=0
let  num2:number=NaN

3、String

let 变量:string=值;

let str1:string="abc";

4、Array

let 变量:Array<type>=值;

let 变量:type[]=值;

// 语法1：let 变量:Array<type>=数组    数组内部的值必须符合type的类型
// let arr:Array=[1,2,3]
// 泛型类型“Array<T>”需要 1 个类型参数


// let arr:Array<string>=[1,2,3];
// 不能将类型“number”分配给类型“string”;


// let arr:Array<string>=["1","2","3"];

let arr:Array<any>=[1,"2","3",true,[1,2],{name:'zs'}];


// 语法2： let  变量:type[]=数组   数组内部的值必须符合type的类型

// let brr:number=[1,2,3,4];
// 不能将类型“number[]”分配给类型“number”


// let brr:number[]=[1,2,3,4];


let brr:any[]=[1,"a",false,null];

5、元组 Tuple（数组）

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

let 变量:[type1,type2,,,]=值;

// let  crr:[number,string,boolean]=[]
// 不能将类型“[]”分配给类型“[number, string, boolean]”。
//  源具有 0 个元素，但目标需要 3 个


// let  crr:[number,string,boolean]=[1,"2",true,0]
// 不能将类型“number”分配给类型“string”
// 不能将类型“number”分配给类型“boolean”
// 不能将类型“[number, string, true, number]”分配给类型“[number, string, boolean]”。
// 源具有 4 个元素，但目标仅允许 3 个


// 数量和数据类型必须一一对应才行
let  crr:[number,string,boolean]=[1,"2",true]

6、枚举 enum

enum 名称{
    属性名1,
    属性名2,
    ,,,
}

enum 名称{
    属性名1=值1,
    属性名2=值2,//值默认为下标
    ,,,
}

enum en{
  x="xx",
  y="yy",
  z="zz",
  a="aa",
  b=1
}

let x1:en=en.x
console.log(x1);//xx

let enname:string=en[1]
console.log(enname);//b

7、any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量

let 变量:any=值;
let data:any="abc"
console.log(data);//abc
data=[1,2,3]
console.log(data);//[1,2,3]

8、object

let 变量:object=值;

let  obj:object={
  name:"zs",
  age:10
}

9、null和undfined

let 变量:null=null

let 变量:undfined
或
let 变量:undfined=undfined
或
let 变量:类型|undfined

// let un:number;
// console.log(un);//报错：在赋值前使用了变量“un” undefined
// 变量如果没赋值，就是undefined，而我们希望得到什么数据?number


// let un:undefined=undefined;
// let un:undefined;
// console.log(un);
// un=123//不能将类型“123”分配给类型“undefined”。


let  un:number|undefined; // 可以时number 类型  也可以是undefined
console.log(un);
un=123
console.log(un);




// let  nu:null;
// console.log(nu);//在赋值前使用了变量“nu”
// nu={name:'zs'}//不能将类型“{ name: string; }”分配给类型“null”
let  nu:null|object;
nu={
  name:'zs'
}
console.log(nu);

10、void

个人认为这个好像没什么用，当然这只是个人拙见，创造出来肯定有用，可能是因为我刚接触，还没有了解。

没有任何类型。 当一个函数没有返回值时使用

let  变量:void;

function  函数():void{};


function fun():void{
  // return 100 //不能将类型“number”分配给类型“void”
}

基本数据类型结束，当然这只是我刚学习到的，下面开始函数和Class类

五、函数

定义返回值的类型

function 函数名():type{
    
}
//或
let  函数名=function():type{
    
}
//或
let 函数名=():type=>{
   
}



// function关键字声明
function f():number{

    return 123;
}

console.log(f());




// 变量表达式声明
let f1=function():string{
  return "abc"
}
console.log(f1());




// 箭头函数声明
let  f2=():boolean=>{

  return true
}
console.log(f2());

传参

function 函数名(参数1:type，参数2:type,,,,):type{
    
}


// 默认值
function 函数名(参数1:type=默认值，参数2:type,,,,):type{
    
}

// 可选参数
function 函数名(参数1:type=默认值，可选参数?:string  ,,,,):type{
    
}

// 剩余参数
function 函数名(参数1:type=默认值，...剩余参数:string[] ,,,,):type{
    
}

参数

// 参数
// 已声明“x”，但从未读取其值
// 已声明“y”，但从未读取其值
// let  f2=(x,y)=>{

// }

let  f2=(x:number,y:number):number=>{
    console.log(x+y);

    return x+y
    
}

// 参数的数量和类型必须一一对应  多了不行  少了不行  类型不一样不行
// f2() //应有 2 个参数，但获得 0 个
// f2("a",1) //类型“string”的参数不能赋给类型“number”的参数
// f2(1,2,3) // 应有 2 个参数，但获得 3 个
f2(1,2) 

参数默认

// 参数默认值
let  f2=(url:string="",base:string="/api"):string=>{

  return base+url
  
}

console.log(f2("/a","/b") );
console.log(f2("/a") );

可选参数

// 可选参数     形参?:type
let  f2=(url:string,base?:string):string=>{

  if(base){
    return base+url
  }else{
    return url
  }
  
}

console.log(f2("/a","/b") );
console.log(f2("/a") );

剩余参数

//剩余参数

let  f2=(...name:Array<string>):string=>{

    console.log(name);// ['小伟', '小李', '小芳', '小侯']

    return `今天签到的有${name}`

}
console.log(f2("小伟","小李","小芳","小侯"));

六、Class 类

声明类

class Perons{

    // 先定义属性名
    name;
    age;

    constructor(name:string,age:number){

      // 再给属性赋值
      this.name=name
      this.age=age
    }

    say(){
        console.log(`perons类say`)

    }
    static run(){
      console.log("perons类run")
    }
}


let p=new Perons("zs",10)
console.log(p);//Perons {name: 'zs', age: 10}

p.say()//perons类say

// 静态方法调用
Perons.run()

继承类

class Student extends Persons{

    sex:string;

    constructor(sex:string,name1:string,age:number,name2:string){

        super(name1,age); //继承父类的属性

        this.sex=sex
        this.name=name2
    }


    say(){

     	 super.say()
     	 console.log("student中的say");
    }
}



let s=new  Student("男","小伟",18,"小涛")//Student {name: '小涛', age: 18, sex: '男'}
console.log(s);

s.say()

以上就是本人刚接触到的TypeScript，欢迎大家留言提出错误，本人积极改正，努力学习，前端是无敌的。安了安了，去休息了。