带你了解Typescript的14个基础语法
摘要:Typescript可以说是JavaScript的超集,在JS的基础上新增了许多语法特性,使得类型不再可以随意转换,能大大减少开发阶段的错误。
本文分享自华为云社区《Typescript基础语法全解析》,作者:北极光之夜。 。
一.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的14个基础语法的更多相关文章
- TypeScript进阶开发——ThreeJs基础实例,从入坑到入门
前言 我们前面使用的是自己编写的ts,以及自己手动引入的jquery,由于第三方库采用的是直接引入js,没有d.ts声明文件,开发起来很累,所以一般情况下我们使用npm引入第三方的库,本文记录使用np ...
- 一文带你看遍 JDK9~14 的重要新特性!
Java9 发布于 2017 年 9 月 21 日 .作为 Java8 之后 3 年半才发布的新版本,Java 9 带 来了很多重大的变化其中最重要的改动是 Java 平台模块系统的引入,其他还有诸如 ...
- TypeScript学习文档-基础篇(完结)
目录 TypeScript学习第一章:TypeScript初识 1.1 TypeScript学习初见 1.2 TypeScript介绍 1.3 JS .TS 和 ES之间的关系 1.4 TS的竞争者有 ...
- 在TypeScript中扩展JavaScript基础对象的功能
最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...
- 「kuangbin带你飞」专题十二 基础DP
layout: post title: 「kuangbin带你飞」专题十二 基础DP author: "luowentaoaa" catalog: true tags: mathj ...
- 066 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 带参有返回值方法
066 01 Android 零基础入门 01 Java基础语法 08 Java方法 04 带参有返回值方法 本文知识点:带参有返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...
- 065 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 带参无返回值方法
065 01 Android 零基础入门 01 Java基础语法 08 Java方法 03 带参无返回值方法 本文知识点:带参无返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...
- 064 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 无参带返回值方法
064 01 Android 零基础入门 01 Java基础语法 08 Java方法 02 无参带返回值方法 本文知识点:无参带返回值方法 说明:因为时间紧张,本人写博客过程中只是对知识点的关键步骤进 ...
- 052 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 14 Eclipse下程序调试——debug2 多断点调试程序
052 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 14 Eclipse下程序调试--debug2 多断点调试程序 本文知识点: Eclipse下程序调 ...
随机推荐
- 使用ShardingSphere-JDBC完成Mysql的分库分表和读写分离
1. 概述 老话说的好:选择比努力更重要,如果选错了道路,就很难成功. 言归正传,之前我们聊了使用 MyCat 实现Mysql的分库分表和读写分离,MyCat是服务端的代理,使用MyCat的好处显而易 ...
- 第四代富士X100F操作学习
前言 本文为自己通过B站的UP主[阿布垃机手册]整理.原视频地址:[阿布垃机手册][布瞎BB]富士 X100F 相机外部按键 拍人像自己的设置 [X100F相机光圈大小支持F2到F16+Auto]光圈 ...
- 如何知道当前使用的python的安装路径
电脑里多处安装了python,那么如何得知当前使用python的安装路径呢? 方法一 运行python指令: import sys print(sys.executable) 方法二 对于终端和Win ...
- [no code][scrum meeting] Beta 12
$( "#cnblogs_post_body" ).catalog() 例会时间:5月27日11:30,主持者:乔玺华 一.工作汇报 人员 昨日完成任务 明日要完成的任务 乔玺华 ...
- BUAA SE 软件案例分析-CSDN
Q A 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) 这个作业的要求在哪里 个人博客作业-软件案例分析 我在这个课程的目标是 系统地学习软件工程开发知识,掌握相关流程和技术,提升 ...
- Vue el 使用el-checkbox-group复选框进行单选框操作
el-checkbox-group这个组件与其他复选框不一样,我当初也是半天不知道怎么操作 页面使用v-model绑定 size就是等比例缩小放大,v-ror循环应该看的懂.重要的是@chage到我们 ...
- 认识spring security
在一个系统中认证和授权是常有的事情,现在比较流行的框架有spring security.shiro等等.他们都能很好的帮助我们完成认证和授权的功能.那么假如说让我们自己完成一个登录那么应该大致的流程是 ...
- OKR与影响地图,别再傻傻分不清
摘要:OKR和影响地图虽然都是为了一个目标去进行规划的方法,但是两者侧重的内容却不一致. 本文分享自华为云社区<一分钟读懂OKR与影响地图>,作者: 敏捷的小智. 什么是OKR及影响地图 ...
- dice_game攻防世界进阶区
dice_game XCTF 4th-QCTF-2018 前言,不得不说,虽然是个简单题但是还是要记录一下,来让自己记住这些东西. 考察的知识点是: 1.cdll_loadlibrary加载对应库使得 ...
- 多边形——————区间dp
原题链接:https://www.acwing.com/problem/content/285/ 题意简单来说就是:给你一个环,断掉一条边使其成为一个链,用这个链跑dp,求最大得分. 首先这不是一道板 ...