Type-Script使用详解

typescript 用法详解

javascript 的痛点

弱类型

变量的数据类型不是固定的，我们可以给一个变量赋值多种不同类型的值。
这样可能代码编写时会更加简单，但当项目变大时，可能会给项目带来一定的隐患，也不便于多人合作

function add (a, b) {return a + b
}
add(100, 200) // 300
add('a', 100) // 'a100'  这改变了我们函数定义的初衷

强类型

声明变量时，一旦给变量赋值了，那么变量的数据类型就已经确定了，不可在赋值其他类型的值。如果要赋值其他类型的值，必须要先进行强制数据类型转换

动态类型

动态类型的语言在类型检查时，会在代码运行时检查。这就导致了当我们代码存在错误时，需要代码运行后，才能知道。

var obj = {name: '张三'
}
console.log(obj.age)

这段代码会报错，因为obj并没有age属性。但只有在代码运行时才会报错。这时，我们可能需要一些约束来让我们更早的发现问题

静态类型

静态类型在类型检查时，是在代码编译阶段进行的。能够更早的发现问题

什么是typescript

typescript是微软推出的javascript的超集，也就是说它支持任何javascript语言，是javascript的一个升级版，给javascript加上了一定的约束性
typescript 为 javascript提供了类型系统和es6支持(不过现在大多数浏览器也都已经支持es6了)
typescript 代码的运行最终都要转化为javascript 运行。此时我们就需要用到 typescript 的工具tsc，用于转换ts–>js

tsc的使用

npm i typescript -g // 安装typescript

通过指令 tsc index.ts 可以将ts转换为js运行，他会在特定的地方生成转换出来的js文件

ts配置文件

通过tsconfig.json可以进行一定规则配置。从而让ts文件可以按照一定的规则转换成js文件

创建配置文件
通过 tsc --init 可以在当前目录下生成tsconfig.json文件

tsc --init

tsconfig 常用配置

target：将ts转换为哪个版本的javascript 如：es5, es3
module: 将ts转换成使用哪种模块化标准的javascript 如：commonJs，amd
outDir: 将ts转换成的js文件放置在哪个路径下如：./dist 默认是./
rootDir: 将哪个路径下的ts代码进行转换如：./src 默认是./
strict: 转换成的js是否启用严格模式 true or false

使用配置文件

tsc -p ./tsconfig.json

typescript特性

typescript通过在数据定义时，加上类型，来给变量添加一定的约束，变量的类型一旦设定，将不可在给变量设置其他类型的数据，否则编译时就会报错

let num: number = 10 // 给num定义了number类型，后续只能赋值number类型的数据
num = 'abc' // 编译时会报错

typescript各种数据类型的定义

number类型

// number类型  大小写都行  可接收十进制，二进制，八进制和十六进制数
let a: number = 10
let b: number = 0b1010 // 二进制 0b开头
let c: number = 0x1E0F3 // 十六进制 0x开头
let d: number = 0o12 // 八进制 0o开头
let e: number = NaN
let f: number = Infinity

string类型

// string类型
let str1: string = "双引号"
let str2: string = '单引号'
let str3: string = `模板字符串`

boolean类型

let flag1: boolean = true
let flag2: boolean = false

数组类型

两种方式
// Array<数组成员的数据类型>
let arr1: Array<number> = [1,2,3,4,5] // 代表arr1只能赋值数组给它，并且数组的成员都必须是number类型// 数组成员的数据类型[]
let arr2: number[] = [1,2,3,4,5] // 效果和上面一模一样

元组
元组类型表示一个已知元素数量和类型的数组，数组内各个成员的类型不必相同

// 表示该arr只能接收一个长度是2 且第一个成员类型必须是number, 第二个成员类型必须是string的数组
let arr: [number, string] = [10, 'abc']
arr[0] = '123' // 会报错  只能赋值number类型
arr[1] = null // 会报错   只能赋值string类型

void类型
void类型表示没有任何类型，void类型的数据只能给他赋值undefined ，因此用处不大。
不过，因为他只能赋值undefined, 而一个函数当没有返回值时会默认返回undefine，故void可以用来定义没有返回值的函数

let reg: void = undefined
reg = 123 // 会报错let function aaa(): void {}

undefined类型
undefined类型只能赋一个值 undefined

let un: undefined = undefined
un = 123 // 会报错

null类型
null类型只能赋一个值 null

let nu: null = null
nu = 123 // 会报错

never类型
never 类型一般用来表示一个函数，但只能表示一些永远无法到达终点的函数

// never类型的函数必须存在一个无法到达的终点
function aaa (): never {throw new Error('抛出一个错误')
}
// never类型的函数必须存在一个无法到达的终点
function bbb (): never {while(true) {}
}

typeScript中的类
类属性定义

ts中的类和es6 有一点不同的是，ts中的类中的属性，必须在类中定义，并指定类型

正确的做法

class Person {name: string // 如果在constructor中给他赋值了（也就是初始化了）,那么定义时可以不赋值age: number = 18 // age没在constructor中初始化，故定义时，需要赋值，否则编译时会报错constructor (name: string, age: number) {this.name = name}
}

还有种定义方式是直接在传参时加个访问修饰符如:

class Person {// 相当于定义了，并给他赋值了 this.name = name   this.age = ageconstructor (public name: string, public age: number) {console.log(this.name) // 此时可以直接调用，因为已经定义了console.log(this.age) // 此时可以直接调用，因为已经定义了}
}

