扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >分享Typescript的13个基础语法
  • 440

0
分享到

分享Typescript的13个基础语法

2024-04-02 19:04:59 440人浏览 泡泡鱼
摘要

目录一.Ts是什么 二. 基本语法 1.声明原始数据类型2.声明Object类型 2.1声明数组类型2.2声明元组类型3.声明枚举类型 4.函数参数与返回类型 5.任意类型 6.类型

一.Ts是什么

首先，强类型不允许随意的隐式类型转换，而弱类型是允许的。javascript就是经典的弱类型语言。而typescript可以说是JavaScript的超集，在js的基础上新增了许多语法特性，使得类型不再可以随意转换，能大大减少开发阶段的错误。

二. 基本语法

1.声明原始数据类型

在变量后面指定一个关键字表示其只能为什么类型。

string类型：


const a: string = 'auroras'

number类型：


const b: number = 666 // 包括 NAN Infinity

boolean类型：


const c: boolean = true

null类型：


const d: null = null

undefined类型：


const e: undefined = undefined

symbol类型：


const h: symbol = Symbol()

2.声明Object类型

首先，object类型不单单可以指定对象，还可以指定数组或函数：


const foo1: object = {};
const foo2: object = [];
const foo3: object = function(){};

如果只想指定为对象，如下，对象属性都要提前声明好类型：


const obj: {name: string,age: number} = {
    name: '北极光',
    age:18
}

2.1声明数组类型

可以指定声明Array且通过<>指定元素类型，比如指定声明元素都为数字的数组：


const arr: Array<number> = [1,2,3]

第二种方式如下，也指定声明元素都为数字的数组：


const arr: number[] = [1,2,3]

2.2声明元组类型

就是要提前指定数组里每个元素的类型，严格一一对应：


const tuple: [number,string,boolean] = [666,'auraros',true]

3.声明枚举类型

通过关键字enum声明一个枚举类型，如：


enum Status {
    pedding = 1,
    resolve = 2,
    reject = '3'
}
//访问
console.log(Status.pedding);

如果全不写值，默认值为从0开始递增。如果第一个元素为字符类型，就必须全部定义值。如果第一个元素指定为一个数字，后面元素不写值，那值为第一个元素值按位置大小递增的结果。

4.函数参数与返回类型

函数声明式：

指定函数传入参数类型，指定返回值类型，调用时传入参数个数与类型都必须相同：

括号里指定每个参数类型，括号右边指定返回值的类型。


function fun (name:string,age:number):string{
  return 'sss'
}
fun('auroras',18);

如果传入参数不确定传不传，那么可以给参数加个‘？'表明它是可选的：


function fun (name:string,age?:number):string{
  return 'sss'
}
fun('auroras');

或者给参数添加默认值，那也会成为可选参数：


function fun (name:string,age:number=666):string{
  return 'sss'
}
fun('auroras');

如果参数个数不确定，可以用扩展运算符加解构赋值表示，当然要传入与指定类型一致的：


function fun (name:string,age:number=666,...res:number[]):string{
  return 'sss'
}
fun('auroras',1,2,3);

函数表达式：


const fun2:(name:string,age:number)=>string = function(name:string,age:number){
  return 'sss'
}

定义接口时再详细说。

5.任意类型

通过指定any关键字表示任意类型，跟原来 js 一样，可以任意赋不同类型的值：


let num:any = 1;
num = 'a';
num = true;

6.类型断言

类型断言就是明确的告诉typescript这个变量就是某种类型的，百分之百确定。不用typescript在一些情况下要自己推断某些没有明确定义或者多变的场景是什么类型。

可以通过 as+类型 断言它就是某种类型的：


const res = 1;
const num = res as number;

也可以通过 <类型> 形式断言（不推荐）：


const res = 1;
const num = <number>res

7.接口基本使用

接口可以理解为一种规范，一种契约。可以约束一个对象里应该有哪些成员，这些成员都是怎么样的。

