ts基础语法

最新推荐文章于 2024-06-16 16:36:41 发布
最新推荐文章于 2024-06-16 16:36:41 发布
阅读量220 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ChenfengZhang/article/details/134347584
版权

ts基础语法

基本类型

类型例子描述
number1,2,2.4任意数字
string“hello”任意字符串
Booleantrue,false布尔值
字面量其本身限制变量的值就是该字面量的值
any*任意类型
nuknown*任意安全的any
void空置（undefined）没有值或（undefined）
never没有值不能是任何值
object{name：“孙悟空”}任意的js对象
array[1,2]任意的js数组
tuple[4,5]元素，ts新增类型，固定长度数组
enumenum{A,B}枚举，ts新增类型
// 声明变量a,同时指定他的类型为number
let a: number;

// a的类型是number，以后的使用过程中a的值只能是数字
a = 10;
// a = "hello";a的类型是number，赋值给string会报错

let b:string;
b="hello"

// 如果变量的声明和赋值同时进行，ts可以自动对变量进行类型检查
let c = false;
c = true ;

// 方法的声明
function sum(a:number,b:number):number {
    return a+b;
}


// 直接使用字面量进行类型声明
let a :10;
a=10;

// b的值只能是male或者是false；|来链接多个类型（联合类型）
let b:"male"|"false";
b = "male";
b="false"

let c :boolean|string
c = true
c = "hello"

// any 表示任意类型，一个变量设置为any相当于关闭该变量的类型检查
// let d:any
//隐式any，显示器默认设置其类型为any
let d
d=10;
d="string"
d=true

// unknown未知类型
let e:unknown
e = 10
e="hello"
e=true


let s:string
// d的类型是any，它可以将值赋值给任意变量
// s = d

e = "hello"
// unknown是一个类型安全的any不能直接赋值给其他变量
if (typeof e === "string") {
    s = e
}


// 类型断言,可以用来告诉解析器变量的实际类型
/**
 * 语法
 * 变量 as 类型
 * <类型>变量
 * */ 
s = e as string
s = <string>e

// void 用来表示为空，表示没有返回值
function fn():void {
    
}


// never 表示永远没有返回值（报错信息）
function fn2():never {
    throw new Error("报错")
    
}


// object 表示一个js对象
let a3:object;
a3 = {};
a3 = function(){
}

// {}用来指定对象中包含哪些属性
// 语法：{属性名：属性值，属性名：属性值}
// 属性名后边加上？表示属性是可选
let b3:{name:string,age?:number}

b3 = {name:"孙悟空"}


// [propName:string]:any可以有任意属性
let c3 :{name:string,[propName:string]:any}
c3= {name:"猪八戒",a:1,b:2,c:3}

/**
 * 设置函数的结构类型
 * 语法：（形参：类型，形参：类型。。。）=>返回类型
 * **/ 
let d3:(a:number,b:number)=>number
d3 = function(a,b){
    return a+b;
}


/**
 * 数组类型的声明
 * 类型[]
 * Array<类型>
 * **/ 
// string[]表示字符串数组
let e3:string[]

// number[]表示数字数组
let f3:number[]

let g3:Array<number>


/**
 * 元组，固定长度的数组
 * **/ 

let h:[string,string]
h = ["hello","world"]

/**
 * enum,枚举
 * **/ 

enum Gender{
    Male,
    Female
}

let i:{name:string,gender:Gender,[propName:string]:any}
i ={
    name:"张翰",
    gender:Gender.Male
}

console.log(i.gender === Gender.Male);

// &表示同时
let v :{name:string} & {age:number}
v = {
    name:"张三",
    age:23
}

// 类型的别名
type myType = 1|2|3|4;
let k: myType;
let l: myType;

编译选项

自动编译文件

语法：tsc xxx.ts -w

自动编辑整个文件

创建tsconfig.json文件

