TypeScript

277 阅读2分钟

TS的优势

VSCode的部分设置

  1. code ->Preferences(首选项) -> Settings(设置)
  2. 搜索quote 设置 typescript.preferences.quoteStyle: single
  3. 搜索save 设置 formatOnSave: true

安装插件

Prettier

安装typescript

npm install typescript@3.6.4 -g

安装ts-node

npm install ts-node@8.4.1 -g

ts-node demo.ts

静态类型

不仅意味着变量的类型不能修改,基本也以为着变量上的方法和属性也不能修改该了。

类型注解(type annotation)

我们来告诉TS需要什么类型

let count : number
count = 123

类型推断 (type inference)

TS会自动去尝试分析变量的类型

let countInference = 123

基础类型

boolean number string void undefined symbol null

const count: number = 123
const count1 :number
count1 = 1
const tName: string = 'luoyi'

对象类型

{} class [] function

对象

const teacher: {
  name: string,
  age: number
} = {
  name: 'luoyi',
  age: 12
}

类:class

class Person { }
const dell: Person = new Person()

数组类型

const numbers: number[] = [1, 2, 3]
// 数组的每个值都是number类型
const numberArr: (number | string)[] = [1, 2, 3, 4]
const stringArr: string[] = ['a', 'b', 'c']
const undefinedArr: undefined[] = []
const objArr: { name: string }[] = [{ name: 'luoyi' }]


//类型别名
type User = {
  name: string,
  age: number
}

const objArrNew: User[] = [{
  name: 'luoyi',
  age: 2
}]

class Teacher {
  name: string;
  age: number;
}
const objArrNew1: Teacher[] = [
  new Teacher(),
  {
    name: 'luoyi',
    age: 3
  }
]

元组

// 和数组非常类似的概念 叫元组 tuple
const teacherInfo: (number | string)[] = ['Dell', 'male', 18]
// 元组的使用场景  csv
const teacheList: [string, string, number][] = [
  ['dell', 'male', 19],
  ['sun', 'female', 26],
  ['jeny', 'female', 38]
]

函数类型

const getTotal: () => number = () => {
  return 123
}
function add(first: number, second: number) {
  return first + second
}
// 为了防止返回值不能准确的通过参数推断出来,最好给函数的返回值也增加类型约束
function add1(first: number, second: number): number {
  return first + second
}
const total: number = add(1, 2)

//函数没有返回值
function sayHellow(): void {
  console.log('hello')
  // return ''
}
//函数永远不可能执行到最后
function errorEmitter(): never {
  throw new Error()
  console.log(123) //永远无法执行
}
//死循环导致永远无法执行循环下面的内容
function neverToEnd(): never {
  while (true) {

  }
  console.log('循环执行完执行的内容')
}
//函数参数接收解构的内容的语法
function addNew({ first, second }: { first: number, second: number }): number {
  return first + second
}
const totalNew = addNew({ first: 1, second: 2 })

function getNumber({ first }: { first: number }) {
  return first
}
const getNumberResult = getNumber({ first: 1 })
const func = (str:string):number=>{
    return parseInt(str,10)
}
const func:(str:string)=>number = (str)=>{
    return parseInt(str,10)
}

data类型

const date = new Date()

元组

其他类型

interface Person {
  name: 'string'
}
const rawData = '{"name:":"dell"}'
const newData: Person = JSON.parse(rawData)

let temp:number | string = 123
temp = '456'

如果TS能够自动分析变量类型,我们就什么都不用做了,如果一些场景下,TS无法分析变量的类型,那么我们就需要类型注解。