ts 基础语法

无称可用

2024-04-14 帮助1人

一、搭建

1、TypeScript环境搭建
npm install -g typescript

2、TypeScript打包成js
tsc helloworld.ts

3、运行js
node helloworld.js

二、搭建

1、TypeScript环境搭建
npm install -g typescript

2、打包并运行
npm install -g ts-node
ts-node helloworld.js

三、静态类型（Static Typing）

//静态类型
const count:number=1; //count会继承数字类型的方法
const name1: string = '李白'
// null undefinde,boolean,void,symbol


//对象类型包括 对象，数组，类，函数
const duixiao:{
    name:string,
    age:number
}={
    name:"字符串",
    age:50
}

const arr:string[]=["字符串","名字"];

class Person{};
const lei:Person=new Person();

const functions:()=>string=()=>{return ""};

三、类型注解与推断

// type annotation 类型注解
let num:number;
num=10;

// type inference 类型推断
let strings="asda"

//工作使用问题（潜规则）
// 如果Ts能够自动分析变量类型，我们就上面也不要做了
// 如果Ts无法分析变量类型的话，我们就需要使用类型注解

//不用类型注解
const one=1;
const two=2;
const three=one two;

//需要类型注解
function getTotal(one,two){
    return one two
}
const total=getTotal(1,2);

四、函数参数和返回值的注解

//1、函数返回类型的注解
//规定返回类型
function getTotal(one:number,two:number):number{
    return one two;
}
getTotal(1,2);

//不返回
function sayHello():void{
    console.log("")
}

//函数永远不能执行完、死循环
function errunction():never{
    throw new Error()
}
errunction();

function forNever():never{
    while(true){}
}


//2、函数参数注解 函数中传递对象，写一个相同的对象并把注解加上
function getoneTwo({one,two}:{one:number,two:number}){
    return one two
}
getoneTwo({one:1,two:2});
//单个对象
function getOne({one}:{one:number}){
    return one;
}
getOne({one:1})

五、数组类型注解

//数组类型注解的方法

const numberArr:number[]=[1,2,3];
const stringArr:string[]=['a','b','c']

const undefindeArr:undefined[]=[undefined,undefined,undefined];
//数组多类型注解
const arr:(number | string)[]=[1,'string',2];
console.log(arr);

//数组 内对象
const xiaojiejie:{name:string,age:number}[]=[
    {name:"刘艺",age:15},
    { name:"李四",age:20}
]

//数组内对象 另外一种形式
//type作用就是给类型起一个新名字，支持基本类型、联合类型、元祖及其它任何你需要的手写类型,常用于\color{red}{联合类型}

type Lady={name:string,age:number};
const xiaojiejie1:Lady[]=[
    {name:"刘艺",age:15},
    { name:"李四",age:20}
]

//可用class来代替类型别名type
class Madam{
    name:string;
    age:number;
}
const xiaojiejie2:Madam[]=[
    {name:"刘艺",age:15},
    { name:"李四",age:20}
]

六、元组的使用和类型约束

//元组的使用和类型约束
const xiaojiejie:[string,string,number]=['asdas','asdas',29];

const xiaojiejie1:[string,string,number][]=[
    ['sdqw','qweqa',23],
    ['asd','qeqw',36]
]

7、接口的使用（结合实现与继承）

//接口interface

const screenResume=(name:string,age:number,bust:number)=>{
    age<24&&bust>=90 && console.log(name '进入面试')
    age>=24||bust<90&&console.log(name '你被淘汰')
}

const getResume=(name:string,age:number,bust:number)=>{
    console.log(name '年龄是' age);
}


screenResume('加大',18,94);
getResume('加大',18,94);

//以上写法 重复太多

//定义一个接口 规定参数 定义类型，重复使用，减少代码。
interface Girl{
    name:string,
    age:number,
    bust:number,
    [propname:string]:any,//任意类型与值
    say():string
}


//一个接口继承另外一个接口
interface teacher extends Girl{
    teach():string
}


//类实现接口
class xjj implements Girl{
    name="王婷"
    age=26
    bust=10
    qwe="qwe"
    say(){
        return "很有感觉"
    }
}

