TypeScript基础入门：从环境搭建到核心类型详解

npm i  -g  typescript
#或者
yarn  global add  typescript

// 数值类型
let age: number = 18
// 字符串类型
let myName: string = '小花'
// 布尔类型
let isLoading: boolean = false
// undefined
let un: undefined = undefined
// null
let timer:null = null
// symbol
let uniKey:symbol = Symbol()

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr1 :number | string = 1 // 可以写两个类型

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()

type 别名 = 类型
type s = string // 定义
const str1:s = 'abc'
const str2:string = 'abc'

 type NewType = string | number
 let a: NewType = 1
 let b: NewType = '1'

// 写法1：
let 变量: 类型[] = [值1，...]:
let numbers: number[] = [1, 3, 5] 
//  numbers必须是数组，每个元素都必须是数字
// 写法2：
let 变量: Array<类型> = [值1，...]
let strings: Array<string> = ['a', 'b', 'c'] 
//  strings必须是数组，每个元素都必须是字符串

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
// 声明式实际写法:
function add(num1: number, num2: number): number {
  return num1 + num2
}
// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }
const add2 = (a: number =100, b: number = 100): number =>{
   return a + b
 }
 // 注意： 箭头函数的返回值类型要写在参数小括号的后面
add（1,'1') // 报错

const add2 = (a: number =100, b: number = 100): number => {
    return a + b
  }
function add1 (a:number = 100 , b: number = 200): number {
    return a + b
  }
// 这里的 add1 和 add2 的参数类型和返回值一致，
// 那么就可以统一定义一个函数类型
type Fn = (n1:number,n2:number) => number 
const add3 : Fn = (a,b)=>{return a+b }
// 这样书写起来就简单多啦

function greet(name: string): void {  console.log('Hello', name)  //}

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 如果return之后什么都不写，此时，add 函数的返回值类型为： void
const add = () => { return }
const add = (): void => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

function add(a:number, b:number): undefined { // 这里会报错
  console.log(a,b)
}

//可选参数：在可选参数名的后面添加 ?（问号）
function slice (a?: number, b?: number) {
    // ? 跟在参数名字的后面，表示可选的参数
    // 注意：可选参数只能在 必须参数的后面
    // 如果可选参数在必选参数的前面，会报错
    console.log(111);
  }
  slice()
  slice(1)
  slice(1,2)
}

const 对象名: {
  属性名1：类型1，
  属性名2?：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2  }

// 创建类型别名
type Person = {
  name: string，
  age: number
  sayHi(): void
}
// 使用类型别名作为对象的类型：
let person: Person = {
  name: '小花',
  age: 18
  sayHi() {}
}

interface 接口名  {属性1: 类型1, 属性2: 类型2}
// 这里用 interface 关键字来声明接口
interface IGoodItem  {
	// 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 `I` 开头
   name: string, price: number, func: ()=>string
}
// 声明接口后，直接使用接口名称作为变量的类型
const good1: IGoodItem = {
   name: '手表',
   price: 200,
   func: function() {
       return '看时间'
   }
}
const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

// 接口的写法-------------
interface IPerson {
	name: string,
	age: number
}
const user1：IPerson = {
	name: 'a',
	age: 20
}
// type的写法-------------
type Person  = {
	name: string,
	age: number
}
const user2：Person = {
	name: 'b',
	age: 20
}

interface 接口2 extends 接口1 {
 属性1： 类型1， // 接口2中特有的类型 
 }
interface a { x: number; y: number }
// 继承 a
// 使用 extends(继承)关键字实现了接口
interface b extends a {
  z: number
}
// 继承后，b 就有了 a 的所有属性和方法(此时，b 同时有 x、y、z 三个属性)

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            n = n1
        }
        return [n, setN]
    }
const [num ,setNum] = useState(10)

let str1 = 'hello TS'
const str2 = 'hello TS'

type Gender = 'girl' | 'boy'
// 声明一个类型，他的值 是 'girl' 或者是 'boy'
let g1: Gender = 'girl' // 正确
let g2: Gender = 'boy' // 正确
let g3: Gender = 'man' // 错误

enum 枚举名 { 可取值1, 可取值2,.. }
// 使用格式：
枚举名.可取值

enum Direction { Up = 10, Down, Left, Right }
// Down -> 11、Left -> 12、Right -> 13
enum Direction { Up = 2, Down = 3, Left = 8, Right = 16 }

enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT'
}

let obj: any = { x: 0 }
obj.bar = 100
obj()
// obj 可以是任意类型
const n: number = obj