等价于下面

class Person {name: stringage: numberconstructor (name: string, age: number) {this.name = namethis.age = age}
}

类继承
ts中的类继承和es6中差不多，无非多了个类型限制也会被继承。我就不多说了，直接看代码

class Person {name: stringage: numberconstructor (name: string, age: number) {this.name = namethis.age = age}say (): void {console.log('你好啊,南昌老表')}
}class NanChang extends Person {} // 通过extens实现继承，和es6一样let chenMing = new NanChang('陈明', 18) // 类型限制也被继承了，因此，第一个参数必须传string, 第二个必须传 number
chenMing.say()
// 输出
你好啊,南昌老表

接口继承

interface inter1 {name: string,age: number
}interface inter2 extends inter1 {address: string
} // 此时inter2 就是一个具备了3个属性的接口了
// obj继承inter2 就必须有以上3个属性才行
let obj: inter2 = {name: '陈明',age: 18,address: '南昌'
}

接口继承接口也可以同时继承多个继承多个时，以逗号分隔如：

interface inter1 {name: string,age: number
}
interface inter2 {address: string
}
interface inter3 extends inter1, inter2{like: string
} // 此时inter3同时继承了inter1和inter2  就是一个具备了4个属性的接口了
// obj继承inter3 就必须有以上4个属性才行
let obj: inter2 = {name: '陈明',age: 18,address: '南昌',like: '看美女'
}

接口继承类
顾名思义，接口同样可以继承一个类。当继承某个类时，就会继承这个类中所有的属性和方法。如：

class Person {name: stringage: numberconstructor(name: string, age: number) {this.name = namethis.age = age}say (str: string) {console.log(str)}
}// 此时，peo接口继承了Person类，那么就继承了他的所有属性和方法（包括属性和方法的类型）
interface peo extends Person{like: string
}let people: peo = {name: '陈明',age: 18,like: '看美女',say: function (str) {}
}

接口合并

我们知道，当我们声明同名的变量时，后面的会覆盖前面的。但是对于接口而已，不会覆盖，而会叠加

interface aaa {name: string
}
interface aaa {age: number
}
// 以上两句话相当于下面一句话
// interface aaa {//  name: string,
//  age: number
//}let bbb: aaa = {name: 'chenMing',age: 18
}

常见内置对象
typescript中有很多全局内置对象，不需要任何引入便可直接用的。
这里列出一些常用的
Date
Error
RegExp
HTMLElement
NodeList

Type-Script使用详解相关推荐

USB Type C规范详解
USB Type C规范详解目前USB Type C接口应用非常广泛,可以传输DP,USB,PCIE,音频等信号,已经不是纯粹的用来传输USB信号了,即USB Type C摆脱了和USB的从属关系, ...
Echarts之甘特图type: ‘custom‘参数详解
甘特图 const groupData = XEUtils.groupBy(data, "eqpName"); //分组后的数据 const yAxisData = Object. ...
强大的Linux终端行为记录和回放工具：script命令详解
文章目录简单介绍使用方法详解常规使用参数详解使用场景总结作家Philip G. Ezolt在其作品<<Optimizing Linux Performance: A Hand ...
Linux Kernel系列三：Kernel编译和链接中的linker script语法详解
先要讲讲这个问题是怎么来的.(咱们在分析一个技术的时候,先要考虑它是想解决什么问题,或者学习新知识的时候,要清楚这个知识的目的是什么). 我在编译内核的时候,发现arch/arm/kernel目录下有 ...
Java0x800000000什么意思_Linux Kernel编译和链接中的linker script语法详解
先要讲讲这个问题是怎么来的.(咱们在分析一个技术的时候,先要考虑它是想解决什么问题,或者学习新知识的时候,要清楚这个知识的目的是什么). 我在编译内核的时候,发现arch/arm/kernel目录下有 ...
Java script事件详解
10事件 10.1事件的概念事件源: 事件名: 事件注册: 事件处理: 以火灾为例: 粤商大酒店201房间发生火灾,119电话报警,南湖区消防支队出警,赶赴现场通过喷水作业成功灭火. 事件源:粤商大 ...
oracle 方言报错,ORACLE11g：No Dialect mapping for JDBC type: -9解决方案详解
解决方案由于hibernate4.2.0和Oracle10g数据库结合使用自定义方言时,需要和老版本做区别,原来的Oracle10gDialect中没有注册NVARCHAR和NCLOB数据类型, 此 ...
Python中type（）详解：动态创建类
众所周知:type()函数可以查看变量的类型: 先看一个简单的列子来看一下type查看变量类型 class Animal():passa=Animal() print(type(a)) print(t ...
Elasticsearch script使用详解
文章目录概述 script 格式使用script_score处理_score 使用script_fields处理返回的字段值使用script作为过滤条件使用script进行聚合统计概述 sc ...
delstr函数python_python3全栈开发-内置函数补充，反射，元类，__str__,__del__,exec,type,__call__方法详解...
一.内置函数补充 1.isinstance(obj,cls)检查是否obj是否是类 cls 的对象 classFoo(object):passobj=Foo()print(isinstance(obj ...

Type-Script使用详解

typescript 用法详解

Type-Script使用详解相关推荐

最新文章

热门文章