持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
9、数组类型
// 数组类型
let arr: string[] = ['1']
let arr1: Array<string> = ['1']
let arr2 = [] // any[]
arr2.push(1)
arr2.push('1')
let arr3: (string | number)[] = [1, '2']
type sn = string | number
let arr4: sn[] = [1, '2']
let arr5: Array<sn> = [1, '2']
10、函数类型
// 函数的类型
function abc(a: number = 1 ,b: number = 2): number {
return a + b
}
// 箭头函数
const abc1 = (a: number = 1, b: number = 2): number => {
return a + b
}
// 优化函数的类型（统一定义函数格式）
const abc3: (a:number, b:number) => number = (a, b) => {
return a + b
}
// 再次优化
type fn = (a: number, b: number) => number
const abc2: fn = (a, b) => {
return a + b
}
可选参数和 void
可选和默认值的区别
相同点： 调用函数时，可以少传参数
区别：设置了默认值之后，就是可选的了，不写就会使用默认值； 可选的参数一定有值。
注意：它们不能一起使用。优先使用默认值
// 可选参数 void: 没有任何类型 或者 没有返回值 或者 返回值为 null、undefined
// 注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数
const abc4 = (a?: number, b?: number): void => {
}
void和undefined的区别
如果函数没有指定返回值，调用结束之后，值是undefined的，但是不能直接声明返回值是undefined
function add(a:number, b:number): undefined { // 这里会报错
console.log(a,b)
}
11、对象类型
// 对象
const obj: {
name: string,
age: number,
set: () => void
} = {
name: '1',
age: 12,
set () {
console.log(111);
}
}
// 简化
type Stu1 = { // 类型别名
name?: string, // 可选参数
gender?: string,
results?: number,
height?: number,
learning?: () => void,
game?: () => void
}
const obj1: Stu1 = { // 使用一
name: '1',
gender: '女',
game () {
console.log(111);
}
}
const obj2: Stu1 = { // 使用二
name: '12',
gender: '男',
results: 11,
height: 111,
learning () {
console.log(111);
},
game () {
console.log(2222);
}
}
12、接口类型
// 接口
interface Iobj {
name: string,
gender: string,
game: () => void
}
interface Iobj1 extends Iobj { // 继承
results: number,
height: number,
learning: () => void,
}
const stuObj1: Iobj1 = {
name: '12',
gender: '男',
results: 11,
height: 111,
learning () {
console.log(111);
},
game () {
console.log(2222);
}
}
13、元组类型
简化版 useState
// 元组
const useState = (num: number): [number, (newNum: number) => void] => {
const fn = (newNum: number) => {
num = newNum
}
return [num, fn]
}
14、字面量类型
// 字面量
type aa = 'aa' | 'bb'
let aa: aa = 'aa'
let bb: aa = 'bb'
简化版 reducer
// reducer
type todo = 'GETLIST' | 'GETTODO'
type actionObj = {
type: todo,
payload: string[]
}
function reducer(state: string[] = [], action: actionObj): string[] {
switch (action.type) {
case 'GETLIST':
return action.payload
case 'GETTODO':
return action.payload
default:
return state
}
}
typescript的优缺点
优点:
它提供了可选静态类型的优点。在这里，Typescript提供了可以添加到变量、函数、属性等的类型。
Typescript能够编译出一个能在所有浏览器上运行的JavaScript版本。
它使用基于类的面向对象编程。
TypeScript总是在编译时强调错误，而JavaScript在运行时指出错误。
缺点
如果我们在浏览器中运行TypeScript应用程序，需要一个编译步骤将TypeScript转换成JavaScript。
要使用任何第三方库，必须使用定义文件。并不是所有第三方库都有可用的定义文件。
TypeScript不支持抽象类。
总结
TypeScript感觉将前端的JavaScript向后端的JAVA、C++等靠近了一大步，开始还有点不适应，一下子不知道怎么开始写程序，不过习惯了感觉其实这样挺好的，代码更严谨了，而且接口、装饰器这些其实真的挺好用的
