学习 typescript 基础语法

typescript

• 安装 npm install -g typescript

编译

• tsc 文件名

TypeScript 的原始数据类型

• string，number ，Boolean ，null，undefined，enum ,symbol

• null,undefined 是其它类型的子类型，其它类型可以赋值为这两个类型

• void 无返回值的意思

任意值 any 可以赋值为任意类型

• 不给变量指定类型，就会被认为是任意类型，跟原生 js 一样

当给一个变量赋初始值的时候，它会根据你的值判断你的类型

• 没有赋值就是任意类型，赋值会类型推导

联合类型

var b:string | number = 1

• 只能访问此联合类型的 共有方法

对象类型

interface Istate {
name: string
}

• 只能强约束对象的属性值和属性个数

如果其中一个类型 可有可无 ?

interface Istate {
name: string, // 也可以 string | number
age?: number
}

属性个数不确定

interface Istate {
name: string,
[propName: string]: any
}

• any 是必须的

只读属性

interface Istate2 {
name: string,
readonly age: number
}

var obj2:Istate2 = { name: '11', age: 1 }
obj2 = { name: '1243', age: 23 }
obj2.age = 1 // 错误

数组

• 类型加 [] 表示法
  var ary:number []= [1,2,3]
  var ary2:any [] = [1,2,'3']

• 数组泛型 Array<数组类型>
  var aryType:Array = [1,2,3]

• 接口表示法 可以和对象类型 混用

interface IArr {
[index: number]: Istate2
}
var interAry:IArr = [{ name: 'hhh', age: 1 }]

var arrType2: Array = [{ name: 'hhh', age: 1 }]
var arrType3:Istate2 [] = [{ name: 'hhh', age: 1 }]

函数类型

function fun1(name: string, age:number) {
return age
}

fun1('123',123)
const ages:number = fun1('dsf', 123)

• 可有可无
  function fun2(name: string, age:number, sex?:string) {
  return age
  }

• 默认值
  function fun3(name: string = 'type', age:number, sex?:string) {
  return age
  }

表达式的方式

var funa = function(name:string, age:number = 20):number { // number 返回类型
return age
}

• 变量的类型 约束 + 返回值的类型
  var funa2:(name: string, age: number) => number = function(name: string, age: number) {
  return age
  }

• interface 的方式
  interface funType3 {
  (name: string, age: number): number
  }

var funa3:funType3 = function(name: string, age: number):number {
return age
}

• 重载的方式 定义输入类型和返回类型相同 ，输入是什么类型，返回值是什么类型
  // 输入是 number，输出也是 number
  function getValue(value: number):number;
  function getValue(value: string):string;
  function getValue(value:string|number):number|string {
  return value
  }
  var res1:number = getValue(1)
  var res2:string = getValue('2')

类型断言

• 因为只能返回两个参数共有方法，如果不想用共同方法，可以使用类型断言
  function getAssert(name: string | number) {
  // return (name).length
  或
  return (name as string).length
  }
• 但在 tsx 中只能是使用 return (name as string).length <> 会导致 tsx 解析错误

ts 中声明文件 ，引入第三方包

• 例如使用 jQuery
  • 声明 declare var $:(selector:string)=> any
  • 引入 ///
    declare var $:(selector:string)=> any

js 类型别名 type

type str = string
var str5:str = "1"

type muchType = string | number | boolean
var str6 = false

• 接口类型
  interface muchType2 {
  name: string,
  str: number
  }

interface muchType3 {
name: string,
age: number
}

type muchType4 = muchType2 | muchType3

• 限定字符串
  // 限定字符串
  type myStr = '我' | '你'

function getSelf(self: myStr) {

}

getSelf('我')

枚举类型

• 枚举
  enum nums {
  'one',
  'two',
  'three',
  'four',
  'five'
  }

nums[1] == 'two' // true
mums.two

类 class

class Person {
private name = 'hello'
age = 20
protected sex = '女'
speak() {
console.log('我是' + this.name + '我多大了?' + this.age)
}
}

var p = new Person()
p.speak()

console.log(p.name) // ❌
console.log(p.age)
console.log(p.sex) // ❌

• public 是共有属性，都可以访问
• private 是私有属性，只有内部可以调用
• protected 受保护的属性，允许子类访问

class Child extends Person {

callPerent() {
console.log(super.age)
console.log(super.sex)
}
}

泛型

function resArray(length: number, value:T):Array {
let ary = []
for (let i = 0; i < length; i++) {
ary[i] = value
}
return ary
}

resArray(3, '1') // 如果不定义类型，就会自动类型推导
resArray(1, '1') // 可以传递类型
var arrVal: string [] = resArray(2, '1')

• interface 使用泛型

interface FXFun {
(name:string, value: T): Array
}

var func5: FXFun

func5 = function(name: string, value: T): T [] {
return []
}