let girl={
    name:"王婷",
    age:26,
    bust:10,
    qwe:"qwe",
    say(){
        return "很有感觉"
    },
    teach(){
        return ""
    }
}

const screenResumeage=(girl:Girl)=>{
    girl.age<24&&girl.bust>=90 && console.log(name '进入面试')
    girl.age>=24||girl.bust<90&&console.log(name '你被淘汰')
}

const getResumeage=(girl:Girl)=>{
    console.log(girl.name '年龄是' girl.age,girl.qwe,girl.say());
}

screenResumeage(girl);


const teachers=(girl:teacher)=>{
    console.log(girl.name '年龄是' girl.age,girl.qwe,girl.say());
}
teachers(girl)

8、类的复习

1、类的使用

//类的使用
class lady{
     name="虚空";
    sayhello():string{
        return "你好"
    }
}

class xiaojijie extends lady{
    //子继承父 子可以重写父的方法  super可以点出父类中的属性
    sayhello(): string {
        return "帅哥，你好" super.sayhello()
    }
    saylove(): string {
        return "i love you"
    }
}
let say=new xiaojijie();
console.log(say.name,say.sayhello)

2、类的访问类型

//public 公共的 在类的外部和内部 继承都能访问
//
// privat私有的 类的外部不能访问 继承也不能访问
//
//protected 类的内部 和继承能使用，类的外部不能访问
class Person{
   public name:String;
   private age:number;
   protected sex:number;
}

const person=new Person();
//报错 person.age='jspang'
// 报错类的外部不能访问 person.sex;
person.name='jspang'
console.log(person.name);

3、类的构造函数

//类的构造函数

class aperson{
    //不太优雅
    // public name:string;
    // constructor(name:string){
    //     this.name=name;
    // }

    //简化版
    constructor(public name:string){}
    
}

//子类继承父类 必须写super()
class apersonone extends aperson {
    constructor(public age:number){
        super("")
    }
}

const person=new aperson('wl')
console.log(person.name)


const apersononebig=new apersonone(20)
console.log(apersononebig.age)

4、类的getter，setter ，static

//类的getter,setter
class xiaojiejie{
    constructor(private _age:number){}
    get age(){
        return this._age-10;
    }
    set myage(age:number){
        this._age=age;
    }
}
const myxiaojiejie = new xiaojiejie(20);
//类的getter,setter是一个属性不是方法
console.log(myxiaojiejie.age)
myxiaojiejie.myage=50;
console.log(myxiaojiejie.age)

//statc 静态属性 直接通过类名调用方法
class Girl{
    static sayLove(){

    }
}
console.log(Girl.sayLove())

5、抽象类和抽象方法

//抽象类 如果一个抽象类中有抽象方法 那么继承抽象方法的类 要实现这个抽象方法。

abstract class Girls{
    abstract skill()
}
class Waiter extends Girls {
    skill(){
        return "端茶倒水"
    }
}
class fuwu extends Girls {
    skill(){
        return "fuwu"
    }
}

9、联合类型，类型断言。

//联合类型和类型保护



interface Waiter
{
    anjiao:boolean,
    say:()=>{}
}

interface Teacher{
    anjiao:boolean,
    sayyingyu:()=>{}
}

//联合类型
function judgeWho(animal:Waiter|Teacher){
    //类型守护1
    if(animal.anjiao){
        //类型断言
            (animal as Waiter).say()
    }else{
        (animal as Teacher).sayyingyu()
    }
}

//联合类型
function judgeWhotwo(animal:Waiter|Teacher){
      //类型守护2
    if("say" in animal){
        animal.say()
    }else{
        animal.sayyingyu()
    }
}

//联合类型
function add(first:string | number,second:string | number){
    //用typeof做类型守护 字符串拼接 数字相加
    if(typeof first==="string" || typeof second==="string"){
        return `${first}${second}`
    }
    return first second
}

class NumberObj{
    cont:number=0;
}