{
    /**
     ts编辑器配置文件
     include:用来指定那些ts文件需要被编辑
        路径：  **表示任意路径
                *表示任意文件
     exclude:不需要被编辑的文件
        默认值：node_modules，bower_components，jspm_packages
    */
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        ".src/hello/**/*"
    ],
    /**
    compilerOptions编辑器的选项
    */ 
    "compilerOptions": {
        // 用来指定ts被编辑的es版本
        "target": "ES6",

        // 指定使用模块化的规范
        "module": "ES2015",

        // 用来指定项目中要使用的库
        // "lib": ["DOM"]

        // 编译后文件所在的目录
        "outDir": "./dist",

        //将代码合并为一个文件
        // "outFile": "./dist/app.js"

        // 是否对js文件进行编译，默认为false
        "allowJs": true,

        // 检查js语法是否符合语法规范，默认是false
        "checkJs": false,

        // 是否移除注释
        "removeComments": true,

        // 不生成编译后文件
        "noEmit": false,

        // 当有错误时候不生成编译文件
        "noEmitOnError": false,

        // 所有严格检查总开关
        "strict": false,

        // 用来设置编译后文件是否使用严格模式
        "alwaysStrict": true,

        // 不允许隐式any类型出现
        "noImplicitAny": false,

        // 不允许不明确类型的this
        "noImplicitThis": true,

        // 严格检查空值
        "strictNullChecks": false
    }
}

类

// 使用class关键字定义一个类
/**
 * 类中主要包含两部分
 * 1、属性
 *      
 * 2、方法
 */
class Person {
    // 定义实例属性
    name:string
    // readonly表示只读属性
    readonly age:number

    // 在属性前使用static关键字可以定义类属性(静态属性)
    static use:boolean = true 
    // 静态只读属性
    static readonly use1:boolean = true 


    // 方法
    /**
     * 如果方法以static开头则方法是类方法，可以直接通过类调用
     */
    sayHello(){
        console.log("大家好");
    }

}

const per = new Person()

构造函数

// 构造函数
class Dog{
    name:string
    age:number

    // 构造函数
    constructor(name:string,age:number){
        this.name = name
        this.age = age
        // this代表当前的实例
        console.log(this);
        
    }
    bark(){
        alert("汪汪汪")
    }
}

const dog = new Dog("小白",4)

继承

// 定义一个类
class Dag{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("汪汪汪");
        
    }
}
class Cat{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("喵喵");
        
    }
}
const dogg = new Dag("小白",5)
const catt = new Cat("小黑",3)
catt.sayHello()
dogg.sayHello()


// 类的继承
class Animal{
    name:string
    age:number
    constructor(name:string,age:number){
        this.name = name
        this.age = age
    }
    sayHello(){
        console.log("动物叫声");
        
    }
}

/**
 * Animal被称为父类
 * DOG继承了父类的所有的属性和方法
 * 通过继承可以将多个类中公共的代码写在一个父类中
 *  这样只需要写一次即可让所有的子类都同时拥有父类中的属性
 *  如果希望在子类中添加一些父类没有的属性和方法，直接添加就可以
 */
class DOG extends Animal{
    // 子类从写方法可以覆盖父类的方法
    sayHello(): void {
        console.log("汪汪汪");
    }
    // 子类添加的方法
    run():void{
        console.log(`${this.name}在跑`);
        
    }

}
class CAT extends Animal{
    sayHello(): void {
        console.log("喵喵喵");
        
    }

}
const DOGG = new Dag("小白",5)
const CATT = new Cat("小黑",3)
catt.sayHello()
dogg.sayHello()

super

(function(){
    class Animal{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name = name
            this.age = age
        }

        sayHello(){}
    }

    class Dog extends Animal{
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
        sayHello(): void {
            // 类的方法中 super就代表父类
            // super.sayHello()
            console.log("汪汪汪");
            
        }
    }
})()

抽象类

(function(){

    /**
     * 以abstract开头的类是抽象类
     *  抽象类与其他类区别不大，只是不能用来创建对象
     *  抽象类就是专门用来继承的类
     * 
     * 抽象类可以添加抽象方法
     */
    abstract class Animal{
        name:string
        age:number
        constructor(name:string,age:number){
            this.name = name
            this.age = age
        }

        abstract sayHello():void
    }

    class Dog extends Animal{
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
        sayHello(): void {
            // 类的方法中 super就代表父类
            // super.sayHello()
            console.log("汪汪汪");
            
        }
    }

    class Cat extends Animal{
        sayHello(): void {
            throw new Error("Method not implemented.")
        }
        color:string;
        constructor(name:string,age:number,color:string){
            // 子类中如果从写构造函数，那么在子类的构造函数中必须对父类构造函数调用
            super(name,age)//调用父类的构造函数
            this.color = color
        }
    }

    const dog = new Dog("小白",6,"白色")
})()

