什么是typescript
typescript是微软开发的编程语言，它的后缀名是ts，通过编译可以将ts文件编译成ts文件，它定义了一些新语法使得开发起来可维护性更高也更好用，ts与js的区别如下图所示:
在进行angular开发时，开发者不需要引入ts依赖，angular已经导入了ts依赖。
快速上手ts
编译
tsc hello.ts
执行以上命令会在当前目录下编译一个相同文件名的js文件
- 安装
npm install -g typescript
- 初始化项目
tsc --init
执行以上命令则会在当前目录下创建一个文件名tsconfig.json的文件，该文件用于记录ts的环境和配置信息。
- 编辑tsconfig.json文件
"rootDir": "./src/",
"outDir": "./dist/",
第一条配置定义了ts源码所在目录，第二条配置定义了编译后输出的目录
- 编辑package.json
在script中添加
"scripts": {
"start": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"
}
- 编译
执行npm start命令后可以看到dist根据src/index.ts编译出js文件
数据类型
ts是强类型，编译器会根据类型对变量进行校验，类型与变量名是以','进行分割的，如下例子所示
let age : number;
方法定义也是一样:
function (id: number) => {
consoloe.log(id);
}
ts也可以根据变量值自动推断出变量的数据类型
let = 20;
- boolean: true false
- number: 所有数字的集合
- string: 字符串
- array: type[] = []
- enum: 类似其他编程语言的枚举，定义对象的集合
enum color {
READ = 't1',
GREEN = 't2',
BLUE = 't3'
}
console.log(color.READ)
object: 对象类型包括函数和数组。
Object: 所有类实例
null: 空类型
underdefine: 未定义
any: 任意类型,不规定变量的具体类型。
nerver: 函数无返回值时使用,例如死循环、抛异常之类的会使用到
function hello() : never {
console.log("hello world")
while(true) {}
}
hello()
元组: 类似数组，可以在队列中对应多个不同数据类型的元素，根据下标访问不同元素的值。
let tom : [number, string, number] = [10, "hello", 25]
console.log(tom)
console.log(tom[0])
类型转换
字符转数值
- Number()
let a : string = "10"
let b : number = Number(a)
console.log(b)
- parseInt()
let a : string = "10"
let b : number = parseInt(a)
console.log(b)
- parseFloat()
let a : string = "10"
let b : number = parseFloat(a)
console.log(b)
let a : string = "10"
let b : number = +a
console.log(b)
数字转字符串
- toString
let a : number = 10
console.log(a.toString())
- String()
let a : number = 10
console.log(String(a))
类型断言
typescript允许我们将新类型覆盖到变量中，类似强制类型转换，根据类型赋值到新的变量中
let a : any = "Hello world"
let b : number = (<string>a).length
let c : number = (a as string).length
console.log(b)
类型保护
in
使用in可以检查对象中是否包含指定元素,例如以下代码，判断person中是否保护name属性，很显然是包含的，返回true，然后判断person是否包含ckls属性，很显然不包含，返回false
interface Person {
name: string
age : number
}
const person : Person = {
name: "lyra",
age: 12
}
console.log('name' in person)
console.log('ckls' in person)
获取变量类型以及函数返回类型
typeof 可以获取函数 变量 常量返回值类型
let test : boolean = false
console.log(typeof test)
function a() : string {
console.log("hello world")
return "test"
}
console.log(typeof a())
instanceof
可以识别对象的类型，如果对象类型符合则返回true，不符合则返回false
判断person对象是否为String类型，肯定不是string类型，返回false
判断person对象是否为Object类型，所有类都继承object，那么符合 返回true
interface Person {
name: string
age : number
}
const person : Person = {
name: "lyra",
age: 12
}
console.log(person instanceof String)
console.log(person instanceof Object)
类型联合
有时希望变量是定义的多种数据类型中的一种，那么这种情况就可以使用联合类型，多种数据类型以|分割即可，如下所例：
let a : number | string;
a = "hello"
console.log(a)
a = 12
console.log(a)
类型别名
使用type关键字可以定义类型别名，如下所示，将String和number联合类型定义成了一个类型Messagge，使用时直接使用message即可
type Message = string | number
let great : Message
great = 20
console.log(great)
交叉类型
类似继承，可以将多个接口的特征集成到一个对象中，如下图所示，对象a既可以访问Test接口中的属性也可以访问Person接口中的属性。
interface Person {
name: string
age : number
}
interface Test {
company: string
}
let a : Person & Test = {
name: "test",
age : 12,
company: "123"
}
console.log(a)
箭头函数
使用箭头函数可以定义一个匿名函数，类型Java中的lambda表达式
let fun => (parm, parm) {
function body
}
let func => parm => function body
let a = ()=> {
console.log("hello world")
}
a()
let b = (parm:number) => {
console.log(parm)
}
b(12)
函数可选参数
使用?可以标识方法中的可选参数，如果不加则是必填，不填会报错，如下所示
let a = (pram : string, pram1 ?: number) => {
console.log(pram)
}
a("test")
默认值
可以在函数中直接定义变量的默认值，在调用函数是如果不填则会默认初始化为默认值
let a = (pram : string, pram1 : number = 20) => {
console.log(pram)
console.log(pram1)
}
a("hello")
数组
一般有两种定义方式:
- let arr: number[] = [];
- let arr: Array
= [];
以上两种顶峰方式都是基于知道数组中的元素的情况下定义的，如果不知道数据元素的情况定义如下:
let arr: Any[] = [];
如果想要数组内定义的元素有限可以使用元组来定义。
查找数组元素
可以重载arr.find方法和findIndex来根据条件对结果进行过滤或获取元素下标
let arr : Array<Number> = [1, 2, 3, 4]
let a = arr.find((value, index, array) => {
return value == 3;
})
console.log(a)
let b = arr.findIndex((value, index, array) => {
return value== 3;
})
console.log(b)
接口
和Java一样，在typescript中也是利用接口定义一系列抽象的集合，可以由接口中定义一些抽象的公用的成员变量以及方法，在创建对象时必须根据规范才能创建对象，如下所示:
interface IPerson {
name: string,
age: number,
sayHi(): void
}
let a : IPerson = {
name: "lyra",
age: 21,
sayHi(): void {
console.log(this.name)
}
}
a.sayHi()
首先新建了一个IPerson接口，接口中根据接口规范新建了一个a对象并实现了sayHi方法。
接口还允许多继承，一个接口可以继承别的多个接口，如下所示：
interface IPerson {
name: string,
age: number,
sayHi(): void
}
interface IKeep {
keap(): void
}
interface test extends IPerson, IKeep {
}
let a : test = {
name: "lyra",
age: 21,
sayHi(): void {
console.log(this.name)
},
keap(): void {
console.log("kepp")
}
}
a.sayHi()
类
类和接口类似，都是将东西抽象出来，之后在将对象new出来使用，和接口类似使用class关键字定义类，然后成员变量和方法是以private、public、protected修饰的，使用constructor定义构造方法，构造方法会在new对象前进行调用，可以用来对成员变量进行赋值。
class Person implements In {
private id: number
private name: string
constructor(id: number, name: string) {
this.id = id
this.name = name
}
test(): void {
console.log("")
}
public mondifly(age: number): void {
this.age = age
}
}
let p = new Person(1, "lyra")
p.mondifly(12)
使用readonly关键字定义常量，定义常量后不能被修改，如果修改会报错
class Person {
private id: number
private name: string
private readonly age: number
constructor(id: number, name: string) {
this.id = id
this.name = name
}
test(): void {
console.log("")
}
public mondifly(age: number): void {
this.age = age
}
}
let p = new Person(1, "lyra")
p.mondifly(12)
使用类实现接口方法也是可以的，类可以实现多个接口，但是类只能对单个类进行单继承
interface In {
test(): void
}
class Person implements In {
private id: number
private name: string
private readonly age: number
constructor(id: number, name: string) {
this.id = id
this.name = name
}
test(): void {
console.log("")
}
}
let p = new Person(1, "lyra")
p.mondifly(12)
使用get/set关键字作为存取器方法获取成员变量
interface In {
test(): void
}
class Person implements In {
private id: number
private name: string
constructor(id: number, name: string) {
this.id = id
this.name = name
}
test(): void {
console.log("")
}
get bar(): number {
return this.id;
}
set bar(id: number) {
this.id = id
}
}
let p = new Person(1, "lyra")
// 其实调用的是bar get方法
console.log(p.bar)
// 其实调用的是bar set方法
p.bar = 123
console.log(p.bar)
相等性判断
- 严格: ===
- 非严格: ==
平常应该统一使用===
模块
typescript与ES6一样，都有模块特性，可以将对象、方法类、接口进行导出以便其他模块使用。
可以使用export关键字进行导出
export interface Person {
printName(): void;
}
export let a: number = 20
export class PersonImpl implements Person {
private name: string = ""
printName(): void {
console.log("hello world")
}
}
export default function ac(){
console.log("test")
}
在进行导入时直接写模块路径和模块导入即可，wab可以是任何命名，wab就是export default ac()
import wab, {Person, PersonImpl} from "./test"
let p: PersonImpl = new PersonImpl()
p.printName()
wab()
可以使用as语句将导出的东西都封装成一个对象进行访问
import * as test from "./test"
let p: test.PersonImpl = new test.PersonImpl()
p.printName()
析构表达式
可以使用{}来讲根据对象的成员变量拆为指定多个变量
export class PersonImpl {
public name: string = "lyra"
public age: number = 20
public password: string = "123456"
}
let p = new PersonImpl()
let {name, age} = p
console.log(name)
console.log(age)
数组也可以析构解析
let a = [1, 2, 3, 4]
let [firest, last] = a
console.log(firest)
console.log(last)
映射类型
操作指定类型创建新类型
partial类型
将类型的成员变量变成非必须
type Person = {
name: string;
age: number;
}
let p: Person = {
name: "tes",
age: 16
}
type newPerson = Partial<Person>
let pn: newPerson = {
name: "21"
}
console.log("test")