【九月打卡】第45天 TypeScript(1)

JavaScript（简称JS）的问题

由于JS是动态类型的语言，灵活的同时也会产生一些问题

比如

function compare(n){
    if(1 < n < 5) {
        console.log('success')
    }
}
compare(100)  // 'success'

和预想中的不同，上述会先比较 1 < n得到值 true，然后 true再和5比较

let obj = {name: 'tom'}
console.log(obj.nmae)

上述把属性名写错，程序并不会报错，无形中会隐藏着bug

JS动态语言，写起来比较灵活，但是对于代码维护以及debug来说都不太容易，运行时会报错。

由此引申出TypeScript

TypeScript（简称TS）是什么？

• TS是JS的超集
• TS引入了静态类型，可以在编译阶段就提前发现一些错误
• TS不会在浏览器或者node中运行，TS最终会编译成JS

TypeScript基础使用

• 常见的基础类型有 string，number，boolean，symbol，null, undefined

const name: string = 'tom'
const age: number = 18
const bool: boolean = true
const nul: null = null
const und: undefined = undefined

• 数组

const arr: number[] = [1, 2, 3]
const arr1: Array<string> = ['name', 'relation'] //泛型

• 对象

const obj: {name: string, age: number} = {name: 'tom', age: 18}
const obj: {name: string, age?: number} = {name: 'tom'} // ?代表可选

• 联合类型

function fn(id: string | number) {
	console.log(id)
}

• 类型别名

type User = {name: string, age: number}
const student: User = {name: 'tom', age: 18}

• any

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

• 函数类型

function fn(num: number): number {
	return num
}

// 或者
const fn: (num: number)=> number = (num: number) => {
	return num
}

• 接口类型

interface Person {
	name: string;
	age?: number
}
// 接口的继承
interface Student extends Person{
	sex: string
}
const student: Student = {name: '小明', sex: 'male'}

• 交叉类型

type Person = {name: string, age: number}
type Student = Person & {sex: string}

const student: Student = {name: '小明', sex: 'male'}

• 断言 Assersion

const dom: undefined = document.getElementById('root') as undefined;
// 或者
const dom: undefined = <undefined>document.getElementById('root');

• 字面量类型

function getPosition(position: 'left' | 'right'): string {
	reurn position;
}

const bool: true = true
const name: '小明' = '小明'

• void (没有返回值)

function getPosition(): void {
	console.log('hello')
}

• never

// 函数永远不会有返回值时，例如 while(true){}
const fn: ()=> never = () => {
      while(true){  }
}

// 抛出错误
const fn: ()=> never = () => {
      throw new Error('error')
}