我是靠谱客的博主 平淡豌豆,最近开发中收集的这篇文章主要介绍TypeScript基础开发环境 1、安装VSCode,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

开发环境
1、安装VSCode

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

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

4、tsc --init 生成配置文件

5、使用tsc命令来转换TS 程JS:例如 tsc hello.ts

6、自动编译 tsc --watch,简写:tsc -w
 

在ts中会有文件里的变量命名重复的情况则需要在文件最上面加上一个模块化export default{}

数据类型

1、基础数据类型:number、string、boolean;

// 基本数据类型 string number boolean
//只能赋值字符串类型
let a:string;
a="杨杜坤";
console.log(a);

//只能赋值数字类型
let b:number;
b=20;
console.log(b);

//只能赋值布尔类型
let bol:boolean=true;
console.log(bol);

2、创建数组

// 只能加数字类型的数值
 let arr_1:number[];
 arr_1=[1,2,3,4,5];
 console.log(arr_1);

 let arr_2:Array<number>;
 arr_2=[1,2,3,4,5];
 console.log(arr_2);

//  创建联合类型的数组

let arr_3:(number|string)[];
arr_3=[1,2,3,"杨杜坤"];
console.log(arr_3);

// 创建任意类型的数组  不推荐使用
let arr_4:any[];
arr_4=[1,23,"杨杜坤",true];

3、元组


//元组 必须按照类型顺序传入,不能多不能少
let arr_5:[string,number,boolean];
arr_5=["杨杜坤",20,true];
console.log(arr_5);

枚举

enum fn{
    //  可以给默认值 默认是从0开始递增的
    Male=5,
    Female=10
}
console.log(fn.Male);
console.log(fn.Female);
// console.log(fn["女"]);

// 异构枚举,里面有各种类型的值
enum fn1{
    a="男",
    b=10,
}
console.log(fn1.a);
console.log(fn1.b);

bigInt和symbol的使用

// bigint表示非常大的值,这个类型的数值是后面加n
let a:bigint = BigInt(100);
let b:bigint = 100n;
console.log(a,b);

// symbol表示全局唯一引用
let sym_1 = Symbol("name")
let sym_2 = Symbol("name");
if(sym_1===sym_2){
    console.log("相同");
    
}else{
    console.log("不相同");
    
}

变量声明与解构

let arr_1 =["杨杜坤","田利业"];
let [name_1,name_2] = arr_1;
console.log(name_1,name_2); //杨杜坤 田利业

//...是拓展运算符
let arr_2 = ["哈哈哈","的撒","dsads"];
let [name_3,...name_4] = arr_2;
console.log(name_3,name_4); //哈哈哈 ['的撒',dsads]

let arr_3 = ["哈哈哈","的撒","dsads"];
let [,name_5,] = arr_3;
console.log(name_5); //的撒

类型断言

判断传入的数值是什么格式 关键字:typeof

export default{}
function fn(x:number|string){
    if(typeof x == "string"){
    console.log((<string>x).length);
    }else{
        console.log(x);
        
    }
}
fn("这是什么旋律"); //输出长度
fn(100) //输出100

type类型别名

export default {}

type a="这"|"大大"
let be:a;
be="大大"
console.log(be);


type sum=(x:number,y:number)=>number;
// 类型传入的参数需要是数字型,返回的解构也要是数字型
let a:sum = (a,b)=>a+b;
let b = a(10,20);
console.log(b);

type stu={
    name:string,
    sex:string,
    age:number;
}
let stuId:stu={
    name:"杨杜坤",
    sex:"男",
    age:19
}
console.log(stuId.name);

接口

在ts中有一种接口使用

export default {}

// 写一个接口
interface IFullName{
    name:string,
    sex:string,
    //这个属性是可写可不写的
    age?:number
}
// 使用接口
let a:IFullName = {
    name:"杨杜坤",
    sex:"男"
}

索引签名

export default {}

// 写一个接口
interface IFullName{
    name:string,
    sex:string,
    //这个属性是可写可不写的
    age?:number,
    song:string
}
let a:IFullName ={
    name:"杨杜坤",
    sex:"男",
    age:19,
    song:"天国"
}
let b = {name:"杨杜坤",sex:"男",age:20,
    song:"天国"};
let c:IFullName = b;
let a_1:IFullName = ({name:"羊肚",sex:"男",age:19}) as IFullName;

// 索引签名
interface Ib{
    [prop:string]:string;
}
// 可以写很多但是只能是string类型
let name:Ib={name_1:"李泽",name_2:"大大双"};

let names:IFullName = {name:"大的",sex:"男",age:20,song:"唱歌"}

函数接口继承

export default {}
// 定义函数接口
interface fn{
    (x:number,y:number):number
}
let sum:fn=function (x:number,y:number):number{
    return x+y;
}
let res = sum(100,200);
console.log(res);

// 函数继承

// 单继承
    interface fn_1{
        name:string
    }
    interface fn_2 extends fn_1{
        age:number
    }
    let arr:fn_2={
        name:"Dav",
        age:29
    }
// 多继承
    interface fn_3{
        sex:string
    }
    interface fn_4 extends fn_1,fn_3{
        age:number
    }
    let arr_1:fn_4={
        name:"半藏",
        age:20,
        sex:"男"
    }

最后

以上就是平淡豌豆为你收集整理的TypeScript基础开发环境 1、安装VSCode的全部内容,希望文章能够帮你解决TypeScript基础开发环境 1、安装VSCode所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(58)

评论列表共有 0 条评论

立即
投稿
返回
顶部