TypeScript基础介绍

2764150442

已于 2022-09-07 16:11:04 修改

阅读量393

点赞数

文章标签： typescript javascript 前端

于 2022-09-07 16:09:17 首次发布

本文链接：https://blog.csdn.net/weixin_70815247/article/details/126747368

版权

什么是TypeScript？

TypeScript是JavaScript的一个超集,支持ECMAScript 6标准。

TypeScript由微软开发的自由和开源的编程语言。

TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript 可以运行在任何浏览器上

TypeScript是一种由微软开发的自由和开源的编程语言。它是Javascript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。

TypeScript与JavaScript的区别

TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改

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

TypeScript 可处理已有的JavaScript 代码，并只对其中的TypeScript 代码进行编译。

TS的优势

更早的发现错误

任何位置都有代码提示，增加开发效率

类型系统提升了代码的可维护性，重构更容易

使用最新的ECMAScript语法，最新

TS类型推断机制，降低成本

开发环境搭建

1.安装vSCode

2.安装Node.js:使用命令node -v来检查nodejs版本

3.安装TypeScript编译器:npm i typescript -g

4. tsc --init #生成配置文件

5.使用tsc命令来转换TS成JS:例如tsc he11o.ts

6.自动编译tse --watch

TS初体验

TS代码

export default{}
function test(a:string){
    console.log(a);
}
test("胡桃")
test("季沧海")
test("季沧海1111")

JS代码

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {};
function test(a) {
    console.log(a);
}
test("胡桃");
test("季沧海");
test("季沧海1111");

TS中的数据类型

1.基础数据类型

number类型:双精度64位浮点值。它可以用来表示整数和分数。

boolean类型:表示逻辑值:true和false。

