来点TypeScript

CodeMartain

已于 2022-09-25 21:55:30 修改

阅读量1k

点赞数

分类专栏：前端框架基础文章标签： typescript javascript 前端

于 2022-09-24 20:45:00 首次发布

本文链接：https://blog.csdn.net/weixin_54061333/article/details/126999818

版权

前端框架基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

安装TypeScript环境

搞点前端框架基础,整个全栈的饭碗吃吃

在这里插入图片描述

在项目中安装TypeScript
进入项目目录下安装

npm install typescript --save-dev

D:\anglarProject\gavin>npm install typescript --save-dev

removed 1 package, and audited 917 packages in 1m

122 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

也可以在全局中安装

npm install -g typescript

如果下载typescript时速度过慢,可以考虑换一个镜像源~国内镜像源

npm config set registry https://registry.npmmirror.com

TypeScript是js的超级集

开始一个新的项目来学习TypeScript的使用:

typescript的常用编译命令

首先学习一下typescript的语法:
我们要明确一点ts是js的超级,即ts是兼容js的,ts相对于js增加了一些功能:

类型批注和编译时类型检查
类型推断
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元组
Await
以下功能是从 ECMA 2015 反向移植而来：

类
模块
lambda 函数的箭头语法
可选参数以及默认参数

先来打印一下helloworld:
新建一个hello.ts文件,里面的内容如下:

const  hello:string="hello_world"
console.log(hello)

用typescript来编译一下:

tsc hello.ts

在这里插入图片描述

用node来运行一下刚刚编译生成的js文件

D:\anglarProject>node hello.js
Hello World!

下面随便整一个html文件,引入hello.js

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TypeScript学起来</title>
<script src="hello.js"></script>
</head>

<body>
     <div>前路白云外,孤帆安可论</div>
</body>
</html>

在这里插入图片描述
我们可以同时编译多个ts文件(文件之间用空格隔开就好了)

tsc 常用的编译参数:
直接编译ts文件:

tsc 文件名.ts —>>会生成一个同名的js文件

将声明的变量给提取出来

tsc --declaration hello.ts

编译时会生成一个.d.ts文件
在这里插入图片描述
.d.ts文件的内容

为了编译时更加简洁,可以在编译时将注释给过滤掉

tsc --removeComments hello.ts

const hello : string = "Hello World!"
console.log(hello)
//这是注释文件
alert("hello")

var hi="你好世界"

alert(hi)

编译一下:

tsc --declaration --removeComments hello.ts

在这里插入图片描述
打开index文件可以体验一下

多个文件合并输出到一个文件

tsc hello.ts hi.ts --out hello.js

新建一个.ts文件,

function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}

在这里插入图片描述
index.html文件内容如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TypeScript学起来</title>
<script src="hello.js"></script>
</head>

<body>
     <div>前路白云外,孤帆安可论</div>
	 <p id="demo">点击按钮显示日期</p>

	 <button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

源代码存储以及代码对于每个位置映射关系的信息.map的文件:

在这里插入图片描述

.map的文件内容
有版本号,文件名,来源映射关系—>>这映射关系四个字母一组,具体映射关系暂不去管他了

{"version":3,"file":"hello.js","sourceRoot":"","sources":["hello.ts","hi.ts"],"names":[],"mappings":"AAAA,IAAM,KAAK,GAAY,cAAc,CAAA;AACrC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AAClB,QAAQ;AACR,KAAK,CAAC,OAAO,CAAC,CAAA;AAEd,IAAI,EAAE,GAAC,MAAM,CAAA;AAEb,KAAK,CAAC,EAAE,CAAC,CAAA;ACPT,SAAS,WAAW;IACnB,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,SAAS,GAAC,IAAI,EAAE,CAAC;AAClD,CAAC"}

监视ts文件,在他们改变时重新编译

tsc --watch

在这里插入图片描述

tsc hello.ts hi.ts --declaration --sourcemap --removeComments --out hello.js --watch

注意:watch要放在最后

typescript的一些特点

1,typejs会忽略程序中的空格,制表符,换行符
2,typejs区分大小写
3,结束符分号是可选的,(如果语句写在一行上,是需要分隔符的)

typejs中的注释
单行注释 //
多行注释/* */

在编译时可以忽略掉注释
tsc --removeComments

