typescript学习（1）

静态类型的理解 VS 动态类型

typeScript的静态类型：
声明的类型不能接受别的类型的数据

动态类型：

<!-- demo.js -->
<!--  动态类型 -->
let b = 123;
b='123'

静态类型

<!-- demo.ts -->
let b = 123
b='123' //报错

ts的优势

1、更好的错误提示

2、更好的代码语法提示

3、类型声明使代码更易阅读理解

ts环境搭建

npm install typescript -g
npm install -g ts-node

静态类型的深度理解

1、具有声明类型对应的属性和方法：包括基本类型和自定义类型

基础类型和对象类型

// 基础类型 
// number,string,null,undefined,symbol,boolean,void

const count:number = 123
const stu:string = 'lui'

// 对象类型
const stud:{
  name:string,
  age:number
} = {
  name:'lui',
  age:11
}

const numbers:number[] =[1,2,3]

class Person{}

const lui:Person = new Person()

const getTotal:() => number =()=>{
  return 123
}

类型注解 & 类型推断

类型注解(type annotation)：

我们来告诉TS变量是什么类型

let count:number
count = 123

类型推断(type inference)：

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

//如果TS能够自动分析变量类型，我们什么都不需要做了
const a = 1
const b = 2
const total = a + b

//如果TS无法分析变量类型的话，我们就需要使用类型注解

let count:number 
count = 123

function getTotal(a:number,b:number){
  return a+b
}
const total = getTotal(1,2)

函数相关类型

// js定义函数三种方式
function hello(){}
const hello1 = function(){}
const hello2 = () => {}

//返回值是number
function add(first:number,second:number):number{
  return first + second
}
// 函数返回值是null
function sayHello():void{
  console.log('hello')
}

// 函数永远不可能执行完成
function errorEmitter():never{
  throw new Error()
  console.log(123)
}
function errEmitter2():never{
  while(true){}
}

// 解构语法 参数添加类型
function add(
  {first,second}:{first:number,second:number}
  ):number{
  return first + second
}
function getNumber({first}:{first:number}){
  return first
}
const total = add({first:1,second:2})
const count = getNumber({first:1})

//函数的两种声明方法
const func =(str:string)=>{
  return parseInt(str,10)
}

const func1:(str:string)=>number = (str)=>{
  return parseInt(str,10)
}

基础语法复习

// 基础类型：boolean,number,string,void,undefined,symbol,null
let count:number 
count = 123

//对象类型:{},Class,function,[]
//函数的两种声明方法
const func =(str:string)=>{
  return parseInt(str,10)
}

const func1:(str:string)=>number = (str)=>{
  return parseInt(str,10)
}

const date = new Date()
interface Person{
  name:"string"
}
const rawData = '{"name":"lui"}'
const newData:Person = JSON.parse(rawData)

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

数组和元组

数组

// 数组
const arr:(string|number)[] = [1,2,3,'4']
const strArr:string[]=['a','v']
const undefinedArr:undefined[]=[undefined]
// 对象类型的数组

// const objectArr:{name:String,age:number}[]=[{
//   name:'lui',
//   age:11
// }]

// type alias 类型别名
type User = {name:string,age:number}
const objectArr2:User[]=[{
  name:'lui',
  age:22
}]

class Teacher{
  name:string
  age:number
}
const objectArr3:Teacher[]=[{
  name:'lui',
  age:22
}]

元组

// 元组 tuple
// 数组中的个数、类型都固定
const studentInfo:[string,string,number] =['lui','female',12]

// csv
// 元组类型数组
const studentsList:[string,string,number][] =[
  ['lui','female',22],
  ['zhenzhen','female',32],
  ['lu','male',12],
]

interface接口

// interface和type相类似，但并不完全一致

// const getPersonName = (person:{name:string}) =>{
//   console.log(person.name)
// }
// const setPersonName = (person:{name:string},name:string) =>{
//   person.name = name
// }

// 上述通用类型集合，可以抽出来
interface Person {
   //readonly name:string; //readonly 表示只读属性，不能赋值和更改 
  name:string; //readonly 表示只读属性，不能赋值和更改 
  age?:number; //表示age属性是可选的，不一定要传
  [propName:string]:any;//额外的属性，可选
  say():string;
}
type Person1 ={
  name:string
}
// 类型别名可以表述string等基本类型
type Person2 = string 

const getPersonName =(person:Person) =>{
  console.log(person.name)
}
const setPersonName = (person:Person,name:string):void=>{
  person.name = name
}
const person ={
  name:'lui',
  sex:'fdsf',
  say(){
    return 'hello'
  }
}
getPersonName(person)
getPersonName({
  name:'lui',
  sex:'fdsf', //报错 对象字面量赋值 会被强校验 
              // Person 接口声明时 使用[propName:string]:any 解决了这个问题
  say(){
    return 'hello'
  }

}) 
setPersonName(person,'lu')

// 类实现接口，必须满足接口的规则
class User implements Person{
  name = 'lui'
  say(){
    return 'hello'
  }
}

// 接口继承
interface Student extends Person{
  learn():string;
}
// 接口定义函数的类型
interface SayHi{
  (word:string):string;
}

const say:SayHi =(word:string)=>{
  return word
}