通过interface定义一个Post接口，这个接口是一个对象，规则为有一个name属性类型为string，age属性类型为number。


interface Post {
    name:string;
    age:number
}

然后比如有一个函数 printPost ，它的参数 post 使用我们定义的 Post 接口的规则，那么调用此函数传参时要传入符合 Post 接口规则的数据。


interface Post {
    name:string;
    age:number
}

function printPost(post: Post){
    console.log(post.name);
    console.log(post.age);
}
printPost({name:'asd',age:666})

当然，函数传参时可能有些参数是可选的，那么我们可以给接口也定义可选的成员，通过属性后加一个‘？'指定可选成员：


interface Post {
    name:string;
    age:number;
    sex?:string;
}

const auroras: Post = {
    name:'asd',
    age: 18
}

如果用readonly修饰成员，那么这个成员属性在初始化后便不可修改：


interface Post {
    name:string;
    age:number;
    sex?:string;
    readonly like:string 
}

const auroras: Post = {
    name:'asd',
    age: 18,
    like: 'natrue'
}
auroras.name = 'aaaa';
//保错
auroras.like = 'wind';

如果连成员属性名称都不确定，那么可以声明动态成员，要指定成员名字类型与成员值的类型，如：


interface Post {
  [prop:string]:string
} 
const auroras: Post = {
    name:'asd',
    like: 'natrue'
}

8.类基本使用

描述一类具体事物的抽象特征。ts增强了es6中class类的相关语法。

首先，类的属性使用前必须提前声明好：


class Person {
    name: string;
    age: number;
    constructor(name:string,age:number){
       this.name = name;
       this.age = age;
    }
    sayHi(msg:string):void {
        console.log(`hi,${msg},i am ${this.name}`);
    }
}

9.类的访问修饰符

private 修饰私有属性，只能在类内部访问。public 修饰公用属性（默认），

外部也可访问：


class Person {
  public  name: string;
  private  age: number;
  constructor(name:string,age:number){
       this.name = name;
       this.age = age;
    }
  sayHi(msg:string):void {
        console.log(`hi,${msg},i am ${this.name}`);
        console.log(this.age);
    }
}

const jack = new Person('jack',20);
//Person类公有属性可以访问
console.log(jack.name);
//Person类私有属性不可以访问
console.log(jack.age);
protected修饰为受保护的，外部也不可访问。但与 private 的区别是若是继承的子类是可以访问的。

class Person {
  public  name: string;
  private  age: number;
  // protected
  protected gender: boolean;
    constructor(name:string,age:number){
       this.name = name;
       this.age = age;
       this.gender = true;
    }
    sayHi(msg:string):void {
        console.log(`hi,${msg},i am ${this.name}`);
        console.log(this.age);
    }
}

class children extends Person{ 
    constructor(name:string,age:number){
        super(name,age,);
        //可以访问
        console.log(this.gender);
    }
}

10.类只读属性

给属性设置 readonly 则为只读属性，该属性初始化后便不可再修改。


class Person {
  public  name: string;
  private  age: number;
  // readonly
  protected readonly gender: boolean;
    constructor(name:string,age:number){
       this.name = name;
       this.age = age;
       this.gender = true;
    }
    sayHi(msg:string):void {
        console.log(`hi,${msg},i am ${this.name}`);
        console.log(this.age);
    }
}

11.类与接口

一些类与类之间有些许共同的特征，这些共同的特征可以抽象成为接口。

比如 Person 类和 Animal 类，虽然是不同类，但是人和动物都会吃东西和走路等，这些共同的特征可以由接口定义。最后一个特征就定义一个接口。


//吃接口
interface Eat {
    eat(food:string):void
}
//行进接口
interface Run {
    run(behavior:string):void
}
//人
class People implements Eat,Run {
    eat(food:string){
       console.log(`在餐桌上吃${food}`);
    }
    run(behavior:string){
       console.log(`站着${behavior}`);
    }
}
//动物
class Animal implements Eat,Run {
    eat(food:string){
       console.log(`在地上上吃${food}`);
    }
    run(behavior:string){
       console.log(`爬着${behavior}`);
    }
}