TypeJs面向对象的戏码

这个就很java了

对象,类,方法…

整呗~~新建一个ts文件,

//这是一个类
class hello{
//这是一个变量
name ="我是一个粉刷匠"
//这是一个构造方法
constructor ( ){
 
}
//这是一个方法
 printName():string{
return this.name
}
}
//实例化
var obj=new hello();
//打印
console.log(obj.printName());

运行生成的js文件

D:\anglarProject>node ty.js
我是一个粉刷匠

编译之后生成的js文件:

//这是一个类
var hello = /** @class */ (function () {
    //这是一个构造方法
    function hello() {
        //这是一个变量
        this.name = "我是一个粉刷匠";
    }
    //这是一个方法
    hello.prototype.printName = function () {
        return this.name;
    };
    return hello;
}());
//实例化
var obj = new hello();
//打印
console.log(obj.printName());

看起来ts文件确实要比js好写一些

TS基础数据类型:

any —>>任意类型

任意值类型可以让这些变量跳过编译阶段的类型检查

 let yyds:any =1
  console.log(yyds)
 yyds ="我就是一个string类型"
 console.log(yyds)
 
 yyds=true
 console.log(yyds)
 
 let ds:string="long ranger"
 ds="我只能是字符串了"
 console.log(ds)

生成的js文件:

//类型推断
var yyds = 1;
console.log(yyds);
yyds = "我就是一个string类型";
console.log(yyds);
yyds = true;
console.log(yyds);
var ds = "long ranger";
ds = "我只能是字符串了";
console.log(ds);

在这里插入图片描述

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

number–>>数字类型可以表示整数和小数

string -->>字符串
单引号和双引号都可以,
注意:使用反引号时可以定义多行文本和内嵌表达式

boolean -->>布尔类型

var name1 = "Hello";
var years = 5;
var words
  words = `您好，我是 ${ name1 } 年纪 ${ years + 1} `;
console.log(words)

编译后生成的js文件:

var name1 = "Hello";
var years = 5;
var words;
words = "\u60A8\u597D\uFF0C\u6211\u662F ".concat(name1, " \u5E74\u7EAA ").concat(years + 1, " ");
console.log(words);

在新版本的typejs中,有一个关键字 let

var name1 = "Hello";
var years = 5;
var words
  words = `您好，我是 ${ name1 } 年纪 ${ years + 1} `;
console.log(words)

let helo:string ="haha"
//数字类型
let size:number=100
//反引号
let result:string =`这就是个测试 ${helo} 数字是${size}`
//布尔类型
let bool:boolean=true
console.log(bool)
console.log(result)

编译后生成的js

var name1 = "Hello";
var years = 5;
var words;
words = "\u60A8\u597D\uFF0C\u6211\u662F ".concat(name1, " \u5E74\u7EAA ").concat(years + 1, " ");
console.log(words);
var helo = "haha";
//数字类型
var size = 100;
//反引号
var result = "\u8FD9\u5C31\u662F\u4E2A\u6D4B\u8BD5 ".concat(helo, " \u6570\u5B57\u662F").concat(size);
//布尔类型
var bool = true;
console.log(bool);
console.log(result);

数组类型,元组,枚举

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

console.log(arr)


//泛型数组

class Person{

public name:string
public age:number
constructor ( name:string, age:number){
this.name=name
this.age=age
}
}

let arr2:Array<Person>=[new Person("Sofia",26),new Person("Halo",28)]

console.log(arr2)
 
//元组  元素顺序对应的数据类型要一致
let xx:[string,number,boolean]
xx=["hello",100,true]

console.log(xx)
console.log(xx[0])

//枚举
enum Color{red,green,blue};
let r:Color=Color.red
console.log(r)//打印数字
//方法
 function printData():void{
 
 console.log("随便玩一下")
 }
 function printD(name:string):string{
 return name
 }
 
 console.log(printD("amazing"))

编译后运行:—>>
在这里插入图片描述
生成的js文件:

