浅谈typescript及语法(代码片段)

北极光之夜。 北极光之夜。     2022-10-22     587

关键词:

目录(快速定位):

一.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

3.1声明数组类型:

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

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

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

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

3.2声明元组类型:

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

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

4.声明枚举类型:

通过关键字enum声明一个枚举类型,如:

enum Status 
    pedding = 1,
    resolve = 2,
    reject = '3'

//访问
console.log(Status.pedding);

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

5.函数参数与返回类型:

函数声明式:

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

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

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'

定义接口时再详细说。

6.任意类型:

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

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

7.类型断言:

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

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

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

也可以通过 <类型> 形式断言(不推荐):

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

8.接口基本使用:

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

通过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'

9.类基本使用:

描述一类具体事物的抽象特征。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`);
    

10.类的访问修饰符:

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);
    

11.类只读属性:

给属性设置 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);
    

12.类与接口:

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

比如 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`);
    

13.抽象类:

 约束子类必须有某些成员,有点类似接口,不同的是抽象类可以包含一些具体的实现。比如动物类应该为一个抽象类,它的子类有猫,狗,熊猫等。它们都是动物,也有一些共同的特征。定义一个类为抽象类后,就不能再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('蹦蹦跳跳') 

14.泛型:

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

比如有一个 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基本语法的全部内容啦。~

下次见啦~

我的哔哩哔哩空间
Gitee仓库地址:全部特效源码
Q群聊(欢迎):629596039
其它文章:
~关注我看更多简单创意特效:
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结(一)
Sass总结笔记
…等等
进我主页看更多~

初始typescript及vscode环境配置(代码片段)

什么是typescript?为什么要用它?typescript简称ts,是js语法的一个超级,由微软团队维护的 js特点(不足) 弱类型:js中的数据变量没有确定的类型,可以存储对象,可以存储数字,可以存储字符串等等 动态的:我定... 查看详情

浅谈kotlin:基本类型基本语法代码风格

浅谈Kotlin(一):简介及AndroidStudio中配置 通过上面的文章,在AndroidStudio中我们已经可以进行Kotlin编程了,接下来开始学习Kotlin的基本类型及语法。 一、基本类型  在Kotlin中,所有变量的成员方法和属性都是一个对象... 查看详情

typescript模板语法:双向绑定(代码片段)

查看详情

typescript语法基础(代码片段)

TypeScript语法基础1TypeScript是什么2获取TypeScript3变量声明4数据类型5Map对象6TypeScript元组7TypeScript联合类型8循环结构1TypeScript是什么TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这... 查看详情

typescript系列教程03基础语法(代码片段)

目录TypeScript基础语法空白和换行TypeScript区分大小写分号是可选的TypeScript注释TypeScript支持两种类型的注释TypeScript与面向对象TypeScript基础语法TypeScript程序由以下几个部分组成:模块函数变量语句和表达式注释 然后我们新建... 查看详情

typescript(03):基础语法(代码片段)

TypeScript程序由以下几个部分组成:模块函数变量语句和表达式注释第一个TypeScript程序我们可以使用以下TypeScript程序来输出"HelloWorld":consthello:string="HelloWorld!"console.log(hello)尝试一下?以上代码首先通过tsc命令编译:tscTest.ts得到如... 查看详情

typescript打字稿备忘单-语法功能和示例(代码片段)

查看详情

浅谈androidoom及定位分析(代码片段)

OOM的原因要定位OOM问题,首先需要弄明白Android中有哪些原因会导致OOM,Android中导致OOM的原因主要可以划分为以下几个类型:Android虚拟机最终抛出OutOfMemoryError的代码位于/art/runtime/thread.cc。voidThread::ThrowOutOfMemoryError(con... 查看详情

浅谈androidoom及定位分析(代码片段)

OOM的原因要定位OOM问题,首先需要弄明白Android中有哪些原因会导致OOM,Android中导致OOM的原因主要可以划分为以下几个类型:Android虚拟机最终抛出OutOfMemoryError的代码位于/art/runtime/thread.cc。voidThread::ThrowOutOfMemoryError(con... 查看详情

typescript语法学习(代码片段)

1.TypeScript简介TS是以JavaScript为基础构建的语言,是一个JavaScript的超集TS扩展了JavaScript,并添加了类型TS可以在任何支持JavaScript的平台中执行注意:TS不能被JS解析器直接执行。需要将TS编写的代码编译成为JS代码,... 查看详情

typescript语法学习(代码片段)

1.TypeScript简介TS是以JavaScript为基础构建的语言,是一个JavaScript的超集TS扩展了JavaScript,并添加了类型TS可以在任何支持JavaScript的平台中执行注意:TS不能被JS解析器直接执行。需要将TS编写的代码编译成为JS代码,... 查看详情

浅谈springboot底层日志文件依赖关系及日志使用(代码片段)

浅谈SpringBoot底层日志文件依赖关系及日志使用1、常见的日志框架2、日志抽象和日志实现3、如何在系统中使用slf4j?([slf4j官方用户指导手册](http://www.slf4j.org/manual.html))4、slf4j与常用日志实现类的整合框架图5、Bridgi... 查看详情

typescript开发1.概述及基本使用(代码片段)

参考: https://www.runoob.com/typescript/ts-install.html1.npminstall-gtypescript2. 在命令行上,运行TypeScript编译器functiongreeter(person:string)return"Hello,"+person;letuser="JaneUser";document.body.in 查看详情

浅谈jvm及原理(代码片段)

1、什么是JVM?JVM,中文名是Java虚拟机,正如它的名字,是一个虚拟机器,来模拟通用的物理机。JVM是一个标准,一套规范, 规定了.class文件在其内部运行的相关标准和规范。及其相关的内部构成。比如... 查看详情

typescript语法基础讲解(代码片段)

文章目录前言讲解如何来定义类如何来使用类只读属性示例:如何使用属性存取器静态属性示例:this的指向示例:什么是继承?继承的特点示例:重写什么是抽象类(abstractclass)总结前言今天我们一... 查看详情

三个小时vue3.x从零到实战(typescript的搭建使用及资料)(代码片段)

目录:三个小时vue3.x从零到实战(前)(vue3.x基础)三个小时vue3.x从零到实战(中)(vue3.x高级语法)三个小时vue3.x从零到实战(后)(vue3.x配套工具及项目化构建)三个小时vue3... 查看详情

浅谈强化学习的方法及学习路线(代码片段)

介绍目前,对于全球科学家而言,“如何去学习一种新技能”成为了一个最基本的研究问题。为什么要解决这个问题的初衷是显而易见的,如果我们理解了这个问题,那么我们可以使人类做一些我们以前可能没有想到的事... 查看详情

typescript基本语法(代码片段)

TypeScript是JavaScript的一个超集,为JavaScript添加了类型、接口、泛型、类、模块等新的特性。以下是TypeScript一些基本语法:变量声明在TypeScript中使用let、const、var关键字来声明变量,使用冒号+类型来指定变量的类型,例如:letcoun... 查看详情