TypeScript基础小知识

TypeScript安装

npm install -g typescript

TypeScript介绍

1.ts文件直接书写js语法代码，html文件可直接引用ts文件，谷歌浏览器
可直接使用
2.ts文件存在ts语法代码，需要编译ts文件->js文件，html引入js文件使用
3.ts文件函数形参，需要某个类型进行修改->js文件中无改修饰类型
4.ts文件let -> js文件var

类型注解

轻量级的为函数或者变量添加的约束
不确定类型使用unknown

基础类型定义

function add(a: number, b: number): number {
  return a + b
}
let num10:number = 10; //十进制
let num2:number = 0b10101; //二进制0b
let num8:number = 0o12; //八进制0o
let num16:number = 0xaa; //十六进制0x
let s: string = 'xxx'
let b: boolean = true
let as: number | string = '5' // 联合类型
let varAny: any // 任意类型，若声明未赋值，则判断为any
varAny = 10 // any类型的变量，可以赋值给任意变量
let u: unknown // 未知类型，不能赋值给其他变量
u = 'xzp'

类型断言

s = u as string
s = <string>u

函数返回值void/never

// void 无返回值(返回值，则报错，可return)
function fn(): void {
  // return
}
// never 无返回结果
function fu(): never {
  throw new Error('xxx')
}

对象定义

// object 对象 不建议使用
let objError: object
objError = {}
objError = function () { }
// {} 指定对象包含属性
// 属性名?，属性可选
let obj: { name: string, age?: number }
// [propName:string]:any 属性类型为string，属性值任意，可以多个
let c: { name: string, [propName: string]: any }
let c1: { name: string, [xxx: number]: any }
c = { name: 'xzp', age: 18, sex:'xy' }

函数定义

let func: (a: number, b: number) => number
func = function (a: number, b: number): number {
  return a + b
}
// 可选参数，默认参数
const getName = function (fName: string = 'x', lName: string): string {
  if (lName) {
    return fName + lName
  }
  return fName
}
// 剩余参数
function showName(str: string, ...args: string[]) {
  console.log(str)
  console.log(args)
}
// 函数重载
function add(x: number, y: number): number
function add(x: string, y: string): string
function add(x: number | string, y: number | string): number | string {
  // 参数可以为两个数字或两个字符串
  return x + y
}

数组定义

let arrS: string[]
arrS = ['a', 'b']
let arrN: Array<number>
arrN = [1, 2, 3]
// 元组，固定长度的数组
let arrL: [string, number]
arrL = ['xzp', 25]

枚举定义 enum

enum sex {
  male = 0,
  female = 1
}
let person: { name: string, sex: sex }
person = {
  name: 'xzp',
  sex: sex.male
}
console.log(person.sex === sex.male);

总结补充

let objA: { name: string } & { age: number }
objA = { name: 'xzp', age: 25 }
type xx = string | number | boolean
let snb: xx
snb = 'xx'
snb = 16
snb = true

tsconfig.json配置

{
  "include": [ // 包含的文件目录
    "./src/**/*"
  ],
  "exclude": [ // 排除的文件目录
    "./scr/public"
  ],
  // "extends": "./config/base" 定义被继承的配置文件
  "compilerOptions": {
    // 指定ts编译为ES的版本
    // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'esnext'
    "target": "es5",
    // 模块化
    "module": "amd",
    // "lib": ["ES6", "DOM"] 指定项目使用的库
    // 指定编译后文件所在目录
    "outDir": "./dist",
    // 代码合并为单个文件
    "outFile": "./dist/app.js",
    // 是否编译js文件
    "allowJs": true,
    // 是否检查js语法
    "checkJs": true,
    // 是否移除注释
    "removeComments": true,
    // 是否生成编译文件
    "noEmit": true,
    // 存在错误不生成编译文件
    "noEmitOnError": true,
    // 是否启用严格模式(可检查隐式的any)
    "alwaysStrict": false,
    // 不允许不明确的this
    "noImplicitThis": true,
    // 严格检查空值
    "strictNullChecks": true,
    // 所有的严格检查的开关，建议true
    "strict": true
  }
}