接口

(function(){
    // 描述一个对象的类型
    type myType = {
        name:string
        age:number
        [propName:string]:any
    }

    /***
     * 接口用来定义一个类的结构，用来定义一个类中应该包含哪些属性和方法
     *  同时接口也可以当成了类型声明来使用
     * 接口可以在定义类的时候去限制类的结构
     */
    interface myInterface {
        name:string
        age:number
    }

    interface myInterface {
        color:string
    }

    const obj:myInterface = {
        name:"xiaobai",
        age:5,
        color:"白色"
    }

    /***
     * 接口可以在定义类的时候去限制类的结构
     * 接口内的属性都不能有实际值
     * 接口中定义对象的结构，不考虑实际值
     *  在接口中，所有的方法都是抽象方法
    */

    interface myInter{
        name:string
        sayHello():void
    }
    /**
     * 定义类时，可以使类去实现一个接口
     *  实现接口就是使类满足接口的要求
     */
    class MyInter implements myInter{
        name: string
        sayHello(): void {
            console.log("动物名称");
            
        }
        constructor(name: string){
            this.name = name
        }
    }


})()

属性的封装

(function(){
    //    定义一个表示人的类
    class Person {
        /**
         * ts可以在属性前添加属性的修饰符
         * 
         * 
         * punblic 修饰的属性可以在任意位置访问(修改) 默认值(包括子类)
         * privte 私有属性，私有属性只能在类内访问
         *      -通过在类中添加方法使的私有属性可以被外部访问
         * protected 受保护的属性，只能在当前类和子类中使用
         */
        private _name:string
        private _age:number
        constructor(name,age){
            this._name = name
            this._age = age
        }

        /**
         *  属性存取器
         * getter方法用来读取属性
         * setting方法用来设置属性
         * 
         */

        // // 定义方法，用来获取name属性
        // getName(){
        //     return this._name
        // }

        // // 定义方法，用来设置name属性
        // setName(name:string){
        //     this._name = name
        // }


        // ts中设置getter方法
        get name(){
            return this._name
        }
        set name(value){
            this._name = value
        }
    }
    const person = new Person("张三",18)

    /**
     * 属性是在对象中设置的，属性可以任意修改
     * 属性可以任意被修改导致对象中的数据变得不安全
     */
    
    person.name = "李四"
    person.name
})()

泛型

function fn(a:number):number {
    return a
}
/**
 * 在定义函数或类时，如果遇到的类型不明确就可以使用泛型
 */

function fun<T>(a:T):T{
    return a

}


// 可以直接调用具有泛型的函数
fun(10)//不指定泛型，ts自动判读那
fun<string>("hello")//指定泛型

function func<T,K>(a:T,b:K):T {
    console.log(b);
    return a
}

interface Inter{
    length:number
}

// T extends Inter表示泛型T必须时Inter实现类（子类）
function funct<T extends Inter>(a:T):number {
    return a.length
}

funct('123')


class myClass<T>{
    name:T
    constructor(name:T){
        this.name = name
    }

}