var arr = [1, 2, 3, 4, 5];
console.log(arr);
//泛型数组
var Person = /** @class */ (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    return Person;
}());
var arr2 = [new Person("Sofia", 26), new Person("Halo", 28)];
console.log(arr2);
//元组  元素顺序对应的数据类型要一致
var xx;
xx = ["hello", 100, true];
console.log(xx);
console.log(xx[0]);
//枚举
var Color;
(function (Color) {
    Color[Color["red"] = 0] = "red";
    Color[Color["green"] = 1] = "green";
    Color[Color["blue"] = 2] = "blue";
})(Color || (Color = {}));
;
var r = Color.red;
console.log(r); //打印数字
//方法
function printData() {
    console.log("随便玩一下");
}
function printD(name) {
    return name;
}
console.log(printD("amazing"));

现在有点体会到了,ts语言的定义方式某些程度上更倾向于java的风格

**null **
表示对象值缺失。

在js中null也是一种是数据类型,表示一个空对象

我们用type来检测null时,返回的是个object

console.log(typeof(null))
console.log(typeof(typeof(null)))

编译后:
在这里插入图片描述

console.log(typeof(null))
console.log(typeof(typeof(null)))

 
let size:number 
size=10

size=undefined
size=null
console.log(size) //null

在这里插入图片描述

undefined
用于初始化变量为一个未定义的值

console.log(typeof(null))
console.log(typeof(typeof(null)))

let size:number 
size=10

size=null
size=undefined
console.log(size) //undefined

在这里插入图片描述

never
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

let yyds:never
let num:number

//yyds=100 编译不通过,数字不能转never类型

num=(()=>{throw new Error("抛个异常")})();

yyds=(()=>{throw new Error("never类型可以赋值给数字类型")})();


function err(msg:string):never{

throw new Error("抛个异常")
}
function deadloop():never{
while(true){
}
}

js文件

var yyds;
var num;
//yyds=100 编译不通过,数字不能转never类型
num = (function () { throw new Error("抛个异常"); })();
yyds = (function () { throw new Error("never类型可以赋值给数字类型"); })();
function err(msg) {
    throw new Error("抛个异常");
}
function deadloop() {
    while (true) {
    }
}

JavaScript let 和 const

JavaScript let 和 const
ECMAScript 2015(ECMAScript 6)
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

在 ES6 之前，JavaScript 只有两种作用域：全局变量与函数内的局部变量。

简单来说使用var 声明的变量相当于全局的变量,在代码块中修改该变量会影响该值

如果是用let声明,那么该变量只在所在代码块中起作用;

TypeScript中的变量声明

//变量的声明
var names : string ="小明"

console.log(names)
var age : number

console.log(age)//因为变量没有初始值此时值为undifined

//带类型推断的
var color="RED"

enum Colors{red,green,blue};
 var c=Colors.red
 console.log(c)

TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误，

var num:number = “hello” // 这个代码会编译错误

类型断言:

类型断言可以用来手动指定一个值得类型,即允许变量从一种类型更改为另一种类型,

//变量的声明
var names : string ="小明"

console.log(names)
var age : number

console.log(age)//因为变量没有初始值此时值为undifined

//带类型推断的
var color="RED"
console.log(typeof(color))

enum Colors{red,green,blue};
 var c=Colors.red
 console.log(c)
 
 //这里声明一个字符串数字,
 var str ='100'
 //通过断言来转换为数字类型,但是底层依旧是
 var str2:number=<number> <any>  str
  console.log(str2)
 console.log(typeof(str2))//这里类型依旧是string 
let num:number =100

console.log(typeof(num))

编译后运行

在这里插入图片描述
这里可以发现断言之后的数据类型并没有转换成number类型, 是因为转换通常意味着某种运行时的支持,java中可以通过
String.valueOf()
Integer.valueOf() 来进行类型转换

类型推断

var name;//声明时没有赋值,没有确定数据类型
name="string" //这里类型推断
name=100//这里报错,因为第二行已经能够确定数据的类型了

变量作用域

var name2;//声明时没有赋值,没有确定数据类型
name2="string" //这里类型推断

//name2=2100//这里报错,因为第二行已经能够确定数据的类型了
var global_num=12
class Demo{
num =13;
static size=10;
storeNum():void {
var local_num=14
}
}
console.log("全局变量为: "+global_num)  
console.log(Demo.size)   // 静态变量
var obj = new Demo(); 
console.log("实例变量: "+obj.num)

编译后运行
在这里插入图片描述

TypeScript中的运算符

说一下负号运算符:

var num12=100
var y= -num12
console.log(num12)
console.log(y)

TypeScript中的循环

var num =1

