基礎(chǔ)類型快速入門

基礎(chǔ)類型 string,number,boolean

const teacher:string = 'Li';
const age:number = 18;
const isMale:boolean = true;

數(shù)組類型 string,number,boolean

const arr:number[] = [1,2,3]  // 數(shù)字類型數(shù)組
const arr:string[] = [1,2,3]   // 字符串類型數(shù)組
const boolArr:Array<boolean> = [true,false]  // 傳參形式定義布爾數(shù)組，范型

對象類型

const user:{name:string,age:number} = {name:'Li',age:18}
const userOne:{name:string,age?:number} = {name:'Li'}  // ?表示age可有可無

聯(lián)合類型 Union Type |

function union(id:string|number){
  if (typeof id === 'string') {  // 類型收窄 Narrowing
      console.log(id.toUpperCase())
  } else {
      consle.log(id)
  }
}

any類型

function showMessage(msg:any){
  console.log(msg)
}

函數(shù)類型

function fn(msg:string):number { // 返回值number類型
  return 123
}

const def:(age:number) => number = (age:number) => { return 18}

類型別名,類型復(fù)用

type:User = {name:string,age:number}
type:Employee = {name:string,age:number,salary:number}
const userTwo:User = {name:'Li',age:18}
const userThree:User = {name:'Li',age:18}

接口類型 Interface

interface Student {
  age:number;
  sex?:string;
}
// 寫法1
interface Student {
  name: string
}
// 寫法2
interface oldStudent extends Student {
  name: string
}
const student:Student = {age:18,sex:'male'}
const oldStudent:oldStudent= {age:18,sex:'male',name:'Li'}

interface 類型跟類型別名類似，區(qū)別在于。接口類型具有可擴(kuò)展性可以繼承,一般都是盡量用interface

交叉類型

type:User = {name:string,age:number}
type:Employee = User && {salary:number} // 交叉類型

const employee: Employee = {name:"Li",age:18,salary:1000}

斷言 Assersion(繞過ts檢測，按我們的意思來)

const dom:undefind = document.getElementById('root') as undefind
const dom1:undefind = <undefind>document.getElementById('root') 
const testString:string = 123 as any as string

字面量類型

const str:'abc' = 'abc'  // 只能類型,值一樣

function getPosition(position:'left' | 'right') { // 傳參只能是left或者 right
  return position
}
getPosition('left')
getPosition('right')

null undefind tsconfig

const testNull:null = undefind // ts不嚴(yán)謹(jǐn)  需配置 `"strictNullChecks": true`
const testundefind:undefind = null // ts不嚴(yán)謹(jǐn)  需配置 `"strictNullChecks": true`
function checkNull(abc:string | null){
  if (typeof abc === 'string') {
      console.log(abc!.toUpperCase()) // !表示可以確定只會(huì)是string類型，不會(huì)有null
  }
}

void 函數(shù)沒有返回值

function getNumber():void{

}