12.抽象类

约束子类必须有某些成员，有点类似接口，不同的是抽象类可以包含一些具体的实现。比如动物类应该为一个抽象类，它的子类有猫，狗，熊猫等。它们都是动物，也有一些共同的特征。定义一个类为抽象类后，就不能再new实例了，只能被其子类继承。

其中abstract 定义抽象类，类里用abstract定义一个抽象方法，子类必须实现抽象方法。


abstract class Animal  {
    eat(food:string){
       console.log(`在地上吃${food}`);
    }
    abstract run (behavior:string):void
}
//猫
class Dog extends Animal{
    run(behavior:string):void{
        console.log(behavior);
    }
}
const d1 = new Dog();
d1.eat('骨头')
d1.run('四脚爬行') 
//兔子
class rabbit extends Animal{
    run(behavior:string):void{
        console.log(behavior);
    }
}
const r1 = new rabbit();
d1.eat('萝卜')
d1.run('蹦蹦跳跳')

13.泛型

泛型就是在定义函数，接口或者类的时候没有指定具体类型，等到使用时才指定具体类型。极大程度的复用代码。

比如有一个 identity 函数，这个函数会返回任何传入它的值，且传入的类型与返回的类型应该是相同的。如果传入数字，不用泛型的话，

这个函数可能是下面这样：


 function identity(arg:number):number{
     return arg
 }
如果传入字符串，这个函数可能是下面这样：

 function identity(arg:string):string{
     return arg
 }
这样的话太麻烦，所以可以使用泛型，一般用大写 T 表示泛型，它可以适用于多个类型，且传入类型与返回类型是相同的。

 function identity<T>(arg:T):T{
     return arg
 }

到此这篇关于分享Typescript的14个基础语法的文章就介绍到这了,更多相关Typescript的14个基础语法内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 分享Typescript的13个基础语法