for(;num<=10;num++){

console.log(num)
}

var arr =[1,2,3,4,5,6,7,8,9]
for (let index = 0; index < arr.length; index++) {
    const element = arr[index];
    if (element==6){
        break;//跳出循环
    }
    console.log(element);
    
}

TypeScript中的函数

带参数的函数:

function add(x :number,y:number):number{

    return x+y
}
console.log(add(10,100))

可选参数:
参数名后用?表示该参数可选

function add(x :number,y:number):number{
    return x+y
}
console.log(add(10,100))

function printData(x:string ,y:number,z?:string){
    console.log(x,y,z)
}

printData("你好",12)
printData("hello",19,"world")

在这里插入图片描述

参数默认值

function add(x :number,y:number):number{

    return x+y
}
console.log(add(10,100))

function printData(x:string ,y:number,z:string="世界"){
    console.log(x,y,z)
}

printData("你好",19)
printData("hello",20,"world")

当我们第三个参数不传时,会使用默认值

定义方式为: 参数名:类型 =value

可选参数必须跟在必需参数后面。

参数不能同时设置为可选和默认。

PS D:\anglarProject> node .\fun.js
110
你好 19 世界
hello 20 world

可变参数:

function selection(str:string,...m:string[]){

    console.log(str,m)
}
selection("hello","world","你好","北京欢迎你")


function sprint(...str:any[]){
    console.log(str)
}
sprint("他不懂你的心","骑自行车的风景")

编译后运行:

hello [ 'world', '你好', '北京欢迎你' ]
[ '他不懂你的心', '骑自行车的风景' ]

TypeScript匿名函数

匿名函数自调用

//匿名函数
var func=function(str:string):string{

    return str
}
console.log(func("匿名函数"));

(function():void{
    var str="hellohahaha"
    console.log(str)
})();//函数自调用

//带有参数的函数自调用

(function (str:string):string{
    console.log(str)
    return str 
})("hello");

编译后生成的js文件:

//匿名函数
var func = function (str) {
    return str;
};
console.log(func("匿名函数"));
(function () {
    var str = "hellohahaha";
    console.log(str);
})(); //函数自调用
//带有参数的函数自调用
(function (str) {
    console.log(str);
    return str;
})("hello");

TypeScript构造函数

class Person{
    name :string
    hobby :string
    constructor(name:string,hobby:string){
   this.name=name
  this.hobby=hobby
         
    }

}
var per =new Person("张三","跑步")

console.log(per)

class MathAdd{

constructor(a:number,b:number){

}
}
//Function是一个接口 直接new一个该接口,传入 string[]类型的参数  然后定义返回值
var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);
// var obj=new MathAdd("a","b","return a + b");

var test = new Function("a","b","return a + b")

console.log(test(10,12))
// 递归调用
function factorial(number) {
    if (number <= 0) { // 停止执行
        return 1;
    }
    else {
        return (number * factorial(number - 1)); // 调用自身
    }
}
;
console.log(factorial(6)); // 输出 720

TypeScript中lambda表达式

// lambda函数

var fool =(s:number)=>100+x
console.log(fool)
console.log(fool(19))
var dtse=y=>{
    // 参数类型让他自己去推断,或者给指定好
    console.log(y)
}
var dtse2=y=>{
    // 参数类型让他自己去推断,或者给指定好
    if (typeof y =="string"){
    console.log(y)
}else{
    console.log("啥也不是")
}
}
dtse("大江大河")
dtse2("hell")

无参数时可以设置空括号：


var disp =()=> { 
    console.log("Function invoked"); 
} 
disp();

TypeScript中函数重载

这个跟java中函数的重载逻辑是一样的

//函数重载
function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
 
function disp(x:any,y?:any):void { 
    console.log(x); 
    console.log(y); 
} 
disp("abc") 
disp(1,"xyz")

//定义一个方法  隐式的返回any function add(a:number):any;
function add(a:number,b:string):void;
// 定义一个方法
function add(a:string,b:string,c:number):void;
// 实现 方法以便实现方法的重载
/**
 * 如果参数类型不同，则参数类型应设置为 any。 
 * 参数数量不同你可以将不同的参数设置为可选。
 * 
 * @param a 
 * @param b 
 */
function add(a:any,b:string,c?:number):void{

}

函数重载:

