首页 > 资讯 > 前端开发 > JavaScript >分享Typescript的13个基础语法

440

分享到

分享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://www.lsjlt.com/news/159740.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

分享Typescript的13个基础语法

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

99+

2022-11-12
Typescript的基础语法有哪些

这篇文章主要为大家展示了“Typescript的基础语法有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Typescript的基础语法有哪些”这篇文章吧。一.Ts是什么首先，强类型不允许随意...

99+

2023-06-22
shell基础语法的示例分析

这篇文章将为大家详细讲解有关shell基础语法的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。不论前端还是后端，再学会Linux的基础上，还应该学会写一些简单的Shell。不止是工作，日常中想做一...

99+

2023-06-09
oracle基础语法的示例分析

这篇文章主要介绍了oracle基础语法的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。Oracle数据库的初步学习数据库的安装及其配置，使用默认选项进行安装即可ora...

99+

2023-06-15
Python入门之基础语法的示例分析

这篇文章将为大家详细讲解有关Python入门之基础语法的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。python有哪些常用库python常用的库：1.requesuts；2.scrapy；3.p...

99+

2023-06-15
ES6基础语法之数组的使用实例分析

这篇文章主要介绍了ES6基础语法之数组的使用实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇ES6基础语法之数组的使用实例分析文章都会有所收获，下面我们一起来看看吧。一、Array.of()将参数中所有值...

99+

2023-06-30
基于R语言中的各种更新方法分享

宏包的更新卸载package remove.packages("mypackage") 查看的version R.version 或者 getRversion() ...

99+

2022-11-12
基于Shell中for循环的几个常用写法分享

第一类：数字性循环 for1-1.sh #!/bin/bash for((i=1;i<=10;i++)); do echo $(expr $i \* 3 + 1); done for1-2.s...

99+

2022-06-04

Shell for循环