const mc = new myClass<string>("李四")
ChenfengZhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ts的基本语法（笔记）
m0_65519288的博客
06-24 8500
export {} } // 定义函数的时候，this的类型，必须要和调用的时候的类型一致 function Person(this : ObjType , name : string) {
TS基础语法(一)
懒羊羊我小弟的博客
06-17 6724
TypeScript的基础入门知识，类型介绍。
TS-语法介绍
最新发布
m0_72560900的博客
06-16 530
TypeScript 提供了丰富的语法特性，使得 JavaScript 的开发更具类型安全性和可维护性。从基本语法到高级特性，掌握这些语法特性可以极大提升开发效率和代码质量。希望这篇文章能帮助你全面理解和使用 TypeScript。
TS基础语法
每天都想吃好吃的
07-19 862
原始类型：数字（Number）、字符串（String）、布尔值（Boolean）、空（null）、未定义（undefined）、布尔值（Boolean）、字符串（String）、Symbol（符号）、BigInt（大整数）TypeScript（缩写为TS）是一种静态类型的JavaScript超集，它为JavaScript添加了类型注解和其他扩展功能。
ts基础语法.docx
02-28
### TypeScript 基础语法详解 #### 一、TypeScript 概述 TypeScript 是一种由微软开发并维护的开源编程语言，它被设计为 JavaScript 的超集，旨在通过引入静态类型检查和其他高级语言特性来增强 JavaScript 的功能...
ts基础语法1.txt
09-25
开始记录我的成长点，将自己踩过的坑、遇到的好的知识点分享给大家，如果有写得不好的地方，欢迎指正。
TS TypeScript基础 前端 面向对象
11-14
6. **代码维护性**：虽然TS代码量相对JS可能会增加，但其更清晰的类型定义和更严格的语法使得代码更容易理解和维护，尤其是在大型项目中。 **安装与配置**： 安装TS可以通过npm全局安装命令`npm i -g typescript`。...
V3+TS(基础知识解读)
04-07
Vue 3 与 TypeScript 的结合为开发者提供了一种强大且类型安全的开发体验。Vue 3 是 Vue.js 的最新...而 TypeScript 是一种 JavaScript 的超集，它添加了静态类型检查和一些新的语法特性，使得代码更加健壮和易于维护。
TS视频01TS视频01
05-17
标题中的"TS视频01TS视频01"可能是指一系列关于TypeScript的视频教程的首集，描述同样强调了这一点，暗示我们即将探讨的是TypeScript的基础知识。标签"ts"进一步确认了我们要深入理解的编程语言是TypeScript，这是一...
TS视频05TS视频05TS视频05
05-17
综合以上分析，这个"TS视频05"很可能是关于TypeScript基础语法的教程，特别是针对数组的深入讲解，对初学者和有经验的JavaScript开发者都具有一定的学习价值。通过观看这个视频，观众应该能掌握TypeScript中数组的...
TS视频06TS视频06TS视频06TS视频06
05-17
在学习这个"TS视频06-函数基础"时，你将会掌握如何定义、调用和管理函数，以及如何利用TypeScript的类型系统来增强函数的安全性和可维护性。通过深入理解这些概念，开发者能够在大型项目中编写更健壮和易于维护的...
ts08-16ts08-16ts08-16
05-17
总结起来，这个系列教程全面覆盖了TypeScript的基础语法和Webpack的使用，从配置Webpack处理TS代码到理解类、面向对象的概念，再到深入探讨继承和编译选项，对提升开发者在TypeScript环境下的项目构建能力具有极大的...
TS大全深入浅出深入学习
09-28
这些资源将覆盖TypeScript的基础语法、进阶特性和实际应用，帮助学习者全面掌握TypeScript。 总结，"TS大全深入浅出深入学习"涵盖了TypeScript的静态类型、接口、泛型、枚举和模块等核心概念，是学习TypeScript的...
mpeg2-ts文档
08-17
ISO 13818-1是MPEG-2系统部分的规范，详细描述了TS的结构和语法，以及如何将不同媒体数据流复用成单一的TS流。它是理解TS流的基础，并规定了如何解码和重建原始多媒体内容。 **mpeg-ts详细介绍** MPEG-TS的详细...
ts基本语法
weixin_43443341的博客
09-14 4380
常用ts语法
TypeScript学习笔记:TS基础语法
shiqing4387的博客
06-12 719
JavaScript的缺点JavaScript的升级。
TS 的语法
weixin_44908855的博客
11-10 2935
1. typeScript 中的数据类型 typeScript 中为了使编写大代码更规范，更利于维护，增加了类型效验，在ts中为我们提供了以下类型 布尔类型：boolean 数字类型：number 字符串类型：string 数组类型：array 元组类型：tuple 枚举类型：enum 任意类型：any 其它类型：null 、undefined、void 、never 2. typeScript 中变量的类型限定 布尔类型：booleanlet flag : boolean = true flag =
以上述为基础加上ts语法
07-14
当在Vue 3中结合TypeScript（TS）语法使用`setup`语法糖时，您可以添加类型注解和类型推断来增强代码的可读性和类型安全性。 下面是一个示例，展示了如何在Vue 3中使用TypeScript和`setup`语法糖： ```vue <p>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值