string类型:一个字符系列，使用单引号(')或双引号(")来表示字符串类型。反引号(`)来定义多行文本和内嵌表达式

例：

export default{}
// 数值类型
let num:number;
num=1;
console.log(num);

// 布尔类型
let flag:boolean;
flag=true;
flag=false;

//字符串类型
let beauty:string;
beauty="林允儿"
console.log(`我的姐姐${beauty}`);

2.数组

声明变量的一组集合称之为数组

export default{}
// 数组的基本使用
// 方式一
let beautyArray:string[];
beautyArray=["晓明","小名","小明"]

// 方式二
let numArr:Array<number>;
numArr=[1,23,4,4,14,14,1]

// 方式三
let myBeauty:(string|number|boolean)[];
myBeauty=["毛晓婷",123,false]
myBeauty=["毛晓婷","哈哈哈哈",true,231,123,false]

3.元组

·元祖类型Tuple

· TS中的元祖类型其实就是数组类型的扩展

·元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

例：

元祖类型 Tuple

lTS中的元祖类型其实就是数组类型的扩展

元组类型用来表际已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同

表示定义了一个名称叫做 tup1 的元祖，这个元祖中将来可以存储3个元素，

第一个元素必须是字符串类型，第二个元素必须是数字类型，第三个元素必须是布尔类型

export default{}
//元组类型
let tup1:[string,boolean,number]
tup1=["小童",true,13];
// tup1=[true,"ss",41];         错误
console.log(tup1);

4.anyhevoid

export default{}
// any:表示任意类型,当我们不清楚某个值的具体类型的时候我们就可以使用any
// void:当一个函数没有返回值时，你通常会见到其返回值类型是void
// any类型
// any表示任意类型，当我们不清楚某个值的具体类型时候，我们可以使用any
// 在 TS中任何数据类型的值都可以负责给any类型
// 使用场景一
// 变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查
let salary:any = 1800   //数字类型
salary = 'my salary is 19k' //字符串类型
salary = false          //布尔类型

// 使用场景二
// 改写现有代码时候，任意值允许在编译时可选择地包含或移除类型检查
let x:any = 4
x.ifItExists()      //正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed()
//使用场景三
// 定义存储各种类型数据的数组时
let arr:any[]=["刘易斯",123,true]
console.log(arr[0]);

// void类型
// 某种程度上来说，void类型像是与any类型相反，他表示没有任何类型
// 在一个函数没有返回值时，你通常会见到其返回值类型是viod
// 在TS中只有null和undefined可以赋值给viod类型
function test():void{
    console.log("DW奥迪hoGD晚点吧所感动哇");
    console.log("都叫我看奥运会大数据快待会一王三娘的达瓦大" );
    
    
}
test()

5.null和undefined

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

·非严格模式下，可以把 null和undefined赋值给number类型的变量。

//TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。和void相似,它们的本身的类型用处不是很大
let x:undefined=undefined;
let y:null = null
let money:number=100;
money=null
money=undefined

6.never与object

never类型:

表示的是那些永不存在的值的类型;

never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型;

变量也可能是never类型,当它们被永不为真的类型保护所约束

object类型;

object表示非原始类型，也就是除number , string,boolean,symbo1，nu11或undefined之外的类型

定义了一个只能保存对象的变量

我们后面更常用的是接口与类型别名

//TypeScript里,undefined和null两者各自有自己的类型分别叫做undefined和null。和void相似,它们的本身的类型用处不是很大
function error(message:string):never{
    throw new Error(message);
}
error("挂掉了~~")

7.枚举

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

export default{}
// enum Gender{
//     Male,   //男
//     Feamle  //女
// }

// let gender:Gender;
// gender = Gender.Feamle;

// // gender = "666"   //报错
// // gender = true    //报错

// gender=10;  //数值可以

// console.log(gender);    //1


// 注意点：TS中的枚举类型，默认是从上至下从0开始递增的
// 虽然默认是从0开始，但是我们也可以手动指定枚举的取值的值
// 注意点：如果手动制定了前面枚举的取值，那么后面枚举的取值会根据前面的值来递增
// enum Gender {
//     Male=1,
//     Feamle
// }
// console.log(Gender.Male);   //1
// console.log(Gender.Feamle);   //2

//注意点： 如果后面的值取值了，前面的不影响
// enum Gender{
//     Male,   //男
//     Feamle=6       //女
// }

// console.log(Gender.Male);   //0
// console.log(Gender.Feamle);   //6

// 注意点：可以同时改多个值，如果改了多个，那么修改的是什么最后就是什么

// enum    Gender{
//     Male=100,
//     Feamle=200
// }
// // console.log(Gender.Male);   //100
// // console.log(Gender.Feamle);   //200

// const getNum=()=>200
// let gender:Gender;
// gender:100;
// gender=getNum()

// // 字符串枚举
// enum Direction{
//     Up="Up",
//     Down="Down"
// }
// console.log(Direction.Up);
// console.log(Direction.Down);
// // console.log(Direction[0]);   undefined
// console.log(Direction["Up"]);


// 异构枚举
enum Gender{
    Male=1,
    Feamle="女"
}
console.log(Gender.Male);
console.log(Gender.Feamle);
console.log(Gender[1]);
// console.log(Gender["女"]); //错误

8.bigint和symbol

export default{}

//bigint
let hundered1:bigint=BigInt(100);
let hundered2:bigint=(100n);
console.log(hundered1);
console.log(hundered2);

//symbol
let firstName = Symbol("name")
let secondName = Symbol("name")
console.log(firstName);
console.log(secondName);

if (firstName===secondName) {
    console.log("我们一样");
    
} else {
    console.log("我们不一样");
    
}

9.变量声明与解构

·与js中完全一致

数组解构与对象解构

export default{}
// // 数组结构
// let goods1 = ["小明","小花"]
// let[firstName,secondName]=goods1;
// console.log(firstName);
// console.log(secondName);

let goods2 = ["小明","小花","小满","小蛮"]
let[firstName2,...secondName2]=goods2;
console.log(firstName2);
console.log(secondName2);

let goods3 = ["小明","小花","小满","小蛮"]
let[,firstName3,,secondName3]=goods3;
console.log(firstName3);
console.log(secondName3);

// 对象解构
let beauty={
    name:"林允儿",
    age:"24",
    sex:"女"
}

let {name,age,sex}=beauty
console.log(name);
console.log(age);
console.log(sex);

10.类型断言

·什么是类型断言?

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

通俗的说就是我相信我自己在定义什么类型

·语法格式

<类型>值

值as类型

// let str ="dwaibdgwadwa的挖洞娃的厚爱华东五阿哥导航"
// // 方式一
// let len = (<string>str).length
// console.log(len);
// // 方式二
// let len2 = (str as string).length
// console.log(len);


// function TypeAs(x:number|string){
//     let len = (x as string).length;
//     console.log(len);
    
// }
// TypeAs("dwadhuwhdaDwadawd吊完顶安徽的和我爱活动后爱国")


function typeAs(x:number|string){
    if (typeof x == "string") {
        let len =(x as string).length
    } else {
        console.log(x);
        
    }
}
typeAs("看阿为广大哈文的达瓦达瓦大大F额F色岗位")
typeAs(100)

11.Type别名

类型别名就是给一个类型起个新名字,但是它们都代表同一个类型

export default{}
// 第一种
type beautys="小花"|"小明"|"晓晓"|"甜甜"
let one:beautys;
one="小花"
//第二种
type myfun = (a:number,b:number) => number
let fun:myfun=(a:number,b:number)=>a+b
let res = fun(10,20)
console.log(res);


//第三种
type myGoddass={
    name:string,
    age:number,
    sex:string
}
let shuzhen:myGoddass={
    name:"哈哈",
    age:12,
    sex:"男"
}

接口

接口的基本使用

1.什么是接口?

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现,然后第三方就可以通过这组抽象方法调用,让具体的类执行具体的方法

接口也是一种数据类型

export default{}
interface IFullName{
    firstName:string
    lastName:string
}

let goddassName:IFullName={
    firstName:"刘",
    lastName:"亦菲"
}
console.log(goddassName.firstName,goddassName.lastName);

function say({firstName,lastName}:IFullName):void{
    console.log(`我的女神是${firstName}${lastName}`);
    
}
say(goddassName);

2.可选属性与只读属性

可选属性使用:?

只读属性使用: readonly

readonly与const的区别:做为变量使用的话用const，若做为属性则使用readonly、

export default{}
// 可选属性
interface IFullName{
    firstName:string,
    lastName:string,
    age?:number
}
let goddassName:IFullName={
    firstName:"杨",
    lastName:"超越",
    // age:12       //因为上边的？可写可不写
}

//只读属性
interface IInfo{
    readonly name:string
    readonly age:number
}
let info:IInfo={
    name:"赵丽颖",
    age:16
}

//报错
// info.name="波比";
// info.age=13;

3.索引签名

索引签名用于描述那些通过索引得到的类型

export default{}

//解决参数可多可少问题
// 方案一：使用可选参数用问号？
interface IFullName{
    firstName:string
    lastName:string
    age?:number
}
let goddass1:IFullName={
    firstName:"刘",
    lastName:"亦菲",
    age:19
}
let goddass2:IFullName={
    firstName:"刘",
    lastName:"亦菲"
}

// 方案二:使用变量
let info={
    firstName:"刘",
    lastName:"亦菲",
    age:19,
    sing:"ohhhh"
}
let goddass3:IFullName=info;
// 方案二:使用变量
let goddass4:IFullName=({
    firstName:"刘",
    lastName:"亦菲",
    age:19,
    sOng:"爱的供养",
    tv:"剑三"
})as IFullName;


//索引签名
interface IBeauty{
    [props:string]:string
}

let goddass5={name1:"刘亦菲",name2:"刘诗诗",name3:"王文文"}

interface IAge{
    [props:string]:number
}

let ages = {age1:10,age2:20,age3:30}






// let goddass6:IMyFullName={firstName:"刘",lastName:"亦菲",sex:"女",mobile:"1241414"}

4.函数接口

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。

export default{}

// 定义函数接口
interface IMageMoney{
    (salary:number,reward:number):number
}
let sum:IMageMoney=function(x:number,y:number):number{
    return x+y
}
let res = sum(100,1000)
console.log(res);

5.接口的继承

接口维承就是说接口可以通过其他接口来扩展自己。

Typescript允许接口继承多个接口。

export default{}

//单继承
interface Iperson{
    age:number
}
interface IName extends Iperson{
    name:string
}
let lady:IName={
    name:"Dwa",
    age:13
}
console.log(lady);

//多继承
interface father{
    m1:number
}
interface father{
    m2:number
}
// let money:ISon={
//     m1:100,
//     m2:100,
//     s:100
// }
// console.log(`一共有$(money.m1+monet.m2)`);

6.接口与类型别名的异同

1.相同点:

·都可以描述属性或方法

·都允许拓展

2.不同点:

type可以声明基本数据类型,联合类型，数组等; interface只能声明变量

当出现使用type和interface声明同名的数据时;type会直接报错;interface会进行组合

type不会自动合并;interface会

export default{}
// 相同点：
// 1.都可以描述属性或方法
type WomanStar={
    name:string
    age:number
    show():void
}

interface IWomanStar{
    name:string
    age:number
    show():void
}

let star1:WomanStar={
    name:"刘亦菲",
    age:14,
    show(){
        console.log("建议");
        
    }
}

let star2:WomanStar={
    name:"刘亦菲",
    age:14,
    show(){
        console.log("建二");
        
    }
}
type  money1={
    x1:number
}

type money2 = money1&{
    x2:number
}
let money:money2={
    x1:10,
    x2:20
}
interface IStar1{
    name:string
}
interface IStar2 extends IStar1{
    age:number
}
let star:IStar2={
    name:"范冰冰",
    age:124
}

//不同点
// 1.type可以声明基本数据类型，联合类型，数组等
//   interface只能声明变量

type t1=number;
type t2=number|string;
type t3=[number|boolean]
//interface Iage = number;//报错
// 2.当出现使用type和interface声明同名的数据时type会直接报错
// interface会进行组合
// type mygoddassName={
//     name:string
// }

// type mygoddassName={
//     name:number
// }

interface mygoddassName{
    name:string
}
interface mygoddassName{
    name:string
    age:number
}
let goddass:mygoddassName={
    name:"赵丽颖",
    age:20
}

2764150442

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypeScript基础介绍

TypeScript是JavaScript的一个超集,支持ECMAScript 6标准。TypeScript由微软开发的自由和开源的编程语言。TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript 可以运行在任何浏览器上TypeScript是一种由微软开发的自由和开源的编程语言。它是Javascript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
复制链接

扫一扫