//联合类型
function addObj(first:object | NumberObj,second:object|NumberObj){
 //用instanceof做类型守护
    if(first instanceof NumberObj && second instanceof NumberObj){
        return first.cont second.cont
    }
    return 0;
}
var Numberdeobj=new NumberObj();
console.log(addObj({},Numberdeobj))

10、枚举类型

   //初级程序员 写判断值
    function getServe(Statis:number):string{
        if(Statis===0){
            return "anjiao"
        }else if(Statis===1){
            return "spa"
        }else if(Statis===2){
            return"dbj"
        }else{
            return ""
        }
    }

    getServe(2)

    //中级程序员 写的判断值
    var todygan={
        anjiao:0,
        spa:1,
        dbj:2
    }
    function getServetwo(statis:number):string{
        if(statis===todygan.anjiao){
            return "anjiao"
        }else if(statis===todygan.spa){
            return "spa"
        }else if(statis===todygan.dbj){
            return"dbj"
        }else{
            return ""
        }
    }
    getServetwo(todygan.dbj);

    //高级程序员定义一个枚举 枚举内参数不赋值 默认从0开始
    enum Statis{
        anjiao,
        spa,
        dbj
    }
    //也可以赋值 给第一个赋值 后面会con第一个值开始递增
    enum Statistwo{
        anjiao=1,
        spa,
        dbj
    }


    function getServethree(statis:number):string{
        if(statis===todygan.anjiao){
            return "anjiao"
        }else if(statis===todygan.spa){
            return "spa"
        }else if(statis===todygan.dbj){
            return"dbj"
        }else{
            return ""
        }
    }
    console.log(getServethree(Statis.dbj))

11、泛型

//泛型
function join<weilei>(first:weilei,secound:weilei){
    return `${first}${secound}`
}

join<string>("ad","ada");

//泛型中数组的使用
function myFun<ANY>(params:ANY[]){
    return params
}
myFun<string>(["1","2","3"])

//泛型中数组的使用
function myFuntwo<T>(params:Array<T>){
    return params
}
myFuntwo<string>(["1","2","3"])

//多个泛型的使用
function jointwo<weilei,d>(first:weilei,secound:d){
    return `${first}${secound}`
}
jointwo<string,number>("魏磊",20)

//在类中使用泛型
class SelectGirs<T>{
    constructor(private girls:T[]){}
    getGirl(index:number):T{
        return this.girls[index];
}
}
const SelectGirss=new SelectGirs<string>(["a","b","c"]);
SelectGirss.getGirl(0);


//泛型监测接口
interface Girltwo{
    name:string
}

class SelectGirstwo<T extends Girltwo>{
    constructor(private girls:T[]){}
    getGirl(index:number):string{
        return this.girls[index].name;
}
}
const SelectGirsstwo=new SelectGirstwo([
    {name:"a"},
    {name:"b"}
])


console.log(SelectGirsstwo.getGirl(0))

//泛型约束 通过继承其他类型来约束
class SelectGirsthree<T extends string|number>{
    constructor(private girls:T[]){}
    getGirl(index:number):T{
        return this.girls[index];
}
}
const SelectGirssthree=new SelectGirsthree<string>(["a","b"])
console.log(SelectGirssthree.getGirl(0))

12、ts命令空间

//命名空间
namespace qwer{
export class a{
constructor(){
console.log(a)
}
}
export class b{
constructor(){
console.log(b)
}
}

}
//命名空间嵌套

namespace qwers{
    namespace qwerst{
        export class a{
            constructor(){
                console.log(a)
            }
        }
        export  class b{
            constructor(){
                console.log(b)
            }
        }
        
    }
    export class a{
         constructor(){
             console.log(a)
         }
     }
     export  class b{
         constructor(){
             console.log(b)
         }
     }
     
 }

这篇好文章是转载于：学新通技术网

ts 基础语法

一、搭建

二、搭建

三、静态类型（Static Typing）

三、类型注解与推断

四、函数参数和返回值的注解

五、数组类型注解

六、元组的使用和类型约束

7、接口的使用（结合实现与继承）

8、类的复习

9、联合类型，类型断言。

10、枚举类型

11、泛型

12、ts命令空间

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

怎样阻止微信小程序自动打开

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