TypeScript入门

Posted on 2022-09-26 Edited on 2023-07-31

title: TypeScript 入门 date: 2019-10-03 16:00:08

tags:

简介

TypeScript 具有类型系统，且是 JavaScript 的超集。它可以编译成普通的 JavaScript 代码。 TypeScript 支持任意浏览器，任意环境，任意系统并且是开源的。

安装

npm install -g typescript
//查看版本号
tsc -v
//查看安装目录
npm bin -g

//代码编译
tsc helloworld.ts
//会出现一个helloworld.js

编译

输出文件夹

1 2	//将文件编译到dist文件夹下 tsc --outDir dist helloworld.ts

tsconfig.json

//使用代码初始化,生成tsconfig.json
tsc --init

//修改文件内属性
//设置输出文件夹dist
"outDir": "./dist"
//设置源代码文件夹
"rootDir": "./src"

动态监视

发现代码变动,自动编译

tsc - w;

变量使用

变量使用前要定义
变量类型
any 类型

变量使用前要定义

let/var 变量名:变量类型 = 默认值

变量类型

number,string,boolean,symbol,any,object

1
2
3

let name: string = "Tom";
console.log("My name is" + name);
name = 100; //编译错误,类型不匹配

any 类型

//any类型让编译器忽略检测
let name: any = "Tom";
console.log("My name is" + name);
name = 100;
console.log("My name is" + name);

常量保存

常量定义方法

//常量的定义语法
const name: type = initial_value;

//数据库连接串
const dbstr: string = "ip=192.168.2.1;port=5433;uid=ayin;pwd=123123;";
console.log(dbstr);

//数组常量
const DATA: number[] = [100, 200, 300];
console.log(DATA);

// DATA = [10,20,30]; //编译错误

//数组地址并未改变,值可以改变
//正常赋值
DATA[0] = 10;
DATA[1] = 20;
DATA[2] = 30;
console.log(DATA); //[10,20,30]

//数组元素增加
DATA[3] = 40;

数组的使用

定义方法

let name:type[] = initial

//定义数组
let data: string[] = ["金", "木", "水", "火"];
console.log(data); //['金','木','水','火']
console.log(data[0]); //金

//追加赋值
data[4] = "土";

//越界赋值
data[10] = "风";

多维数组的定义

let name:type[][] = [[],[],[],...]

//定义三行五列的数组
let data: number[][] = [
  [1, 2, 3, 4, 5],
  [10, 20, 30, 40, 50],
  [100, 200, 300, 400, 500],
];

//打印第一行数组
console.log(data[0]); // [1,2,3,4,5]

//打印第一行第一个元素
console.log(data[0][0]); // 1

枚举类型

定义方法

enum name = {name1, name2, name3, ...}

注意定义的是常量,后期不会变化.

//使用枚举
enum Sex {
    MALE,
    FEMALE,
    UNKNOWN
}

let member_sex: Sex = Sex.FEMALE //默认为FEMALE
console.log(member_sex) //输出1
console.log(Sex[member_sex]) //输出FEMALE

//判断中枚举需要在传入对象前加字符+
switch (+member_sex){
    case Sex.MALE:
        console.log("男")
        break
    case Sex.FEMALE:
        console.log("女")
        break
    case Sex.UNKNOWN:
        console.log("未知")
        break
}

//或者将判断套入函数中
function checkSex(sex: Sex){
    let result:string = ''
    switch (sex){
    case Sex.MALE:
        console.log("男")
        break
    case Sex.FEMALE:
        console.log("女")
        break
    case Sex.UNKNOWN:
        console.log("未知")
        break
}
    return result
}

联合类型

指包含多种类型的变量类型,在实际项目中不常用.

//联合类型的定义
let data: type1 | type2 | type3 | ...

//联合类型的使用
let mydata: string | boolean

mydata = "hello TS"
console.log(mydata) //hello TS

mydata = true
console.log(mydata) //true,没有报错

null 空检查

空检查用于代码编译时对程序中的变量做 null 空值检查,避免业务级别的错误.

let data1: string = undefined
let data2: string = null
let data3: string = ""
data3 = null

//在tsconfig.json中开启
"strickNullChecks": false

//输入tsc进行检查

第三方库的使用

node-request 库

import request = require('request')

request('http://api.komavideo.com/news/list', function(error, response, body){
    if(error){
        console.error(error)
    }else{
        console.log(body)
        var body = JSON.parse(body)
        for(var i = 0; i < body.length; i++){
            var item = body[i]
            console.log(item.title)
        }
    }
})
//直接使用是会报错的

需要添加 tsd 文件

如何找 tsd 文件

网站: http://microsoft.github.io/TypeSearch

直接搜索

导入 tsd 文件

1	npm install --save @types/request

函数的使用

//格式
function fname(param1:type, param2:type,...) : return_type {
    //函数内容
}

范例

function add(x: number, y: number): number {
  return x + y;
}
console.log(add(10, 5));

//利用变量
let func_add = add;
console.log(func_add(1, 2));

箭头函数

范例

add(x:number, y:number) : number => {
    return x + y
}
console.log(add(10, 5))

可省略参数

定义符号: ?

sayHello(name?: string): string => {
    if(name == undefined) {
        return "Hello ayin"
    }else{
        return "Hello " + name
    }
}
console.log(sayHello("Tom")) //Hello Tom
console.log(sayHello()) //Hello ayin

//默认值形式
sayHello(name: string = "ayin"): string => {
    return "Hello " + name

扩展运算符

定义符号: ...

add(...vals: number[]): number => {
    let result = 0
    for(let val of vals){
        result += val
    }
    return result
}
console.log(add(1,2,3)) //6

类的定义

类似于 ES6

class Person {
  name: sting;
  sex: number; //0:女,1:男

  constructor(name: string, sex: number) {
    this.name = name;
    this.sex = sex;
  }

  sayHello() {
    console.log(`${this.name},你好${this.sex}`);
  }
}

let qq = new Person("花藤", 1);
qq.sayHello();

console.log(qq.name);
console.log(qq.sex);

类的访问限制

类的访问修饰符

public: 共有访问
protected: 本类和子类访问
private: 本类访问

class Datebase{
    dbname: string

    constructor(bdname: string){
        this.dbname = name
    }
}

//外部调用
public showDB(){
    console.log(`数据库:${this.dbname}`)
}

//本类和子类调用
protected connect(){
    console.log(`${this.name}`,"连接中...")
}

//本类调用
private disconnect(){
    console.log(`${this.name}`,"关闭")
}

let oracle = new Database("甲骨文")
oracle.showDB()
//oracle.connect()
//oracle.disconnect()

class PostgreSql extends Database{
    public doIt(){
        super.connect()
        //super.disconnect()
    }
}

let postgres = new PostregSql("小象")
postgres.showDB()
postgres.doIt()

getter 和 setter

书接上回,由于private属于私有,无法直接访问.可以使用 get 进行访问.

class Datebase{
    private dbname: string

    constructor(bdname: string){
        this.dbname = name
    }

    get name(): string {
        return this.dbname
    }

    set name(val: string){
        this.dbname = val
    }
}

//通过name属性访问到
let db = new Database('oracle is good')
console.log(db.name)

//修改name属性
db.name = "mysql is better'
console.log(db.name)