类定义class

public->公有的，任何位置都可以访问
private->私有的，外部无法访问，子类也无法访问
protected->受保护的，外部无法访问，子类可以访问
readonly->外部与类方法均无法修改name，仅构造函数可以修改
static->静态的，类名.静态属性 访问/设置，static不可以修饰构造函数

class Person {
  name: string
  constructor(name:string){
    this.name = name
  }
  // 只读属性
  readonly sex: string = 'male'
  // 定义类的静态属性static（可直接通过类读取：Person.age
  static age: number = 25
  // 定义方法
  eat() {
    console.log('eat pig！');
  }
}

类的继承

// abstract 抽象类，仅可作为父类
// 可添加抽象方法
abstract class Animal {
  name: string
  constructor(name: string) {
    this.name = name
  }
  // 定义抽象方法，子类必须重写
  abstract say(): void
}
// 类的继承，子类拥有父类所有的属性与方法
// 子类可以添加父类没有的方法与属性，也可以重写父类属性与方法
// super.xxx()调用父类的方法
// 子类构造函数需要调用super(props)
class Dog extends Animal {
  age: number
  constructor(name: string, age: number) {
    super(name)
    this.age = age
  }
  run() {
    console.log(`${this.name}冲冲冲`);
  }
  say() {
    console.log('汪汪汪');
  }
}

接口定义与使用

接口可作为声明类型使用
接口限制类的结构
接口定义对象属性与结构，不赋值

// 接口可作为声明类型使用
interface mdIf {
  name: string
}
interface mdIf {
  say(): void
}
// 重名interface内容会合并
const obj: mdIf = {
  name: 'xxx',
  say() {
    console.log('xxx');
  }
}
// 定义类
class myClass implements mdIf {
  name: string
  private _age: number
  constructor(name: string) {
    this.name = name
  }
  // 私有属性通过函数get属性访问，set属性修改
  get age(): number {
    return this._age
  }
  set age(val: number) {
    if (val > 0 && val <= 150) {
      this._age = val
    }
  }
  say() {
    console.log('xxx');
  }
}

泛型（定义函数、接口、类不确定数据类型）

function getArr<T>(value: T, count: number): T[] {
  const arr: T[] = []
  for (let i = 0; i < count; i++) {
    arr.push(value)
  }
  return arr;
}
// 调用
const arr = getArr<number>(10, 5)
const arrStr = getArr<string>('xzp', 5)
// 多个泛型
function getMsg<K, V>(value: K, value2: V): [K, V] {
  return [value, value2]
}
// 泛型接口
interface ITest<T> {
  data: Array<T>;
  add: (t: T) => T;
  getId: (id: T) => T;
}
// 泛型类
class Person<T, K>{
  age: K
  eat: (x: T, y: T) => T
}
const p: Person<string, number> = new Person<string, number>()
p.age = 100;
p.eat = function (x, y) {
  return x + y
}
p.eat('饭', '菜')
// 泛型约束
interface ILength {
  length: number;
}
function getLen<T extends ILength>(x: T): number {
  return x.length
}

声明文件

import jQuery from 'jquery'
// 定义操作,也可以放在文件jQuery.d.ts文件
declare var jQuery:(selector:string)=>any
// 使用jQuery
jQuery('#xxx')

内置对象ES

let b:Boolean = new Boolean(1)
let n:Number = new Number(true)
let s:String = new String('xxx')
let d:Date = new Date()
let r:RegExp = /\.css$/
let e:Error = new Error('error msg')
const div:HTMLElement = document.getElementById('xzp')
const divs:NodeList = document.getElementByClass('xzp')
document.addEventListener('click',(event:MouseEvent)=>{})