本文链接: https://lsjlt.com/news/159740.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 分享Typescript的13个基础语法
    目录一.Ts是什么 二. 基本语法 1.声明原始数据类型2.声明Object类型 2.1声明数组类型2.2声明元组类型3.声明枚举类型 4.函数参数与返回类型 5.任意类型 6.类型...
    99+
    2024-04-02
  • Typescript的基础语法有哪些
    这篇文章主要为大家展示了“Typescript的基础语法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Typescript的基础语法有哪些”这篇文章吧。一.Ts是什么首先，强类型不允许随意...
    99+
    2023-06-22
  • C语言学习基础知识分享
    目录写在前面为何学习C语言语言层面个人层面初识C语言什么是语言标准hellowordmainprintf数据类型byte & bitsizeof常量常量分类变量定义变量变量的...
    99+
    2023-01-28
    c语言入门自学零基础 c语言入门教程 c语言入门基础知识
  • C语言基础知识分享续篇
    目录写在前面数组数组使用函数字符串strlen && sizeofsizeofstrlen转义字符操作符选择语句if elseswitch循环语句forwhiledo...
    99+
    2023-01-28
    c语言入门自学零基础 c语言入门教程 c语言入门基础知识
  • shell基础语法的示例分析
    这篇文章将为大家详细讲解有关shell基础语法的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。不论前端还是后端，再学会Linux的基础上，还应该学会写一些简单的Shell。不止是工作，日常中想做一...
    99+
    2023-06-09
  • oracle基础语法的示例分析
    这篇文章主要介绍了oracle基础语法的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Oracle数据库的初步学习数据库的安装及其配置，使用默认选项进行安装即可ora...
    99+
    2023-06-15
  • TypeScript基本的语法有哪些
    本篇内容主要讲解“TypeScript基本的语法有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“TypeScript基本的语法有哪些”吧!前端那么多酷炫的东西，真是太好玩了。但是，JavaS...
    99+
    2023-06-16
  • python的基础语法
    python数据类型：（按特征划分） 数字类型：1. ×××：布尔形、长整型L、标准×××2. 非×××：双精度型、复数、decimal（不是内建类型） 序列类型：1. 字符串（str）2. 元组（tuple）3. 列表（list） 映像类...
    99+
    2023-01-31
    语法 基础 python
  • 13个简便高效的Python脚本分享
    目录1.使用 Python 进行速度测试2.在谷歌上搜索3.制作网络机器人4.获取歌曲歌词5.获取照片的Exif数据6.提取图像中的 OCR 文本7.将照片转换为Cartonize8...
    99+
    2023-01-06
    Python脚本分享 Python脚本
  • JavaScript基础之语法实例分析
    这篇文章主要介绍“JavaScript基础之语法实例分析”，在日常操作中，相信很多人在JavaScript基础之语法实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Ja...
    99+
    2024-04-02
  • Python技巧分享之groupby基础用法详解
    目录模拟数据groupby+单个字段+单个聚合groupby+单个字段+多个聚合方法1：使用groupby+merge方法2：使用groupby+agggroupby+多个字段+单个...
    99+
    2024-04-02
  • 2 Python的基础语法
    概述         在上一节的内容中，我们介绍了Python的诞生、发展历程、特色、缺点和应用领域。从本节开始，我们将正式学习Python。Python是一门简洁和优雅的语言，有自己特殊的一些语法规则。因此，在介绍Python编程的有关知...
    99+
    2023-08-30
    python 开发语言 基础语法 基本知识
  • Python的基础语法（一）
    0. 前言 最近正在重新整理Python的基础知识，以便更好地学习新知识。这一部分主要是讲述Python基础语法的演示。下面的语法都是基于Python3的语法。 1. 注释 注释：Python的注释方法有两种： 单行注释： # 你添加...
    99+
    2023-01-31
    语法 基础 Python
  • Python的基础语法（二）
    0. 前言 接着上一篇博客的内容，我将继续介绍Python相关的语法。部分篇章可能不只是简单的语法，但是对初学者很有帮助，也建议读懂。 1. 表达式 由数字、符号、括号、变量等组成的组合。 算术表达式 逻辑表达式 赋值表达式 在Pyth...
    99+
    2023-01-31
    语法 基础 Python
  • 分享13个好用到起飞的Python技巧
    目录前言列表1. 将两个列表合并到一个字典中2.将两个或多个列表合并为一个列表3. 对字典列表进行排序4. 对字符串列表进行排序5. 根据另一个列表对列表进行排序6. 将列表映射到字...
    99+
    2024-04-02
  • 让你更好使用Typescript的11个技巧分享
    目录将类型想象成集合理解类型声明和类型收窄使用带有区分的联合类型而不是可选字段使用类型谓词来避免类型断言控制联合类型的分布方式使用穷举式检查，在编译时捕捉未处理的情况优先选择 typ...
    99+
    2023-01-05
    Typescript使用技巧 Typescript技巧
  • PySpark数据分析基础：PySpark基础功能及DataFrame操作基础语法详解
    目录 前言 一、PySpark基础功能  1.Spark SQL 和DataFrame 2.Pandas API on Spark 3.Streaming 4.MLBase/MLlib 5.Spark Core 二、PySpark依赖 De...
    99+
    2023-09-21
    数据分析 python pandas spark 大数据
  • Python入门之基础语法的示例分析
    这篇文章将为大家详细讲解有关Python入门之基础语法的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。python有哪些常用库python常用的库：1.requesuts；2.scrapy；3.p...
    99+
    2023-06-15
  • 分享13个非常有用的Python代码片段
    目录1.将两个列表合并成一个字典2.将两个或多个列表合并为一个包含列表的列表3.对字典列表进行排序4.对字符串列表进行排序5.根据另一个列表对列表进行排序6.将列表映射到字典7.合并...
    99+
    2024-04-02
  • CSS基础语法的使用
    本篇内容介绍了“CSS基础语法的使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！行内样式：就是直接在HT...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作