1,如果参数类型不同，则参数类型应设置为 any。

2,参数数量不同你可以将不同的参数设置为可选。

Number对象

// NUmber中的函数
 
var size= new Number(100.789)
var niubi=size.toExponential();//把对象的值转换为指数计数法  
console.log(niubi)

console.log(typeof(size.toFixed()))//string
console.log(size.toFixed(2)) //保留小数点后2位

console.log(size.toLocaleString)//当地的数字格式顺序


console.log(typeof(size.toPrecision()))
console.log(size.toPrecision(2))//把数字格式化指定长度
console.log(size.toPrecision(4))


console.log(size.toString(10))//
console.log(size.toString(2))//数字转换位字符串,可以指定进制


console.log(size.valueOf())//

String对象

//String 
var st= new String("嘿嘿");
console.log(st.constructor)
console.log(st.length)


function employ(id:string){
    
}
var e= new employ("Hello")
//
employ.prototype.email="添加了属性email"
console.log(e.email)

console.log(st.charAt(2))//指定位置的字符
console.log(st.charCodeAt(2))//指定位置的字符 Unicode 编码。
console.log(st.concat("拼接字符串"))
st.match(/el/o) //匹配  查找找到一个或多个正则表达式的匹配。
st.replace("o","a")//替换

st.search("o")//查找
st.split("o")//分割
st.trim()

console.log(st.toLocaleLowerCase())
st.valueof()
//其他函数略

Array对象

//数组
var j;
var nums = [1001, 1002, 1003, 1004];
for (j in nums) {
    console.log(nums[j]);
}

var arr = new Array(1,2,3,4)
var str =arr.join()
var str2 =arr.join("-")
 console.log(str)
 console.log(str2)

 //遍历
 arr.forEach(function (value){
    console.log(value)
 })

 var arr1= new Array(5,6,7,8)

 var newarr =arr.concat(arr1)//数组整合到一个数组中
 newarr.forEach(function(value){
    console.log(value)
 })

 /*
 确定数组的所有成员是否满足指定的测试。

* @param predicate最多接受三个参数的函数。每个方法调用

*数组中每个元素的谓词函数，直到谓词返回一个值

*，它是布尔值false的强制值，或者直到数组结束。

* @param thisArg this关键字可以在谓词函数中引用的对象。

*如果省略thisArg，则使用undefined作为this值。
 */


 function dayu5(ele ,_index,_array){

    return (ele>=5)
 }
 //  every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
 console.log(newarr.every(dayu5))

//  过滤
function filterRes(ele ,index,array){
    return (ele>=4)

}

console.log(newarr.filter(filterRes))

newarr.indexOf(7)//7的位置

//返回处理之后的数组
var narr=newarr.map(Math.sqrt)//通过指定函数处理数组的每个元素，并返回处理后的数组。
narr.forEach(function(value){
    console.log(value)
})

// 向数组中添加元素
narr.push(100,200)

narr.pop()//从尾部移除,并返回该元素

arr.shift()//删除并返回数组的第一个元素。
arr.unshift(100,300)//像数组添加元素--一个,多个
narr.forEach(function(value){
    console.log(value)
})

//将数组中元素按规则处理为一个值将 （从左到右）
var arrs=arr.reduce(function(a,b){
return a+b
})
//（从you到zuo）
var arrs=arr.reduceRight(function(a,b){
    return a+b
    })

console.log("arrs--"+ arrs)

arr.reverse()//反转数组

// 将数组--切除一块作为新数组

arr.slice(0,4)
arr.some(dayu5)//这个跟every()类似

arr.sort()
arr.splice(1,2)//从数组位置1开始删除两个元素

在这里插入图片描述

CodeMartain

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
来点TypeScript

这里可以发现断言之后的数据类型并没有转换成number类型, 是因为转换通常意味着某种运行时的支持,java中可以通过。有版本号,文件名,来源映射关系—>>这映射关系四个字母一组,具体映射关系暂不去管他了。简单来说使用var 声明的变量相当于全局的变量,在代码块中修改该变量会影响该值。类型断言可以用来手动指定一个值得类型,即允许变量从一种类型更改为另一种类型,3,结束符分号是可选的,(如果语句写在一行上,是需要分隔符的)1,typejs会忽略程序中的空格,制表符,换行符。
复制链接

扫一扫