TypeScript_01

1)动态类型的问题

js属于动态类型语言，例如

function test(obj){}

obj可能只是个字符串

test('Hello')

obj也有可能是个函数

test(()=>console.log('Hello World'))

obj类型不确定，就给后期使用者带来了麻烦，一旦参数传不对，代码就崩溃了

动态类型意味着，运行代码时才知道发生什么(running the code to see what happens)

静态类型意味着，在代码运行前，就对它的行为做出预测(make predications about what code is expected before it runs)

下面的typescript代码就在代码运行前加入了约束限制

function test(msg:string){}//限制了参数只能做string那些事

function test (msg:Function){msg()}//限制了参数只能做函数那些事

安装typescript编译器,-g表示全局安装，可以将包或工具安装到全局可用，而不仅仅是在当前项目的目录下。不带'-g'选项的安装默认是项目级别的，只在当前项目的node_modules目录下安装。

npm install -g typescript

编写 ts 代码

function hello(msg:string){
    console.log(msg)
}

hello('hello world')

执行 tsc 编译命令

tsc xxx.ts

编译生成 js 代码，编译后进行了类型擦除

function hello(msg) {
    console.log(msg)
}
hello('hello world')

再来一个例子，用 interface 定义用户类型

interface User {
  name: string,
  age: number
}

function test(u: User): void {
  console.log(u.name)
  console.log(u.age)
}

test({ name: 'zhangs', age: 18 })

编译后

function test(u) {
    console.log(u.name);
    console.log(u.age);
}
test({ name: 'zhangs', age: 18 });

可见，typescript 属于编译时实施类型检查（静态类型）的技术

2)类型

类型	例	备注
字符串类型	string
数字类型	number
布尔类型	boolean
数组类型	number[],string[], boolean[] 依此类推
任意类型	any	相当于又回到了没有类型的时代
复杂类型	type 与 interface
函数类型	() => void	对函数的参数和返回值进行说明
字面量类型	"a"|"b"|"c"	限制变量或参数的取值
nullish类型	null 与 undefined
泛型	<T>，<T extends 父类型>

泛型<T extends 父类型> T只接受父类型或者父类型的子类,<T super 子类型>表示T只接受子类型或者子类型的父类

标注位置

     

目录

1)动态类型的问题

2)类型

标注位置

标注变量

标注参数

---

 标注变量

let message: string = 'hello,world'

一般可以省略，因为可以根据后面的字面量推断出前面变量类型

let message = 'hello,world'

    标注参数

function greet(name: string) {

}

        很多时候，都能够推断出参数类型

const names = ['Alice', 'Bob', 'Eve']
//传给map代表一个旧元素，返回值是函数(旧元素)里面运行的结果的返回值。例如
(let arr = [1,2,3]
function a(i){
    return a*10
}
arr.map(a)//具名函数，结果[10,20,30]

)
const lowercaseNames = names.map((e: string) => e.toLowerCase())

可以用类型推断，推断出 e 是 string 类型

标注返回值

function add(a: number, b: number) : number {
    return a + b
}

一般也可以省略，因为可以根据返回值做类型推断

  

复杂类型

type

type Cat = {
  name: string,
  age: number
}

const c1: Cat = { name: '小白', age: 1 }
const c2: Cat = { name: '小花' }                      // 错误: 缺少 age 属性
const c3: Cat = { name: '小黑', age: 1, sex: '公' } // 错误: 多出 sex 属性